aframe gltf 点击事件答案

【问题标题】：aframe glft click eventaframe gltf 点击事件
【发布时间】：2018-04-03 03:45:49
【问题描述】：

我正在尝试捕捉场景中 glft 模型的点击事件。场景代码如下。

<a-scene raycaster-autorefresh> 
    <a-assets>
     <a-asset-item id="store_homeModel" src="app/home/store_models/store_model.gltf"></a-asset-item>
     <a-asset-item id="shampoo" src="app/home/product_models/Ayush Shampoo.gltf"></a-asset-item>
     <a-asset-item id="soap" src="app/home/product_models/Ayush Soap.gltf"></a-asset-item>
     <a-asset-item id="facewash" src="app/home/product_models/Citra Pearl face wash.gltf"></a-asset-item>
    </a-assets>


    <a-gltf-model src="#store_homeModel"></a-gltf-model>
    <a-gltf-model src="#shampoo" open-desc"></a-gltf-model>

</a-scene>

以及我拥有的组件代码。但是点击事件没有被捕获，我无法看到控制台日志......

AFRAME.registerComponent('raycaster-autorefresh', {
  init: function () {
    // This will be called after the entity has properly attached and loaded.
    console.log('I am readyyyyy!');
  }
});

AFRAME.registerComponent('open-desc', {  
    init: function() {
        var data = this.data;
        var el = this.el;      
        el.addEventListener('click', function() {
            console.log("hiiiiiiiiiiii");           
        });
    },

});

【问题讨论】：

您使用的是什么版本的 A-Frame？ 0.8.0 可能有一些您需要的错误修复。 I am readyyyy 会打印出来吗？
是的，我已经准备好被打印出来了......并且仅使用 0.8.0
您必须使用cursor 来创建点击事件。见cursor docs
明白了，谢谢@DonMcCurdy。请您将其发布为答案，以便我接受

标签： angularjs aframe

【解决方案1】：

请记住a-frame 将整个视图呈现在<canvas> 上，因此您不能只使用鼠标单击<a-scene> 内的任何元素。

如果您想要一个简单的基于注视的光标，您需要将光标附加到相机：

<a-camera>
  <a-cursor></a-cursor>
</a-camera>

如果要使用鼠标，请使用<a-scene> 中的光标组件：

<a-scene cursor="rayOrigin:mouse">

如果你想使用 vive / oculus 控制器，你应该试试laser-controls。

有关光标的属性和事件的更多详细信息，请参阅docs。

【讨论】：