Aframe 如何创建a帧菜单-webvr

我使用的是a-frame，我想在屏幕上添加一个菜单来切换场景或其他动作（例如，使用信息显示模式）。 有什么办法可以做到这一点吗？

---

我已经搜索并找到了一个框架ui模式组件，它不是我想要的100%，但它显示了某种菜单，但使用它，我无法使这些按钮可点击并启动操作

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

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

---

没有一种直接的方法可以通过鼠标点击来实现典型的javascript事件监听器，因为它基于二维空间（x和y屏幕坐标），WebVR处理的是三维空间，因此需要光线投射来确定您在三维空间中的指向

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

这里有一个鼠标光标库：

这允许您注册三个鼠标事件：单击、mouseenter和mouseleave。这将从摄影机到鼠标指针绘制光线投射器，并推断您指向的对象

如果要使用VR视图光标，有：

在这里，您可以注册您正在查看的悬停和单击事件

您希望使用这些输入设备中的任何一个分别与菜单、鼠标或视图光标交互。现在进入菜单本身

正如miauz指出的，现在您已经包括了一个工具，可以使用javascript创建平面并将事件监听器附加到平面上。如果您不熟悉事件侦听器，可以在此处找到教程：

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

平面上的文本：

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

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

---

复杂的方法：你可以自己使用光线投射器

https://aframe.io/docs/0.2.0/components/raycaster.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>

A-Frame将鼠标光标组件功能添加到库本身。NPM软件包已过时，不再适用于新版本的A-Frame。A-Frame现在内置了此功能，请尝试将其添加到光标实体。cursor=“光线原点：鼠标”。