threeJS-光线投射

前提：要创建几个物体和材质并添加到场景中

// 创建射线
const raycaster = new THREE.Raycaster()
// 创建鼠标向量
const mouse = new THREE.Vector2()
// 监听窗口的点击事件
window.addEventListener("click", (event) => {
  // 设置鼠标向量的xy值，转化为-1 ~ 1 ,区间为2,
  // y轴：由于鼠标坐标是从上到下，设备坐标是从下到上，刚好相反所以要加一个负hao
  mouse.x = (event.clientX / window.innerWidth) *2 -1
  mouse.y = -((event.clientY / window.innerHeight) *2 -1)
  // 通过摄像机和鼠标位置更新射线
  raycaster.setFromCamera(mouse, camera)
  // 计算物体与射线的焦点
  const intersects = raycaster.intersectObjects([sphere1, sphere2, sphere3])
  if(intersects.length > 0) {
    if(intersects[0].object._isSelect) {
      intersects[0].object.material.color.set(intersects[0].object._originColor)
      intersects[0].object._isSelect = false
      return
    }
    // 自定义变量做判断，标识选中
    intersects[0].object._isSelect = true
    // 记录原色,getHex()获取16进制的颜色
    intersects[0].object._originColor = intersects[0].object.material.color.getHex()
    // 只改点击时射线穿过的第一个元素的颜色
    intersects[0].object.material.color.set(0xff00ff)
  }
})