javascript - 如何将相机补间到 three.js 中的对象？

Question

我在我的场景中创建了一些对象，并设置了光线转换/补间代码，这样每当我点击一个对象时，该对象就会直接根据相机的位置和旋转进行动画处理。

这是我对对象进行光线转换/补间的代码:

function onDocumentMouseDown( event ) {

            event.preventDefault();

            mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
            mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

            raycaster.setFromCamera( mouse, camera );

            var intersects = raycaster.intersectObjects( scene.children );

            if ( intersects.length > 0 ) {

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

                new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
                    x: 0,
                    y: 0,
                    z: 0 }, 2000 )
                .easing( TWEEN.Easing.Elastic.Out).start();
                object.lookAt.camera;

            }
        }

但是，我想知道，我怎样才能让补间动画针对对象而不是针对相机的对象进行动画处理？我想这样做是因为我希望物体在场景中不断旋转和移动，并且希望相机能够停留并跟踪单个物体。

顺便说一句，这都是透视相机。

Answer 1

假设您正在使用 OrbitControls.js 来控制您的相机。
然后，您需要做的是通过 controls.target = new THREE.Vector3(0, 0, -100); 将控件目标设置为对象的中心(或补间对象)。您将对象旋转设置为 (0, 0 ,0)，假设您想从顶部看对象，您将相机位置设置为 (0, 10, -100) - 与您的目标相同，只是偏移朝着你想要看的方向。
假设您的对象旋转不是 (0, 0 ,0)，您需要计算它的前向矢量(或您想要从中观察它的任何其他矢量)，并将相机位置放在沿该矢量轴的某处。