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

ThreeJS camera.lookAt() has no effect, is there something I'm doing wrong?

提问by houbysoft

In Three.js, I want a camera to be pointed at a point in 3D space.

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

For this purpose, I tried using the camera.lookAtfunction like so:

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

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

However, I found out that the call has no effect whatsoever. It just does nothing at all. I tried changing the numbers in the vector, and I always get the same look on screen, when it should be changing.

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

I just found now that if I remove the THREE.TrackballControlsI have in my code, the camera.lookAt()works as it should. Is there something wrong with how I use THREE.TrackballControls? This is how I initialize them:

我现在才发现，如果我删除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 ]*/

And then in my render function I do:

然后在我的渲染函数中我做：

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

Documentation on Three.js is pretty scarce, so I thought I'd ask here. Am I doing something wrong?

Three.js 的文档非常稀缺，所以我想我会在这里问。难道我做错了什么？

回答by houbysoft

Looking at the source code of THREE.TrackballControls, I figured out that I can make the camera look where I want by setting trackballControls.targetto the THREE.Vector3I want it to look at, and then rerendering the scene.

查看 的源代码THREE.TrackballControls，我发现我可以通过设置trackballControls.target为THREE.Vector3I want it to see，然后重新渲染场景来让相机看起来我想要的地方。

回答by Leon

Yes Please beware... It seems that having THREE.TrackballControls or THREE.OrbitControls seems to override the camera.lookAt function as your are passing in your camera when you instantiate an instance of the controls. You might want to get rid of the controls and then performing camera.lookAt() or tween your camera some other way to verify that the controls are having a overriding effect on your Camera. I googled for a while why camera.lookat() seemed to have no effect.

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

回答by Khoubeib Bouthour

In my opinion, we are not supposed to mess with the original code. I found a way around to achieve the objective of looking at any particular point. After having declared your "control" variable, simply execute these two lines of code:

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

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

Keep in my mind that this will switch the center of the focus to your new target. In other words, your new target will be the center of all rotations of the camera. Some parts will be difficult to look at as you became familiar to manipulate the camera assuming the default center. Try zoom in as much as you can and you will have a sense of what I am saying Hope this help.

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

回答by sebjwallace

Here's an alternative solution: create an object (i.e. cube) with 0 dimensions.

这是一个替代解决方案：创建一个具有 0 维的对象（即立方体）。

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

In the render function set the camera.lookAt to the position of the cameraTarget.

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

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

Then just move cameraTarget around as you wish.

然后只需根据需要移动 cameraTarget 即可。

回答by Andrea Aloi

I figured it out. To prevent THREE.TrackballControlsor THREE.OrbitControlsfrom overriding camera.lookAtupon initialization, you need to change the line that sets the control's targetproperty to equal the sumof the camera.positionvector and the camera.getWorldDirection()vector, instead of how it's currently implemented using a new THREE.Vector3()(which defaults to (0, 0, 0)).

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

So, for THREE.TrackballControls, change line 39 to:

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

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

Same goes for THREE.OrbitControls, on line 36. I actaully haven't tested it on TrackballControls.jsbut it does work on OrbitControls.js. Hope this helps.

同去的THREE.OrbitControls，就行36.我actaully没有测试它TrackballControls.js，但它确实工作OrbitControls.js。希望这可以帮助。

回答by Huy Tran

I ran into the same problem and was able to make it work by using OrbitControls.target. Below is what I did after declaring a controller.

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

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