Three.js 中的补间相机目标 [英] Tween camera target in three.js

问题描述

我有这个运行良好的代码:

I have this code that works well:

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.

But I would like to smooth the movement. So I found the following code from the tween example, but not sure how to use it. In the above code, I get current camera lookat from one place, one format, and put the new camera look at in camera.lookat in a different format - neither of which seem to be standard x,y,z.

在下面的代码中，补间将让我更改单个项目的属性 (x,y,z).相机的unprojecting和normalizing不适应:

In the below code, the tween would have me change an properties (x,y,z) on a single item. which the unprojecting and normalizing of the camera do not accommodate:

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

如果有故障或我可以阅读的内容，或者实际解决了要理解的问题，我将不胜感激.多年来，我一遍又一遍地阅读相机教程和矩阵教程，但我的大脑无法理解.

If there is a breakdown or something I can read, or actually work out problems to understand, I'd be grateful. I've read camera tutorials and matrix tutorials over and over for years, but my brain just can't comprehend it.

我已经在这里挖掘了很多，但没有解决相机补间的问题 - 至少对于 Threejs 的有效版本

I've been digging around here quite a bit, but nothing addresses a camera tween - at least for a valid version of threejs

谢谢！

推荐答案

我建议您熟悉线性插值，或者通常称为lerp".THREE.Vector3 类有一个 lerp 函数，你可以用于在起点和终点之间进行插值:

I recommend you get acquainted with linear interpolation, or more commonly known as "lerp". The THREE.Vector3 class has a lerp function that you could use to interpolate between a starting point and an ending point:

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%.

In the above example, your animate() function is called once per frame, and the camera will travel 5% towards targetPos per frame.

如果您更改 targetPos，相机将朝着新的目标值移动.

If you change targetPos, the camera will animate towards its new target value.

我建议您在开始引入第三方库(如 TWEEN.js 或其他库)之前先熟悉 lerping.

I recommend you first get acquainted with lerping before you start bringing in third-party libraries like TWEEN.js or others.

这篇关于Three.js 中的补间相机目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！