如何放大光线投射器选择？答案

【问题标题】：How can i zoom in to a raycaster selection?如何放大光线投射器选择？
【发布时间】：2020-11-06 09:14:54
【问题描述】：

我想知道如何使用 ThreeJs 放大鼠标选择，我正在使用 raycaster 来选择模型区域，但是当我单击区域时某些东西不起作用 - 正如您在 My Example 中看到的那样（感谢 Mugen87 ) ，我的目标是在我点击人脸时放大它们...我添加了以下功能：

function onClick(event) {
 
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject( mesh, false, intersects );
  if(mesh.type!= 'Mesh' ||  !intersects.length){
  return
  }

    var n = intersects[ 0 ].face.normal.clone();
    n.multiplyScalar(30);
    n.add(intersects[ 0 ].point);
    var p = intersects[ 0 ].point;
    camera.position.copy(n);
    camera.lookAt(p);
    
 
}

当我在模型外部单击时 - 它没有保持位置并且正在旋转...

【问题讨论】：

标签： three.js

【解决方案1】：

那是因为您正在使用OrbitControls，它几乎接管了您的相机并为每帧分配一次位置和旋转。当您尝试手动设置其位置时，OrbitControls 会覆盖您所做的任何操作。

解决方案是使您的 controls 变量成为全局变量。然后当你准备好接管相机位置时，在onClick()函数中设置controls.enabled = false;。然后当你准备好返回常规控件时，设置controls.enabled = true;

https://threejs.org/docs/#examples/en/controls/OrbitControls.enabled

【讨论】：