Aframe 使用A-Frame实体控制HTML对象_Aframe_Virtual Reality_360 Virtual Reality

Aframe 使用A-Frame实体控制HTML对象

aframe

Aframe 使用A-Frame实体控制HTML对象,aframe,virtual-reality,360-virtual-reality,Aframe,Virtual Reality,360 Virtual Reality,是否可以使用a-Frame实体控制a-scene之外的常规html对象？例如，我想在嵌入式场景中选择平面、球体等时切换模态对象。我知道可以在场景中显示的UI模式，但是在场景和“外部”元素之间进行操作的能力将非常强大。我相信这是可能的，但我还没有VR开发人员的技能来解决这个问题！提前感谢您的帮助是的，组件可以包含任意JS代码。您可以操作页面的任何DOM元素。理论上，您可以“寻址”并操作DOM中的任何元素。例如，使用jQuery： myDiv = $('#my-div'); myDiv.toggl

是否可以使用a-Frame实体控制a-scene之外的常规html对象？例如，我想在嵌入式场景中选择平面、球体等时切换模态对象。我知道可以在场景中显示的UI模式，但是在场景和“外部”元素之间进行操作的能力将非常强大。我相信这是可能的，但我还没有VR开发人员的技能来解决这个问题！提前感谢您的帮助

是的，组件可以包含任意JS代码。您可以操作页面的任何DOM元素。

理论上，您可以“寻址”并操作DOM中的任何元素。例如，使用jQuery：

myDiv = $('#my-div');
myDiv.toggle();

这应该行得通，但充分披露：我还没有真正尝试过…

在桌面上，这是一个非常酷的想法。我刚刚看到上野在电视上使用这种互动技术

正如迭戈和史蒂夫指出的，从A-Frame与HTML交互并不太困难

我创建了一个小示例来演示：

对于组件（单击事件所在的位置）：


注册表组件（'a-frame-to-html'{
init：函数（）{
let box=document.querySelector（“#box”）
让modal=document.querySelector（“.modal”）
box.addEventListener（'单击'，（e）=>{
modal.classList.add（“显示”）
})
}
});

然后加价：

<body>
  <div class="modal">
    <!-- Modal content can go here... -->
  </div>
  <a-scene a-frame-to-html>
    <a-entity camera="userHeight: 1.6" look-controls cursor="rayOrigin: mouse"></a-entity>
    <a-box id="box" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
    <a-sky color="#ECECEC"></a-sky>
  </a-scene>
</body>

欢迎使用堆栈溢出！当您在此处创建帐户时，建议您使用并阅读，以便熟悉该网站。您应该阅读的特定页面包括和。请采取这些介绍性步骤，然后相应地编辑您的文章。我不会采取这些介绍性步骤，并相应地编辑我的文章。提供了有用的答案。我只是假设在场景中使用实体对象（如3D）操纵常规HTML元素（如2D）不会那么容易，但我可能也应该先尝试简单的路线。谢谢谢谢你，诺姆！完美的答案，你超越了一切。我之前错了，认为脚本是在a-scene标记中执行的，但它是在常规脚本标记中执行的。使用a-frame实体与常规HTML对象交互确实很容易。您提供的注册组件的方法比我尝试的方法更加健壮。我最近才发现A-Frame，它太棒了！即使像我这样的新手也可以构建一些非常酷的交互项目！

<body>
  <div class="modal">
    <!-- Modal content can go here... -->
  </div>
  <a-scene a-frame-to-html>
    <a-entity camera="userHeight: 1.6" look-controls cursor="rayOrigin: mouse"></a-entity>
    <a-box id="box" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
    <a-sky color="#ECECEC"></a-sky>
  </a-scene>
</body>