visibleコンポーネントは、エンティティをレンダリングするかどうかを決定します。falseに設定された場合、エンティティは表示も描画もされません。

可視性はすべての子に効果的に適用される。エンティティの親または祖先のエンティティの可視性がfalseに設定されている場合、そのエンティティも可視化されず、描画されない。コンテナエンティティを作成し、その中にエンティティグループ全体を格納して、visibleでオン・オフできるようにするのは、よくあるパターンです。

例

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

値

Value	概要
true	実体がレンダリングされ、可視化されます；デフォルト値です。
false	実体がレンダリングされず、可視化されませんが、エンティティはまだシーンに存在します。

可視を更新する

.setAttributeを使用するよりも、three.jsレベルで可視性を更新する方がわずかに高速です。

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

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

three.jsレベルでの更新は、entityEl.getAttribute('visible');を行っても、反映されます。

テクスチャがロードされるまでエンティティを非表示にする

このようなことは、イベントセットコンポーネント (opens new window)でもできますが、組み込みのアニメーションコンポーネントでもできます。以下は、イベント発生時に可視性を更新する例です。

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