在AFrame-AR.js场景中的模型上单击 [英] OnClick on model in AFrame-AR.js scene

查看:120
本文介绍了在AFrame-AR.js场景中的模型上单击的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用Aframe和ARJS在增强现实场景中工作.当检测到标记时,我当前正在渲染obj模型.我的要求是能够在渲染时单击单个模型并对其进行操作.由于某种原因,onclick似乎不适用于框架模型实体,但在其他基本实体(如box)上也可以正常工作.这是我的方法-

I am working on an Augmented reality scene using Aframe and ARJS. I am currently rendering obj models when the marker is detected. My requirement is to be able to click on individual models upon rendering and manipulate them. For some reason onclick doesnt seem to be working on aframe model entities but it works fine on other primitive entities like box . This is my approach -

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>

有什么我可能会忽略的东西吗?还是有其他方法可以达到此要求.谢谢.

Is there anything I might be overlooking ? Or is there any other way to achieve this requirement.Thanks.

推荐答案

由于 click 事件基于3D中的光线跟踪,因此您需要使用 cursor 组件.

You need to use the cursor component, since the click event is based on raytracing in 3D.

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

这篇关于在AFrame-AR.js场景中的模型上单击的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆