使用A-Frame实体控制HTML对象 [英] Control HTML Objects with A-Frame Entity
问题描述
是否可以使用A-Frame实体在a-scene之外控制常规html对象？例如，在嵌入式场景中选择平面，球体等时，我想切换模态对象。我知道可以在场景中显示的UI Modal，但是在场景和外部元素之间进行操作的功能非常强大。我敢肯定这是可能的，但是我还没有VR开发人员的技能来解决这一问题！预先感谢您的帮助！
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!
推荐答案
在台式机上，这是一个很酷的主意。我刚刚看到Ueno在 https://interview.ueno.co/ 上使用这种交互技术
On desktop this is a really cool idea. I just saw Ueno use this type of interaction technique on https://interview.ueno.co/
正如Diego和Steve指出的那样，与A-Frame中的HTML交互并不困难。
As Diego and Steve pointed out it's not too difficult to interact with HTML from A-Frame.
创建了一个小示例来演示：
https：// glitch.com/edit/#!/a-frame-to-html-modal
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>
然后加价：
<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对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
