Visibility Component

The Visibility component allows you to control when 3D objects appear, disappear, or become solid in your scene. Think of it as a smart switch that can show/hide objects and make them solid or pass-through based on events happening in your world. It works across all connected players, so everyone sees the same changes at the same time.

Important: This component only handles instant visibility and collision state changes - it does not create visual transitions (like fade effects, scaling, or animations). For smooth visual transitions, you'll need to combine this with animation components or custom effects.

Download Component

What Does It Do?

The Visibility component is like having a remote control for your 3D objects. You can:

• Show or hide objects when something happens (like a player touches a button)
• Make objects solid or pass-through (collision on/off)
• Add delays so changes happen after a wait time (but still instant when they occur)
• Sync changes so all players see the same thing
• Chain actions by triggering other components when visibility changes

Important: This component only handles the showing/hiding and solid/pass-through states. You need other components (like buttons, triggers, or timers) to actually make things happen. The visibility changes are instant - for smooth visual transitions, you'll need animation components.

Video Demo

Watch the Visibility component in action: objects appearing/disappearing, collision changes, and synchronized effects across all players.

Properties

Basic Settings

Property	Type	Default	Description
App ID	text	Auto	Unique name for this component (auto-generated)
Node Name	text	""	Required: Name of the 3D object in your scene
Debug Logs	toggle	false	Show detailed information for troubleshooting
Add Collision	toggle	true	Make the object solid (players can't walk through)
Start Visible	toggle	true	Should the object be visible when the scene loads?

Visibility Settings

Property	Type	Default	Description
Sync Changes	toggle	false	Should all players see changes at the same time?
Default Visible	toggle	true	Default visibility when events don't specify
Default Collision	toggle	true	Default collision when events don't specify
Use Delay	toggle	false	Add a wait time before changes happen?
Delay (sec)	number	0	How many seconds to wait before instant change (0.1 to 60)
Emit When Shown	toggle	false	Send a signal when object becomes visible?
Emit When Hidden	toggle	false	Send a signal when object becomes invisible?
Accept Any Event	toggle	false	Listen to any signal sent to this component?
Event Listeners	textarea	[]	List of events that trigger visibility changes

How Events Work

The Visibility component listens for "signals" (events) from other components. When it receives a signal, it changes the object's visibility or collision state. The component uses its unique App ID (generated by Hyperfy) to identify itself in the event system.

Event Format

In the Event Listeners field, you can specify events like this:

[
  {
    "id": "a1b2c3d4e",
    "actions": [
      {
        "type": "set-visibility",
        "params": {
          "isVisible": true,
          "hasCollision": false,
          "delay": 1.5
        }
      }
    ]
  }
]

Note: When referencing this component in events from other components, use the App ID that Hyperfy generated for this component. Also, when duplicating components, be sure you make the app unique, so it has a new AppID

Event Parameters

When an event triggers a visibility change, you can control:

Parameter	Type	Description
isVisible	boolean	true = show object, false = hide object
hasCollision	boolean	true = solid object, false = pass-through
isSync	boolean	true = all players see change, false = local only
delay	number	Seconds to wait before applying the change

Common Use Cases

1. Hidden Doors

• Object: A secret door
• Event: Player solves a puzzle
• Action: Door instantly becomes visible and solid

2. Disappearing Platforms

• Object: A platform that vanishes
• Event: Player steps on a trigger
• Action: Platform instantly becomes invisible and pass-through

3. Synchronized Effects

• Object: A treasure chest
• Event: Any player opens it
• Action: Chest instantly disappears for all players at the same time

4. Timed Reveals

• Object: A hidden message
• Event: Timer reaches zero
• Action: Message instantly appears after a 2-second delay

5. Collision Management

• Object: A barrier
• Event: Player collects a key
• Action: Barrier instantly becomes pass-through (collision off)

Step-by-Step Setup

1. Add the Component

• Drag the Visibility component into your scene
• Select the 3D object you want to control

2. Configure Basic Settings

• Set the Node Name to match your 3D object's name
• Choose if the object should Start Visible
• Decide if it should Add Collision (be solid)

3. Set Up Events

• In Event Listeners, add the events that should trigger changes
• Use the JSON format shown above
• Replace event names with actual events from other components

4. Configure Behavior

• Enable Sync Changes if all players should see changes
• Set Use Delay and Delay (sec) for smooth transitions
• Enable Emit When Shown/Hidden to trigger other components

5. Test Your Setup

• Enable Debug Logs to see what's happening
• Trigger your events and watch the object change
• Check that all players see the same changes

Tips for Designers

Naming Your Objects

• Use clear, descriptive names for your 3D objects
• Avoid spaces and special characters in object names
• Example: secret_door_01, treasure_chest, hidden_platform

Planning Your Events

• Think about what should trigger visibility changes
• Consider timing and delays for smooth experiences
• Plan for both single-player and multiplayer scenarios

Testing Your Setup

• Always test with multiple players
• Use debug logs to troubleshoot issues
• Test edge cases (what happens if players disconnect?)

Performance Considerations

• Don't change visibility too frequently
• Remember that changes are instant - no visual transitions
• Consider the impact on mobile devices

Troubleshooting

Object Doesn't Change

• Check that the Node Name matches exactly
• Verify that your events are being sent
• Enable Debug Logs to see what's happening

Changes Not Syncing

• Make sure Sync Changes is enabled
• Check that the event includes "isSync": true
• Verify all players are connected

Delays Not Working

• Ensure Use Delay is enabled
• Check that Delay (sec) is greater than 0
• Verify the delay value in your event parameters
• Remember: delays only postpone the instant change, they don't create smooth transitions

Want Smooth Transitions?

• This component only does instant show/hide
• For fade effects, scale animations, or smooth transitions, you'll need animation components

Collision Issues

• Check if Add Collision is enabled
• Verify hasCollision parameter in events
• Test with simple objects first

Best Practices

• Start Simple: Test with basic show/hide before adding complexity
• Use Descriptive Names: Make your object and event names clear
• Plan for Multiplayer: Consider how changes affect all players
• Add Delays: Use delays for smoother, more professional experiences
• Test Thoroughly: Always test with multiple players and scenarios
• Use Debug Logs: Enable debug mode during development
• Document Your Setup: Keep notes on your event configurations