three.js的raycaster射线无法获取visible为false的网格对象

最新推荐文章于 2024-06-05 08:52:14 发布

Mathilda91

最新推荐文章于 2024-06-05 08:52:14 发布

阅读量886

点赞数

本文详细介绍了在三维环境中实现网格对象拖放的关键技术。为了使拖放操作精确且流畅，文章提出了一种利用不可见参考平面的方法。通过射线投射与隐藏平面的交点计算，可以实时更新被拖动物体的位置，确保其准确放置于期望位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做网格对象拖放时，需要创建一个不可见的参考平面，如果将平面对象设置为visible，则射线对象无法获取该平面，就无法进行位置计算。

onDocumentMouseMove: function (e) {
  var event = e || window.event;
  var mouse = new THREE.Vector2();
  mouse.x = (event.clientX / map3d.width) * 2 - 1;//标准设备横坐标
  mouse.y = -(event.clientY / map3d.height) * 2 + 1;//标准设备纵坐标
  // 通过摄像机和鼠标位置更新射线
  map3d.raycaster.setFromCamera(mouse, map3d.camera);

  if (map3d.selection && e.which == 1) {
    //移动物体
    var intersects = map3d.raycaster.intersectObject(map3d.hidePlane);
    var position = intersects[0].point.sub(map3d.offset);
    map3d.selection.position.set(parseFloat(position.x.toFixed(2)),parseFloat(position.y.toFixed(2)),parseFloat(position.z.toFixed(2)));
  } else {
    //1：如果聚焦到了需要移动位置的物体上
    var intersects = map3d.raycaster.intersectObjects(map3d.objects);
    if (intersects.length > 0) {
      //让参考平面的中心点移动到物体的位置
      map3d.hidePlane.position.copy(intersects[0].object.position);
  }
},

　　这时候可以将网格对象的材质的visible属性设置为false

// 辅助移动物体
this.hidePlane = new THREE.Mesh(
  new THREE.PlaneBufferGeometry(500, 500, 8, 8), 
  new THREE.MeshBasicMaterial({ color: 0xffffff, visible: false})
);
this.hidePlane.needsUpdate=true;
this.scene.add(this.hidePlane);
this.raycaster = new THREE.Raycaster();
this.offset = new THREE.Vector3();