threejs - 光线投射

Three.js光线投射是一种用于检测3D场景中光线与物体相交的技术。

创建射线

// 创建射线
const raycaster = new THREE.Raycaster()

鼠标向量

// 创建鼠标向量, 保存鼠标点击的位置
const mouse = new THREE.Vector2()
// 创建点击事件
window.addEventListener("click", (event)=>{
  // 设置鼠标向量的x,y值
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
  // 通过摄像机和鼠标位置更新射线
  raycaster.setFromCamera(mouse, camera)
  // 计算物体和射线的焦点
  
})

示例

// 创建射线
const raycaster = new THREE.Raycaster();
// 创建鼠标向量, 保存鼠标点击的位置
const mouse = new THREE.Vector2();
// 创建点击事件
window.addEventListener("click", (event) => {
  // 设置鼠标向量的x,y值
  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]);
  console.log(intersects);
  // 如果点击物体，就改变物体的颜色
  if (intersects.length > 0) {
    if (intersects[0].object._isSelect) {
      intersects[0].object.material.color.set(intersects[0].object._originColor);
      intersects[0].object._isSelect = false;
    } else {
      // 添加自定义属性，用来记录是否被点击过
      intersects[0].object._isSelect = true;
      intersects[0].object._originColor = intersects[0].object.material.color.getHex();
      intersects[0].object.material.color.set(0xff0000);
    }
  }
});