visible

NOTE: This version of the documentation tracks unstable development happening on A-Frame’s master branch. If you wish to try it out, grab the unstable build. Otherwise, head to the documentation for the current 1.6.0 version

The visible component determines whether to render an entity. If set to false, then the entity will not be visible nor drawn.

Visibility effectively applies to all children. If an entity’s parent or ancestor entity has visibility set to false, then the entity will also not be visible nor draw. It’s a common pattern to create container entities that contain an entire group of entities that you can flip on an off with visible.

Example

<a-entity visible="false"></a-entity>

Value

Updating Visibility

It is slightly faster to update visibility at the three.js level versus via .setAttribute.

// With three.js
el.object3D.visible = false;

// With .setAttribute.
el.setAttribute('visible', false);

Updates at the three.js level will still be reflected when doing entityEl.getAttribute('visible');.

Hiding Entity Until Texture Loaded

While we can do this with the event-set component, we can also do this with the built-in animation component. Here’s an example of updating visibility on an event.

<!-- Wait 1 second before showing the entity. -->
<a-entity
  animation="property: visible; to: true; startEvents: materialtextureloaded"></a-entity>
  material="src: #myTexture"
  visible="false">