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

【问题标题】：Control HTML Objects with A-Frame Entity使用 A-Frame 实体控制 HTML 对象
【发布时间】：2018-01-25 16:40:46
【问题描述】：

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

【问题讨论】：

欢迎来到 Stack Overflow！当您在此处创建帐户时，建议您使用 tour 并阅读 help center pages 以熟悉该网站。您应该阅读的特定页面包括How Do I Ask a Good Question? 和How to Create a Minimal, Complete, and Verifiable Example。请采取这些介绍性步骤，然后相应地编辑您的帖子。
我不会采取这些介绍性步骤并相应地编辑我的帖子。提供了有用的答案。

标签： aframe virtual-reality 360-virtual-reality

【解决方案1】：

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

【讨论】：

【解决方案2】：

在桌面上，这是一个非常酷的想法。刚刚看到上野在https://interview.ueno.co/上使用了这种交互技术

正如 Diego 和 Steve 指出的那样，从 A-Frame 与 HTML 交互并不难。

我创建了一个小示例来演示： https://glitch.com/edit/#!/a-frame-to-html-modal

对于组件（点击事件所在的地方）：

<script>
AFRAME.registerComponent('a-frame-to-html', {
  init: function () {
    let box = document.querySelector('#box')
    let modal = document.querySelector('.modal')

    box.addEventListener('click', (e) => {
      modal.classList.add("show")
    })
  }
});
</script>

然后标记：

<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>

【讨论】：

感谢诺姆！完美的答案，你超越了。我之前弄错了，认为脚本是在 a-scene 标记中执行的，但它是在常规脚本标记中执行的。使用框架实体与常规 HTML 对象进行交互真的很容易。您提供的注册组件的方法比我尝试的要强大得多。我最近才发现 A-Frame，它太棒了！即使是像我这样的新手也可以构建一些非常酷的互动项目！

【解决方案3】：

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

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

应该可以工作，但完全披露：我还没有真正尝试过......

【讨论】：

我只是假设在场景中使用实体对象（即 3D）来操作常规 HTML 元素（即 2D）并不容易，但我可能应该首先尝试简单的路线好吧。谢谢！