threejs模型点击选中

原创已于 2023-05-18 15:33:46 修改 · 10w+ 阅读

7 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#json

于 2022-07-29 16:46:59 首次发布

这篇博客介绍了如何使用Three.js库在WebGL环境中实现模型的点击选择功能。通过创建Raycaster对象并结合鼠标点击的屏幕坐标，计算出与模型的交点，从而选中模型。当选中模型时，会将其设置为半透明效果，增加交互性。示例代码展示了如何处理鼠标点击事件并应用到BoxMesh、SphereMesh和CylinderMesh上。

threejs模型点击选中

/**
 * 射线投射器`Raycaster`的射线拾取选中网格模型对象函数choose()
 * 选中的网格模型变为半透明效果
 * 
 *
 *   
 */


function choose(event) {

  var Sx = event.clientX; //鼠标单击位置横坐标
  var Sy = event.clientY; //鼠标单击位置纵坐标
  

  //屏幕坐标转WebGL标准设备坐标
  var x = (Sx / window.innerWidth) * 2 - 1; //WebGL标准设备横坐标
  var y = -(Sy / window.innerHeight) * 2 + 1; //WebGL标准设备纵坐标
  
  
  //创建一个射线投射器`Raycaster`
  var raycaster = new THREE.Raycaster();
  //通过鼠标单击位置标准设备坐标和相机参数计算射线投射器`Raycaster`的射线属性.ray
  raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
  //返回.intersectObjects()参数中射线选中的网格模型对象
  // 未选中对象返回空数组[],选中一个数组1个元素，选中两个数组两个元素
  var intersects = raycaster.intersectObjects([boxMesh, sphereMesh, cylinderMesh]);
  console.log("射线投射器返回的对象", intersects);
  // console.log("射线投射器返回的对象 点point", intersects[0].point);
  // console.log("射线投射器返回的对象 几何体",intersects[0].object.geometry.vertices)


  // intersects.length大于0说明，说明选中了模型
  if (intersects.length > 0) {
    // 选中模型的第一个设置为半透明
    intersects[0].object.material.transparent = true;
    intersects[0].object.material.opacity = 0.6;
  }
}


addEventListener('click', choose); // 监听窗口鼠标单击事件