关于A-Frame下自定义事件的解决方法

文章目录

---

前言

最近一直在做3D的开发，所用到的技术框架是A-Frame，网上大多数帖子都是基于ThreeJS做的3D开发，A-Frame底层也是通过ThreeJS实现的，但是A-Frame更倾向于VR和AR的展示，因此里面也不像是ThreeJS那样灵活，好多属性和事件都做了限制，比如鼠标的双击事件因此我针对此次的问题提出一些自己的解决思路供大家参考，有不足之处或者好的想法欢迎留言共同探讨。

一、环境搭建

此处我就不多说了，官网上有相应的文档，而且其它文档也写的很清楚，官网地址。

二、问题描述

我们做的是一个电厂的3D锅炉模型，需求是要根据点击设备信息弹出对应的设备详细信息，用到的控制组件是orbit-controls，使用过的人都知道它的鼠标左键能转动模型，右键能拖动模型，滚轮能方法和缩小模型，但是当我们拖动模型的时候若是添加click事件，就和次事件冲突了，因此想到的办法是添加双击事件做区分，但是查看A-Frame源码后发现此路不通，因此想到一个方法来实现此事件。

三、解决方法

使用A-Frame的鼠标交互组件<a-cursor>，利用mouseenter和mouseleave事件来获得当前选择的模型，然后再通过window.ondblclick来根据当前选择到的模型来加载显示设备的详细信息。核心代码：

#模型加载完成后添加对应的鼠标移入和移出事件来获取最新的对象
let selectEvent = null;
this.el.addEventListener('model-loaded', () => {
       const meshModel = this.el.getObject3D('mesh');
       this.el.addEventListener('mouseenter', function (evt) {
                selectEvent = evt;
       });
       this.el.addEventListener('mouseleave', function (evt) {
                selectEvent = null;
       });
});
#注册全局鼠标双击事件
window.ondblclick = function (evt) {
        #自己要处理的逻辑
       let selectModel = selectEvent.detail.object;
}

---

总结

这样就能即不影响原本的事件，还能根据需求添加自定义事件，从而是模型的使用更灵活。