Question

我已经看到了关于堆栈溢出的几个问题，但没有解决我的问题。

对于我在Three.Js的第一个项目，我正在尝试创建一个树并让摄像机放大特定节点。我有以下代码：

        var selectedObject = fourthParent;
        camera.target = selectedObject;
        var tween = new TWEEN.Tween(camera.position).to({
            x: selectedObject.position.x,
            y: selectedObject.position.y,
            z: 5
        },1000).easing(TWEEN.Easing.Linear.None).onUpdate(function () {
            camera.lookAt(camera.target);
        }).onComplete(function () {
            camera.lookAt(selectedObject.position);
        }).start();

        var tween = new TWEEN.Tween(camera.target).to({
            x: selectedObject.position.x,
            y: selectedObject.position.y,
            z: 0
        }).easing(TWEEN.Easing.Linear.None).onUpdate(function () {
        }).onComplete(function () {
            camera.lookAt(selectedObject.position);
        }).start();

这会正确移动相机，但在动画结束时会改变相机角度。我没有改变代码中的角度，所以我不知道它为什么会改变。有人可以帮忙吗？

谢谢，

乔

以下是工作代码：

              updateControls = false;
              var selectedObject = fourthParent;
              camera.target = selectedObject;
              var tween = new TWEEN.Tween(camera.position).to({
                  x: selectedObject.position.x,
                  y: selectedObject.position.y,
                  z: 20
              },1000).easing(TWEEN.Easing.Linear.None).onComplete(function () {
                  controls.target0.set(selectedObject.position.x, selectedObject.position.y, selectedObject.position.z);
                  controls.position0.set(selectedObject.position.x, selectedObject.position.y, 20);
                  controls.reset();
                  updateControls = true;
              }).start();

              var tween = new TWEEN.Tween(camera.target).to({
                  x: selectedObject.position.x,
                  y: selectedObject.position.y,
                  z: 20
              }).easing(TWEEN.Easing.Linear.None).start();


    // Render loop
    var render = function () {
        requestAnimationFrame(render);
        TWEEN.update();
        renderer.render(scene, camera);
        if (updateControls) {
            controls.update();
        }
    };

Answer 1

通过调用camera.lookAt()，您正在更改摄像机角度。您应该删除该代码的每个实例。

补间摄像机与坐标相同但保留摄像机角度为three.js

1 个答案: