Skip to main content

​
Overview

Instruction animations are visual cues that guide learners on what to do — they show animated hands performing the required action (tap here, move this, rotate that). These are separate from the learner’s actual hands in the scene. Use Set Instruction Animation Color to change the instruction animation color for better visibility against different scene backgrounds. Use Reset Instruction Animation Color to restore the default.

​
Understanding Instruction Animations

Instruction animations appear when:
  • Showing the learner how to tap an object
  • Demonstrating how to grab and move a component
  • Indicating rotation or manipulation steps
  • Providing gestural guidance without blocking the learner’s view
Customizing the instruction animation color ensures visibility and helps distinguish instruction phases from practice phases.

​
Set Instruction Animation Color

​
When to Use

  • Improve visibility — Change color to stand out against complex 3D scene backgrounds
  • Distinguish instructions from practice — Use one color for demos, another for learner practice
  • Match training theme — Align instruction animation color with your course branding
  • Emphasize critical steps — Use standout colors for important demonstration steps

​
Parameters

ParameterTypeRequiredDescription
ColorString (Hex)YesHexadecimal color code (e.g., "#FFFFFF" for white, "#FF00FF" for magenta)

​
Example 1: White Instruction Hand

Action: Set Instruction Animation Color
Color: "#FFFFFF"
Instruction animations are white — useful for high-contrast visibility against dark backgrounds.

​
Example 2: Yellow Instruction Hand

Action: Set Instruction Animation Color
Color: "#FFFF00"
Yellow instruction animations stand out brightly for clear instruction visibility.

​
Example 3: Magenta Instruction Hand

Action: Set Instruction Animation Color
Color: "#FF00FF"
Magenta instruction animations provide a distinct color that contrasts with most scene backgrounds.

​
Reset Instruction Animation Color

​
When to Use

  • Return to the default instruction hand color after a special color phase
  • Reset between training modules or major sections
  • Restore system defaults after custom coloring

​
Parameters

ParameterTypeRequiredDescription
None——No parameters. Resets to the default instruction animation color

​
Example

Action: Reset Instruction Animation Color
Instruction animations return to their default system color.

​
Best Practices

1

Test against scene backgrounds

Preview your chosen color against the actual 3D scene background to ensure visibility.
2

Use high-contrast colors

Light colors (white, yellow) work well against dark scenes. Dark colors against light scenes.
3

Keep color consistent

Use the same instruction hand color throughout your training unless you have a specific reason to change.
4

Distinguish from learner hands

Use different colors for instruction animations vs. learner hands to avoid confusion.
5

Test on multiple devices

Verify color visibility on phone, tablet, and desktop screens.
6

Document your color scheme

If using multiple colors, explain what each means (e.g., “White hands = instruction, blue hands = learner”).

​
Common Patterns

​
High-Visibility Instruction Hand

State: DemonstrationPhase
  onEntry:
    → Set Instruction Animation Color (Color: "#FFFF00")
    → Show Panel
        Title: "Watch the demonstration"
        Display Text: "Yellow hands show the correct procedure. Watch carefully."
        Billboard: true
    → Disable Self Teleport (Disabled: true)
    → Play animation "valve-turning-animation"

  onExit:
    → Reset Instruction Animation Color
    → Hide Panel
    → Disable Self Teleport (Disabled: false)
Instruction hands turn yellow for clear visibility during the demonstration. They reset to default when practice begins.

​
Contrast-Based Coloring

State: DarkSceneInstruction
  onEntry:
    → Set Instruction Animation Color (Color: "#FFFFFF")
    → Show Text "White hands demonstrate the procedure against the dark background."

State: LightSceneInstruction
  onEntry:
    → Set Instruction Animation Color (Color: "#000000")
    → Show Text "Black hands demonstrate the procedure against the light background."
Different colors are used based on the scene background for optimal contrast.

​
Instruction vs. Practice Distinction

State: InstructionDemo
  onEntry:
    → Set Instruction Animation Color (Color: "#00FF00")
    → Show Panel
        Title: "Instruction: Assembly Steps"
        Display Text: "Green hands show the correct assembly sequence."
        Billboard: true
    → Disable Self Teleport (Disabled: true)
    → Play animation "assembly-steps"

  onExit:
    → Reset Instruction Animation Color
    → Hide Panel

State: PracticeAssembly
  onEntry:
    → Show Panel
        Title: "Your Turn"
        Display Text: "Now you practice. No instruction animations — you're on your own!"
        Billboard: true
    → Disable Self Teleport (Disabled: false)
    → Set Interactable Objects (["component-1", "component-2"], true)

  onExit:
    → Hide Panel
Instructions use a colored instruction animation; practice uses no instructions, making the distinction clear.

​
Color Selection Guide

ColorHex CodeBest ForNotes
White#FFFFFFDark/black scenesHigh contrast, professional look
Yellow#FFFF00Most backgroundsBright, attention-grabbing
Cyan#00FFFFDark scenesHighly visible, tech aesthetic
Magenta#FF00FFNeutral/varied scenesDistinctive, stands out
Lime#00FF00Dark scenesBright green, natural look
Orange#FF9900Blue/cool-toned scenesWarm, attention-getting
  • Set Tether Line Color — Customize tether line color (separate from instruction hands)
  • Set Hand Animation Color — Customize learner hand representation color
  • Disable Self Teleport — Lock the learner during instruction phases
  • Show Panel — Display explanatory text about instruction animations