three.js使用总结（三）

模型点击事件

简单的原理总结：

将屏幕想象成一个正方体，我们看到的屏幕为左侧面，正方体内的容器就相当于是所有模型环境。当我们点击屏幕的时候，three.js会由相机的位置和点击的位置产生一条射线穿过整个正方体，这个过程中可能会穿过很多容器中的模型。其中第一个触碰到的模型就是我们点击的模型。

代码：

1、由于屏幕上点击点的坐标系与相机所在坐标系不同，我们需将其转换

let mouse = new THREE.Vector2()
mouse.x = (event.clientX / window.innerWidth) * 2 - 1
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1

2、跟据两个点获得射线

let raycaster = new THREE.Raycaster()
raycaster.setFromCamera(mouse, _this.camera)

3、获得与射线相交的所有模型集合，modelcube 中放的是需要被监听的对象（需要要进行判断的模型）

let modelcube = []
let intersects = raycaster.intersectObjects(modelcube)

4、取得目标模型

if (intersects.length) {
	console.log(intersects[0].object)
}

onMouseClick (event) {
      let _this = this
      let raycaster = new THREE.Raycaster()
      let mouse = new THREE.Vector2()
      // 通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
      // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
      raycaster.setFromCamera(mouse, _this.camera)
      // 获取raycaster直线和所有模型相交的数组集合
      let modelcube = []
      for (let i = 1; i < _this.scene.children.length; i++) {
        _this.scene.children[i].children.forEach(aaa => {
          modelcube.push(aaa)
        })
      }
      let intersects = raycaster.intersectObjects(modelcube)
      // 将所有的相交的模型的颜色设置为红色，如果只需要将第一个触发事件，那就数组的第一个模型改变颜色即可
      if (intersects.length) {
      	console.log(intersects[0].object)
      }
 }