threejs顶层管理交互

最新推荐文章于 2024-11-13 01:18:00 发布

luxiaopengyou

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量300

点赞数

分类专栏： threejs 文章标签： javascript

本文链接：https://blog.csdn.net/luxiaopengyou/article/details/117480142

版权

本文介绍了如何在ThreeJS中进行顶层交互管理，以click事件为例，提出通过创建事件容器、统一监听、添加与移除事件、设置当前执行事件及修改事件激活状态等步骤，有效管理和协调多个按钮的触发行为，减少资源损耗。

摘要由CSDN通过智能技术生成

背景

threejs做业务，存在多个按钮时，为了管理各个按钮不同时触发，就不能在各个按钮做container.addEventListener，应该在顶层统一管理。

解决方案（以click事件为例，mousemove等其他事件同理）

1、顶层建立容器统一储存事件、统一监听事件

顶层类的内部：所有事件都在handleClickEvent里，实际container.addEventListener执行的事件，会去找当前且被激活的事件去执行。也节省损耗，不需要一有事件需要监听就新造一个addEventListener出来。

//事件容器
let handleClickEvent = [
  {
   
    stage: true,     //表示是否激活该事件
    fun: () => {
   },  //事件
    id: '',        //事件标识
  },
]

//当前触发的事件
let currentEvent

//事件容器中搜索目标事件
const findEvent = (id)