35

在 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 的文档非常稀缺，所以我想我会在这里问。难道我做错了什么？

4

6 回答 6

54

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

于 2012-04-26T16:33:05.323 回答
9

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

于 2014-02-20T23:54:02.933 回答
7

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

// 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);

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

于 2017-08-18T19:51:47.260 回答
2

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

因此，对于THREE.TrackballControls，将第 39 行更改为：

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

THREE.OrbitControls第 36 行也一样。我实际上还没有测试过它，TrackballControls.js但它确实可以工作OrbitControls.js。希望这可以帮助。

于 2014-10-27T21:43:04.163 回答
1

这是一个替代解决方案：创建一个具有 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。

于 2016-01-12T15:24:41.967 回答
0

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

    controller = new THREE.OrbitControls(camera, renderer.domElement);
    controller.addEventListener('change', renderer.domElement);
    controller.target = new THREE.Vector3(0, 1, 0);
于 2020-05-29T16:40:23.350 回答