three 响应鼠标点击事件

three 响应鼠标点击事件

提示: 我现在这边是用的vue2.0的项目来使用的three

1.事前了解

要先知道3种坐标
屏幕坐标: 我们在web端打开的时候是屏幕坐标
场景坐标: three的场景内的物体所在场景内的坐标
视点坐标: 以相机为原点。只有进入到相机内的物体才进行计算.才具有的坐标

图片偷自 https://segmentfault.com/a/1190000010490845

2.方法选取

官方已经提示了做法了，射线探测法

• 先把屏幕上点击的坐标转换为场景内的坐标。
• 然后采用射线
• 从相机原点到点击的点展开一条射线
• 得到放回的全部物体属性。
• 这些物体就是你点击所能取到的全部物体了
• 返回的是一组物体对象 剩下的就可以自己判定了

3.编写代码

我们先编写一个函数做以下操作

• 转换屏幕坐标
• 建立射线
• 取回与射线交叉的物体

//获得交叉对象
    getIntersects(x, y) {
   
      //建立射线
      let raycaster = new THREE.Raycaster();
      //建立一个空物体
      let mouseVector = new THREE.Vector3();