NOTE: This version of the documentation tracks unstable development happening on A-Frame’s
masterbranch. If you wish to try it out, grab the unstable build. Otherwise, head to the documentation for the current 1.3.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
|true||The entity will be rendered and visible; the default value.|
|false||The entity will not be rendered nor visible. The entity will still exist in the scene.|
It is slightly faster to update visibility at the three.js level versus via
// With three.js
Updates at the three.js level will still be reflected when doing
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. -->