我无法弄清楚为什么游标侦听器适用于除我的 gltf 模型之外的所有实体。
这是我的html
<div id="myEmbeddedScene">
<a-scene embedded="">
<a-assets>
<a-asset-item id="ducks" src="../images/test.glb"></a-asset-item>
</a-assets>
<a-box cursor-listener color="#CCC" width="3" depth="3" height="0.1" position="0 0 -2"></a-box>
<a-entity cursor-listener id="duck" gltf-model="#ducks" position="0 0.1 -2" rotation="0 -90 0"></a-entity>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-scene>
</div>
这是来自 a-frame 的光标监听器组件
AFRAME.registerComponent('cursor-listener', {
init: function () {
this.el.addEventListener('click', function (evt) {
console.log('I was clicked');
});
}
});
控制台日志对于盒子实体来说效果很好,但对于 gltf 模型则不然。请问有人可以提供建议吗?
你已经遇到了此处描述的问题:模型加载后,用于检测点击的光线投射器需要刷新,以便它了解模型。
我们有一个更强大的解决方案即将推出对于 A-Frame 0.8.0,但与此同时,您可以通过以下方式解决该问题:
AFRAME.registerComponent('raycaster-autorefresh', {
init: function () {
var el = this.el;
this.el.addEventListener('model-loaded', function () {
var cursorEl = el.querySelector('[raycaster]');
cursorEl.components.raycaster.refreshObjects();
});
}
});
然后您需要添加raycaster-autorefresh
到你的场景元素。这里有一个Codepen 显示解决方案.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)