ThreeJS camera.lookAt() 没有效果，是不是我做错了什么？

Question

在 Three.js 中，我希望将相机指向 3D 空间中的某个点。

为此，我尝试使用camera.lookAt 函数，如下所示：

camera.lookAt(new THREE.Vector3(-100,-100,0));

但是，我发现调用没有任何效果。它什么都不做。我尝试更改向量中的数字，但当它应该更改时，我总是在屏幕上看到相同的外观。

我现在刚刚发现，如果我删除了代码中的THREE.TrackballControls，camera.lookAt() 就会正常工作。我使用 THREE.TrackballControls 的方式有问题吗？这就是我初始化它们的方式：

    controls = new THREE.TrackballControls( camera, renderer.domElement );

    controls.rotateSpeed = 10.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.2;

    controls.noZoom = false;
    controls.noPan = false;

    controls.staticMoving = true;
    controls.dynamicDampingFactor = 1.0;

    var radius = 5;
    controls.minDistance = radius * 1.1;
    controls.maxDistance = radius * 100;

    controls.keys = [ 65, 83, 68 ]; // [ rotateKey, zoomKey, panKey ]*/

然后在我的渲染函数中：

function render() {
  controls.update();
  renderer.render(scene, camera);
}

有关 Three.js 的文档非常稀缺，所以我想在这里问一下。我做错了吗？

Answer 1

我遇到了同样的问题，并且能够通过使用 OrbitControls.target 使其工作。以下是我在声明控制器后所做的。

    controller = new THREE.OrbitControls(camera, renderer.domElement);
    controller.addEventListener('change', renderer.domElement);
    controller.target = new THREE.Vector3(0, 1, 0);

Answer 2

在我看来，我们不应该弄乱原始代码。我找到了一种方法来实现查看任何特定点的目标。 声明“control”变量后，只需执行以下两行代码：

// Assuming you know how to set the camera and myCanvas variables
control = new THREE.OrbitControls(camera, myCanvas);

// Later in your code
control.object.position.set(camX, camY, camZ);
control.target = new THREE.Vector3(targetX, targetY, targetZ);

请记住，这会将焦点切换到您的新目标。换句话说，您的新目标将是相机所有旋转的中心。当您熟悉以默认中心操作相机时，某些部分将很难看。尽量放大，你就会明白我在说什么 希望对您有所帮助。

Answer 3

这是另一种解决方案：创建一个 0 维的对象（即立方体）。

var cameraTarget = new THREE.Mesh( new THREE.CubeGeometry(0,0,0));

在渲染函数中将 camera.lookAt 设置为 cameraTarget 的位置。

function render() {
    camera.lookAt( cameraTarget.position );
    renderer.render( scene, camera );
}

然后随意移动 cameraTarget。

Answer 4

我想通了。为了防止THREE.TrackballControls 或THREE.OrbitControls 在初始化时覆盖camera.lookAt，您需要将设置控件target 属性的行更改为等于camera.position 向量的sum 和camera.getWorldDirection() 向量，而不是当前使用 new THREE.Vector3() 实现的方式（默认为 (0, 0, 0)）。

所以，对于THREE.TrackballControls，将第 39 行更改为：

this.target = new THREE.Vector3().addVectors(/*new line for readability*/
    object.position, object.getWorldDirection());

第 36 行的 THREE.OrbitControls 也是如此。 我实际上还没有在TrackballControls.js 上测试过它，但它确实在OrbitControls.js 上工作。希望这会有所帮助。

Answer 5

是的，请注意...似乎拥有 THREE.TrackballControls 或 THREE.OrbitControls 似乎会覆盖 camera.lookAt 函数，因为您在实例化控件实例时正在传递您的相机。您可能希望摆脱控件，然后执行 camera.lookAt() 或以其他方式补间您的相机，以验证控件是否对您的相机具有压倒性的效果。我用谷歌搜索了一段时间，为什么 camera.lookat() 似乎没有效果。

Answer 6

查看THREE.TrackballControls的源代码，我发现我可以通过将trackballControls.target设置为我希望它看到的THREE.Vector3，然后重新渲染场景来让相机看到我想要的位置。