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

Question

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

Answer 1

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

Answer 2

理论上您可以 "address" 并操纵 DOM 中的任何元素。例如使用 jQuery：

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

应该有效，但完全披露：我还没有真正尝试过...

Answer 3

在桌面上，这是一个非常酷的想法。我刚刚在 https://interview.ueno.co/

上看到 Ueno 使用这种交互技术

正如 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-Frame 实体控制 HTML 个对象

Control HTML Objects with A-Frame Entity

virtual-reality

360-virtual-reality

aframe