Question

我正在使用a-frame，我想在屏幕上添加一个菜单来切换场景或其他动作（例如显示带有信息的模态）。有没有办法实现这个目标？我搜索并找到了aframe-ui-modal-component，这不是我想要的100％，但它显示了某种菜单，但是使用它，我无法使这些按钮可点击并触发动作。

Answer 1

您可以使用平面实体或弯曲图像来显示菜单。使用Javascript，您可以使这些按钮可单击：

document.querySelector('#menu1');.addEventListener('click', function() {
model.setAttribute('visible','true'); 
}

Answer 2

没有通过鼠标点击完成典型javascript事件监听器的直接方式，因为它基于2D空间（x和y屏幕坐标），其中WebVR处理3D空间，因此需要光线投射确定你在3D空间中指向的位置。

这并不是说没有间接的方式。我将首先提供最短（和功能较少）的解决方案，然后在最后提供更复杂的解决方案。

这里有一个鼠标光标库：https://www.npmjs.com/package/aframe-mouse-cursor-component

这允许您注册三个鼠标事件：click，mouseenter和mouseleave。这会从相机到鼠标指针绘制一个raycaster，并推断出您指向的对象。

如果您想使用VR视图光标，可以：https://aframe.io/docs/0.2.0/components/cursor.html

在这里，您可以注册悬停并点击您正在查看的事件。

您要使用这些输入设备中的哪一个分别与菜单，鼠标或视图光标进行交互。现在进入菜单本身。

正如miauz指出的那样，你可以使用javascript创建平面并将事件监听器附加到它们，因为你已经包含了一个工具来为你选择它们。如果您不熟悉事件监听器，可以在此处找到教程：

http://www.w3schools.com/jsref/met_document_addeventlistener.asp

飞机上的文字：

https://www.npmjs.com/package/aframe-bmfont-text-component

现在，您可以使用第三方库将典型的2D事件转换为3D环境，并在菜单中包含的平面对象（按钮）上使用事件。

复杂的方式：你可以自己使用射线游戏。

https://aframe.io/docs/0.2.0/components/raycaster.html

这是更深入的，需要更多代码行，但如果你足够熟练，你可以用它们完成更多。例如，在这里你可以沿着从你的相机延伸的线上得到所有物体，而上面更简单的解决方案只能给你最近的物体。

我希望这会有所帮助。祝你好运！

Answer 3

这里有一个使用Aframe https://aframe.io/docs/1.0.0/guides/building-a-360-image-gallery.html构建360度画廊的教程。它显示了如何指定要单击的操作，在这种情况下，该操作是更改图库中的图像。这是带有事件的代码段：

<script id="link" type="text/html">
  <a-entity class="link"
    geometry="primitive: plane; height: 1; width: 1"
    material="shader: flat; src: ${thumb}"
    sound="on: click; src: #click-sound"
    event-set__mouseenter="scale: 1.2 1.2 1"
    event-set__mouseleave="scale: 1 1 1"
    event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"></a-entity>
</script>

如果您不仅想通过这种方式处理点击，还可以按照此处的指导来实现自己的自定义组件：https://aframe.io/docs/1.0.0/introduction/interactions-and-controllers.html

如何创建一个框架菜单 - webvr

3 个答案: