Three.js 点击选中多个模型

Question

开发 Web3D 应用有时候需要通过鼠标连续点击选中多个三维模型或者说几何体，对于这个问题也比较简单，如果你有这个疑问，首先说明你应该了解如何通过 Threejs 的射线对象选中一个模型，如果你不了解可以去学习一下。

在一个三维场景中，通过鼠标单击选中一个三维模型对象，可以通过JavaScript代码设置单选和多选两种模式。默认情况下设置为单选模式，比如鼠标单击选中一个模型颜色变化，鼠标继续单击其它模型，如果选中了一个模型，原来选中的模型就变为未选中状态。

对多选模式，可以通过UI菜单设置，也可以通过键盘 Ctrl 键配合鼠标单击进入多选模式。对于多选模式实现，可以在代码中创建一个数组对象，每当单击选中一个三维模型，就插入数组中，凡是数组中的三维模型全部显示一种变化的颜色。

//声明一个变量记录Ctrl是否按下的状态
var CtrlBool = false;//初始状态未按下
function CtrlDown(event) {
  // 判断Ctrl按键是否按下
  if(event.ctrlKey){
    CtrlBool=true
  }
}
function CtrlUp(event) {
  // 判断Ctrl按键是否是抬起了
  if(event.ctrlKey){
    CtrlBool=false
  }
}
addEventListener('keyup', CtrlUp); // 键盘抬起事件
addEventListener('keydown', CtrlDown); // 键盘按下事件
addEventListener('click', choose); // 监听窗口鼠标单击事件
//声明一个数组变量，用来存放选中的所有模型对象
var chooseArr = [];
function choose(event) {
...
// 判断Ctrl按键是否处于按下状态
if(CtrlBool){
  // 选中的模型对象插入chooseArr数组中
  chooseArr.push(intersects[0].object)
  intersects[0].object.material.transparent = true;
  intersects[0].object.material.opacity = 0.6;
}
...
}