button - aframe ボタンの作成方法

Question

フレームにボタンを作成する方法を知っている人はいますか

Answer 1

A-Frame でボタンを作成する 1 つの方法は、<a-box>プリミティブをカーソルと組み合わせて使用​​することです。以下は簡単なデモです。

<a-scene>
    <a-entity position="0 .6 4">
        <a-camera>
            <a-entity id="mycursor" cursor="fuse: true; fuseTimeout: 500; max-distance: 30;"
            position="0 0 -5"
            geometry="primitive: ring"
            material="color: blue; shader: flat">
            </a-entity>
        </a-camera>
    </a-entity>

    <!-- "button" -->
    <a-entity id="refresh-button" geometry="primitive: box" material="color: red" position="0 0 -2"></a>
</a-scene>

<script>
    document.querySelector('#refresh-button').addEventListener('click', function() {
        // Refresh stuff would go here!
    });
</script>

カーソルが「ボタン」にフォーカスすると、clickイベントが発生します。ボタンにテキストを追加するには、次のコンポーネントを使用できます。

https://github.com/ngokevin/aframe-text-component

最後に、より伝統的な「ボタン」を探している場合は<button>、キャンバスまたは埋め込みの場合は Iframe に要素を浮かせるだけです。