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