触摸Ar.js中的ar对象

debugcn 发表于 Dev

卢卡斯·梅茨格（Lukas Metzger）

我有一个关于对ar对象进行触摸检测的问题。我将A-Frame与Ar.js结合使用

在我的项目中，我有一个可以旋转的地球仪。现在，我想添加特定于国家/地区的“标记”，它也应该是对象。

我试过了：

AFRAME.registerComponent（'markerhandler'，{

init: function() {
    const animatedMarker = document.querySelector("#hiro");
    const aEntity = document.querySelector("#globe");

    animatedMarker.addEventListener('click', function(ev, target){
        console.log("hi")

    });

但是我只是在显示器上的任何地方都意识到了点击事件...

我也尝试过使用a帧的raycaster，但是也没有检测到:(

有没有更好的主意/参考项目？

皮特·亚当·米勒夫斯基

使用早于1.0.0的A帧版本，您可以

<a-marker cursor="rayOrigin: mouse">
     <a-box click-listener-component></a-box>
</a-marker>
<a-entity camera></a-camera>

但自1.0.0起，它至少在docs中的示例中不起作用。

据我所知，使用a帧0.9.2和时，光线投射器的方向是不同的1.0.0。奇怪的是，当使用香草a框架（不带ar.js）时，它似乎工作得很好。看起来像个ar.js东西。

无论如何，如果您用THREE.Vector3 unproject的旧版本代替了光标方向计算：

// instead of this:
applyMatrix4( camera.projectionMatrixInverse ).applyMatrix4( camera.matrixWorld );

// use this
let matrix = new THREE.Matrix4()
applyMatrix4( matrix.getInverse( camera.projectionMatrix ) ).applyMatrix4( camera.matrixWorld );

光标组件再次工作。您可以在此故障中查看

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。