ThreeJS camera.lookAt() 没有效果，是否我做错了啥？

Posted 2023-02-27

【中文标题】ThreeJS camera.lookAt() 没有效果，是否我做错了啥？

【英文标题】：ThreeJS camera.lookAt() has no effect, is there something I'm doing wrong?ThreeJS camera.lookAt() 没有效果，是不是我做错了什么？

【发布时间】：2012-05-06 16:39:52

【问题描述】：

在 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 的文档非常稀缺，所以我想在这里问一下。我做错了吗？

【问题讨论】：

向我们展示更多代码。看看这个简单的示例：jsfiddle.net/TE5bM

你有一个更新循环来重新渲染场景吗？听起来你没有更新/渲染。

@Juan George：我在设置场景时调用 .lookAt()，在渲染任何内容之前，所以我的调用应该有效果。但是，我想我刚刚发现了问题；我的代码中有 THREE.TrackballControls，我认为这会干扰我告诉 .lookAt() 的内容，因为当我删除 THREE.TrackballControls 时，.lookAt() 函数会正常工作。我对 THREE.TrackballControls 做错了什么？

@GeorgeProfenza Juan ：我也在这里放了代码：github.com/houbysoft/js-pdb/blob/master/js-pdb.js 相应的 html 在 github.com/houbysoft/js-pdb/blob/master/index.html

您使用的是最新版本吗？更新日志上有一些东西。

【参考方案1】：

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

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

【参考方案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);

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

【讨论】：

这个答案对我有帮助。如果您的可视化中有OrbitControls、TrackballControls 等，则应使用controls.target 属性而不是camera.lookAt。

【参考方案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。

【参考方案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 上工作。希望这会有所帮助。

【讨论】：

如果你不想覆盖源代码，你可以在渲染循环中更新你的控件目标

【参考方案5】：

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

【参考方案6】：

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

【讨论】：

谢谢！终于，我一直在谷歌上寻找答案！

正确答案！设置 controls.target = new THREE.Vector3(1500, 500, 0);其中 1500, 500, 0 是我想要查看的目标

是的，正是我面临的问题，为此我发布了一个新问题here。在我的情况下，通过将target 属性初始化为传递给camera.lookAt() 的相同向量来手动更改THREE.OrbitControls 的源代码是不可行的，我宁愿想出一个反函数所以我可以写类似target = getLookAtVectorFor(camera) 的东西，而且每次我更改相机的lookAt 向量时都不必更改OrbitControls.js 的源代码。

这里一样，搜索了两天的结果！想改变相机的外观，但在得到这个答案之前没有得到任何结果。

在修订版 88 R88 中问题消失了。