Skip to main content

​
Overview

A tether line is a visual line that connects the learner’s hand or pointer to an object during interaction. It shows the interaction path and provides visual feedback about what the learner is manipulating. Use Set Tether Line Color to customize the tether line color to match your training theme or highlight specific interactions. Use Reset Tether Line Color to restore the default color.

​
Understanding Tether Lines

Tether lines appear when:
  • The learner grabs and drags an object
  • The learner is moving or rotating a manipulated object
  • Pointer-based interaction (ray casting) is active
The color of the tether line helps learners understand their interaction with the object and can be themed to match your training’s visual design.

​
Set Tether Line Color

​
When to Use

  • Match training theme — Use tether colors that align with your course branding
  • Highlight interactions — Change color for specific interaction types (e.g., red for hazardous objects)
  • Provide visual distinction — Use different colors for different types of interactions in the same training
  • Improve visibility — Adjust color to contrast with complex 3D scene backgrounds

​
Parameters

ParameterTypeRequiredDescription
ColorString (Hex)YesHexadecimal color code (e.g., "#FF0000" for red, "#00FF00" for green)

​
Example 1: Standard Blue Tether

Action: Set Tether Line Color
Color: "#0099FF"
All future tether lines are blue.

​
Example 2: Red Tether for Hazardous Interaction

Action: Set Tether Line Color
Color: "#FF0000"
Tether lines turn red to indicate a hazardous interaction requiring careful handling.

​
Example 3: Green Tether for Safe Handling

Action: Set Tether Line Color
Color: "#00BB00"
Green tether indicates a safe, normal interaction.

​
Reset Tether Line Color

​
When to Use

  • Restore the default tether color after a special color phase
  • Reset to system default between training modules
  • Clean up custom colors before transitioning to the next section

​
Parameters

ParameterTypeRequiredDescription
None——No parameters. Resets to the default tether color

​
Example

Action: Reset Tether Line Color
The tether line color returns to the system default.

​
Best Practices

1

Use consistent colors

Maintain consistent tether colors throughout your training for easier learner recognition.
2

Ensure contrast

Choose colors that contrast well with your 3D scene background. Test on different devices.
3

Limit color changes

Change tether color only when it adds meaning (hazard indication, theme change, etc.). Don’t change frequently.
4

Document color meanings

If you use multiple tether colors, explain their meanings (e.g., “Red = hazardous, green = safe”).
5

Test visibility

Verify your chosen color is visible against the 3D scene on mobile, tablet, and desktop displays.
6

Reset when appropriate

Return to default color between major training sections for clarity.

​
Common Patterns

​
Theme-Specific Coloring

State: StartOfTraining
  onEntry:
    → Set Tether Line Color (Color: "#0099FF")
    → Show Panel
        Title: "Safety Equipment Assembly"
        Display Text: "In this training, blue lines indicate normal interactions."
        Billboard: true

  onExit:
    → Hide Panel
The training starts with a custom blue tether color that matches the training theme.

​
Hazardous vs. Safe Interactions

State: HandleChemical
  onEntry:
    → Set Tether Line Color (Color: "#FF0000")
    → Show Text "Red lines indicate hazardous materials. Handle carefully."
    → Set Interactable Objects (["chemical-vial"], true)

  transitions:
    - event: "chemical-handled-safely"
      action:
        - Reset Tether Line Color
        - Show Text "Good handling. Red lines indicate danger — always be careful."
      target: "NextStep"

  onExit:
    → Hide Text
The hazardous material phase uses red tethers. Normal interactions use default color.

​
Multi-Step Procedure with Color Changes

State: Step1SafeAssembly
  onEntry:
    → Set Tether Line Color (Color: "#00BB00")
    → Show Text "Step 1: Assemble components (green = normal interactions)"
    → Set Interactable Objects (["component-a", "component-b"], true)

  onExit:
    → Hide Text

State: Step2PrecisionAlignment
  onEntry:
    → Set Tether Line Color (Color: "#FFD700")
    → Show Text "Step 2: Precision alignment required (gold = high precision)"
    → Set Interactable Objects (["alignment-screw"], true)

  onExit:
    → Hide Text

State: Step3FinalCheck
  onEntry:
    → Set Tether Line Color (Color: "#0099FF")
    → Show Text "Step 3: Final verification (blue = checking)"
    → Reset Tether Line Color
Each step uses a different tether color to indicate its role in the procedure.

​
Color Reference

ColorHex CodeUse Case
Red#FF0000Hazardous, error, or critical warning
Green#00BB00Safe, correct, or normal interaction
Blue#0099FFNeutral, standard, or checking phase
Yellow#FFFF00Caution or attention-required
Orange#FFA500Warning or important notice
Purple#9933FFSpecial or unique interaction
Gold#FFD700Premium, precision, or high-importance
  • Set Instruction Animation Color — Customize instruction animation color (separate from tether)
  • Set Hand Animation Color — Customize learner hand representation color
  • Show Text — Explain the meaning of tether line colors to learners
  • Show Red Vignette — Provide additional error feedback alongside tether color