1

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

4

3 回答 3

1

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

<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

于 2020-11-15T03:28:34.460 回答
1

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

document.querySelector('#menu1');.addEventListener('click', function() {
model.setAttribute('visible','true'); 
}
于 2016-10-11T19:15:29.090 回答
1

没有直接的方法可以通过鼠标单击来完成典型的 javascript 事件侦听器，因为它基于 2D 空间（x 和 y 屏幕坐标），WebVR 正在处理 3D 空间，因此需要光线投射来确定你在哪里指向 3D 空间。

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

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

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

如果你想使用 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

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

复杂的方式：您可以自己使用光线投射器。

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

这更深入，需要更多的代码行，但如果你足够熟练，你可以用它们完成更多。例如，在这里您可以沿从相机延伸的一条线获取所有对象，而上面更简单的解决方案只为您提供最接近的解决方案。

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

于 2017-02-10T22:37:26.417 回答