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

查看THREE.TrackballControls的源代码，我发现通过将trackballControls.target设置为我想要查看的THREE.Vector3，我可以让相机看起来像我想要的那样，并且然后重新渲染现场。

Answer 2

是的请注意......似乎有THREE.TrackballControls或THREE.OrbitControls似乎覆盖了camera.lookAt函数，因为当你实例化控件实例时，你正在传递你的相机。您可能想要摆脱控件然后执行camera.lookAt（）或以某种其他方式补间您的相机以验证控件对您的相机具有重写效果。我google了一会儿为什么camera.lookat（）似乎没有效果。

Answer 3

在我看来，我们不应该混淆原始代码。我找到了解决任何特定问题的目标。声明“ 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 4

这是另一种解决方案：创建一个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 5

我明白了。要防止THREE.TrackballControls或THREE.OrbitControls在初始化时覆盖camera.lookAt，您需要更改将控件的target属性设置为等于总和的行camera.position向量和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 6

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

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

三个JS camera.lookAt（）没有效果，有什么我做错了吗？

6 个答案: