Control HTML Objects with A-Frame Entity

问题

Is it possible to control regular html objects outside of a-scene using A-Frame entities? For example, I would like to toggle a modal object when selecting a plane, sphere, etc. within an embedded scene. I know about the UI Modal that can be displayed within the scene, but the ability to operate between the scene and "exterior" elements would be very powerful. I'm sure this is possible, but I do not have the VR developer skills yet to figure this one out! Thanks in advance for your help!

回答1:

On desktop this is a really cool idea. I just saw Ueno use this type of interaction technique on https://interview.ueno.co/

As Diego and Steve pointed out it's not too difficult to interact with HTML from A-Frame.

I've created a small example to demonstrate: https://glitch.com/edit/#!/a-frame-to-html-modal

For the component (where the click event resides):

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

Then the mark up:

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

回答2:

Yes, a component can contain any arbitrary JS code. You can manipulate any DOM element of the page.

回答3:

In theory you could "address" and manipulate any element within the DOM. Using jQuery for instance:

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

That ought to work, but full disclosure: I haven't actually tried it yet...

来源：https://stackoverflow.com/questions/48447911/control-html-objects-with-a-frame-entity

标签

aframe

virtual-reality

360-virtual-reality