three.js中的两个摄影机目标

我有一个很好的代码：

function onMouseMove( event ) {

        window.onmousedown = function() { 

            var canvasPosition =    renderer.domElement.getBoundingClientRect();

            var mouseX = event.clientX - canvasPosition.left;
            var mouseY = event.clientY - canvasPosition.top;

            var mouseVector = new THREE.Vector3 (
                            2 * (mouseX / window.innerWidth) - 1,
                    1 - 2 * (mouseY / window.innerHeight), 1);

            mouseVector.unproject( camera );
            var dir = mouseVector.sub( camera.position ).normalize();
            var distance = - camera.position.z / dir.z;
            var pos = camera.position.clone().add( dir.multiplyScalar( distance ) );


            camera.getWorldDirection();

            camera.lookAt( pos );
            // camera.updateMatrixWorld(true);

            console.log(mouseVector);
            console.log(mouseX);
            console.log(mouseY);

            // render();

        }
  }

但我想让这场运动顺利进行。因此，我从tween示例中找到了以下代码，但不确定如何使用它。在上面的代码中，我从一个位置、一种格式获取当前的camera lookat，并将新的camera lookat放在camera.lookat中，使用不同的格式—这两种格式似乎都不是标准的x、y、z

在下面的代码中，tween会让我更改单个项目的属性（x，y，z）。摄像机的取消投影和标准化无法适应：

new TWEEN.Tween( intersects[ 0 ].object.position )
  .to( { 
    x: Math.random() * 800 - 400, 
    y: Math.random() * 800 - 400, 
    z: Math.random() * 800 - 400 
  }, 2000 )
  .easing( TWEEN.Easing.Elastic.Out)
  .start();

如果有一个故障或一些我能读到的东西，或是真正解决问题去理解，我会很感激的。多年来，我反复阅读相机教程和矩阵教程，但我的大脑无法理解

我已经在这里挖掘了很多，但是没有任何东西可以解决相机之间的问题——至少对于一个有效版本的threejs来说是这样

---

谢谢大家!

我建议您熟悉线性插值，或更常见的“lerp”。可用于在起点和终点之间插值的THREE.Vector3类：

var camPos = new THREE.Vector3(0, 0, 0); // Holds current camera position
var targetPos = new THREE.Vector3(10, 10, -10); // Target position
var origin = new THREE.Vector3(0, 0, 0); // Optional origin

function animate(){
    // Interpolate camPos toward targetPos
    camPos.lerp(targetPos, 0.05);

    // Apply new camPos to your camera
    camera.position.copy(camPos);

    // (Optional) have camera look at the origin after it's been moved
    camera.lookAt(origin);

    // render();
}

在上面的示例中，您的

animate（）

函数每帧调用一次，相机每帧将向

targetPos

移动5%

如果更改

targetPos

，相机将向其新的目标值设置动画

---

我建议您在开始引入第三方库（如TWEEN.js或其他库）之前，首先熟悉lerping。

仅为了平滑移动，这可能已经对您有所帮助：

// keep this outside of the event-handler
var lookAtPosition = new THREE.Vector3();
var lookAtTween = new TWEEN.Tween(lookAtPosition);

// as lookAt is not a property we can assign to we need to 
// call it every time the tween was updated:
lookAtTween.onUpdate(function() {
  camera.lookAt(lookAtPosition);
});

window.onmousedown = function() { 
  // do your thing to compute pos
  // instead of `camera.lookAt(pos)`, do this:
  lookAtTween
    .stop() // just in case it's still animating
    .to(pos, 500) // set destination and duration
    .start(); // start the tween
};

---

从这个例子来看，你并不清楚你想要做什么。你能加一段这样的话吗？你如何计算注视位置似乎有些奇怪，但我不知道它是什么，因为我不知道它应该如何工作。我正在尝试平滑摄影机注视的过渡。关于threejs，我使用的是一个轨道控制示例，但不是鼠标移动改变相机正在查看的内容，而是单击一个区域，相机会查看该区域。我只是想让这个动作变得平滑。但是在回复之后，我甚至不确定camera.lookat到底是什么。这很快得到了回答：

object3d.lookat（）

是一个更新对象旋转的函数（更准确地说，它是

四元数

）使对象面向指定点，同时保持指定的向上方向。谢谢Marco！这一切我都很软弱。在您的示例中，有摄影机目标位置。我想我不需要为了我要做的事而移动摄像机？稍后我会讲，但是改变相机的外观是否需要改变位置？我会试试LERP，因为这听起来像是我想要的。再次感谢你！叹息。。。所以你做插值，这很好。然后你把相机移到新的camPos上，这似乎打破了之前的插值。不，

camPos

只是一个矢量，不是相机。因此，首先必须使用

camPos.lerp（）

更新向量3朝向其目标的位置，然后在下一行中，将相机更新到该新位置。如果你不在每一帧上更新相机的位置，你将看不到任何动画。有人能告诉我为什么我会有这些疯狂的动作吗。插值因子越小，它就越疯狂。对不起，我帮不了你。我只看到了一块黑色的画布，代码中有太多的事情要做，以至于我无法花时间去理解它。我建议你把问题分成一个简单的例子，然后问你的问题。