threejs顶层管理交互

背景

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

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

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

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

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

//当前触发的事件
let currentEvent

//事件容器中搜索目标事件
const findEvent = (id) => {
  const index = handleClickEvent.findIndex(({ _id }) => _id === id)
  return index
}

//统一事件监听
let container//是个DOM
container.addEventListener('click', (e) => {
  const index = findEvent(this.currentEvent)
  if (index > -1) {
    handleClickEvent[index].stage && handleClickEvent[index].fun(e)
  }
})
//当然顶部类销毁时需要取消事件监听，此处省略

2、对外暴露添加事件和移除事件的方法

顶层类的内部：对外暴露handleClickEvent的添加与移除的方法。
使用者：例如某些按钮，初始化时先添加事件，销毁时移除事件。

//添加事件
const addClickEvent = ({ stage, fun, id }) => {
  const index = findEvent(id)
  if (index > -1) {
    console.warn('该事件已存在！')
    return
  }
  handleClickEvent.push({ stage, fun, id })
}

//移除事件
const removeClickEvent = ({ id }) => {
  const index = findEvent(id)
  if (index > -1) {
    handleClickEvent.splice(index, 1)
  }
}

3、设置当前需要执行的事件

顶层类的内部：对外暴露设置当前需要执行的事件方法，保证当前只是触发相应方法
使用者：例如某些按钮，触发时就调用该方法，后面threejs交互时就会监听该方法

const setCurrentEvent = (id) => {
  this.currentEvent = id
}

4、修改事件激活状态

顶层类的内部：对外暴露修改事件激活状态的方法，有时只是为了不激活该方法，不用移除事件

const changeStage = ({ id, stage }) => {
  const index = findEvent(id)
  if (index > -1) {
    handleClickEvent[index].stage = stage
  }
}