Question

我的代码效果很好：

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

        }
  }

但我想顺利运动。所以我从补间示例中找到了以下代码，但不确定如何使用它。在上面的代码中，我从一个地方，一种格式获取当前相机的外观，并将新相机放在camera.lookat中以不同的格式显示 - 它们似乎都不是标准的x，y，z。

在下面的代码中，补间会让我更改单个项目的属性（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

谢谢！

Answer 1

我建议你熟悉线性插值，或者通常称为＆＃34; lerp＆＃34;。可用于在起点和终点之间插值的THREE.Vector3类has a lerp function：

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。

Answer 2

只是为了平滑运动，这可能已经帮助你了：

override fun onCreatePreferences(bundle: Bundle?, s: String?) {}

Tween相机目标在three.js

2 个答案: