Control HTML Objects with A-Frame Entity

Question

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!

Welcome to Stack Overflow! When you created your account here, it was suggested you take the [tour](https://stackoverflow.com/tour) and read the [help center pages](https://stackoverflow.com/help) in order to familiarize yourself with the site. Specific pages that you should read include [How Do I Ask a Good Question?](https://stackoverflow.com/help/how-to-ask) and [How to Create a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve). Please take these introductory steps and then edit your post accordingly. — chb, Jan 25 '18 at 16:51
I am not going to take those introductory steps and edit my post accordingly. Helpful answers were provided. — JNgineer, Jan 26 '18 at 05:32

score 3 · Answer 1 · answered Jan 25 '18 at 16:47

3

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

answered Jan 25 '18 at 16:47

Diego Marcos

4,502
3
15
20

score 0 · Answer 2 · answered Jan 25 '18 at 16:52

0

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

answered Jan 25 '18 at 16:52

Steve Lewis

103
6

I just assumed it wouldn't be that easy to manipulate regular HTML elements (i.e., 2D) using entities objects (i.e., 3D) within the scene, but I should probably try the easy route first as well. Thanks! – JNgineer Jan 25 '18 at 19:22

score 0 · Accepted Answer · edited Aug 10 '22 at 09:27

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:

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

    box.addEventListener => {
      modal.classList.add
    })
  }
});
</script>

Then the markup:

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

Thanks Noam! Perfect answer and you went way above and beyond. I was mistaken previously and thought scripting was performed within the a-scene tag, but it goes within a regular script tag. It really is that easy to interact with regular HTML objects using a-frame entities. The method you provided registering components is much more robust than what I was attempting. I only recently discovered A-Frame and it is fantastic! Even a novice like myself can build some pretty cool interactive projects! — JNgineer, Jan 25 '18 at 21:45

Control HTML Objects with A-Frame Entity

3 Answers3

Linked