在 AFrame-AR.js 场景中点击模型

Question

我正在使用 Aframe 和 ARJS 处理增强现实场景。当检测到标记时，我目前正在渲染 obj 模型。我的要求是能够在渲染时单击各个模型并对其进行操作。出于某种原因， onclick 似乎不适用于 aframe 模型实体，但它适用于其他原始实体，如 box 。这是我的方法 -

AFRAME.registerComponent('cursor-listener', {
init: function () {
this.el.addEventListener('click', function (evt) {

  console.log('I was clicked at: ', evt.detail.intersection.point);
 });
}
});
</script>
</head>  
<body>
<a-scene embedded arjs='trackingMethod: best; debugUIEnabled: false;' foo>
    <a-assets>
        <a-asset-item id="crate-obj" src="model.obj"></a-asset-item>
        <a-asset-item id="crate-mtl" src="model.mtl"></a-asset-item>
        <img id="texture" src="brick.jpg">
    </a-assets>


  <a-marker preset='hiro'>
    <a-entity ><a-obj-model class="collidable" cursor-listener id="animated-marker" src="#crate-obj" position="0 -1.6 0" mtl="#crate-mtl" rotation="-90 0 0" scale="0.004 0.004 0.004" material="" obj-model=""></a-obj-model></a-entity> 
   //onclick doesn't work
    <a-entity  material=" src: url(box.png) " class="collidable" cursor- 
  listener position="0 -1 0"></a-entity>  //onclick works here

  </a-marker>
  <a-camera-static/>
  </a-scene>
  </body>
  </html>

有什么我可能忽略的吗？或者有没有其他方法可以实现这个 requirement.Thanks。

Answer 1

您需要使用 cursor 组件，因为 click 事件基于 3D 光线追踪。

<a-marker preset='hiro' cursor='rayOrigin: mouse'></a-marker>

在 AFrame-AR.js 场景中点击模型

OnClick on model in AFrame-AR.js scene

onclick

augmented-reality

aframe

ar.js