Question

有谁知道如何在框架中创建按钮

Answer 1

使用A-Frame创建按钮的一种方法是使用<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>

当光标聚焦在＆＃34;按钮＆＃34;时，click事件将被触发。要向按钮添加文本，您可以使用此组件：

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

最后，如果您正在寻找更传统的＆＃34;按钮＆＃34;，您可以简单地将<button>元素浮动在画布上，或者如果您正在嵌入，则将iframe浮动。 / p>

Answer 2

我喜欢https://www.npmjs.com/package/aframe-event-set-component的悬停事件。我给光标赋予一个属性（可单击数据），然后我说raycaster他应该只触发具有该属性的实体。如果您想让某些东西只是可点击的（例如，如果您输入vr-mode），则只需删除dataclickable属性即可。场景看起来像这样：

<a-scene cursor="rayOrigin: mouse" raycaster="objects: [data-clickable]">

        <a-image id="button" data-clickable visible="true" position="2 1.75 -0.2" height="0.5" width="0.5" rotation="0 90 0" onclick="dosomething()" event-set__enter="_event: mouseenter;  width: 0.53; height: 0.53;"
            event-set__leave="_event: mouseleave;  width: 0.5; height: 0.5;"></a-image>

    <a-camera>
      <a-cursor id="curseid" raycaster="objects: [data-clickable]"</a-cursor>
    </a-camera>

</a-scene>

如果您希望某个按钮在发生某些事情时也起作用，请稍后再为他提供属性：

document.getElementById('button').setAttribute('data-clickable', '');

如果使用完按钮，请使用：

document.getElementById('button').setAttribute('visible', 'false');
document.getElementById('button').removeAttribute('data-clickable');

如果您希望光标仅在例如进入vr模式时触发按钮，请更改raycaster =“ objects：.notclickable”，然后在此行中将其属性归还给他：

document.getElementById('curseid').setAttribute('raycaster', 'objects: [data-clickable]');

现在这是我做按钮的方法，也许有更聪明的方法。我希望这对您有所帮助：D

你如何创建一个aframe按钮

2 个答案: