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），你需要计算它的前向矢量（或你想要从中看它的任何其他矢量），并将相机位置放在该矢量轴的某处。 / p>

Answer 2

我正在尝试做类似的事情，这是我迄今为止所做的但是努力使对象面向方向矢量

function toObj(obj) {

var lookAtVector = new THREE.Vector3(0, 0, 1);
lookAtVector.applyQuaternion(obj.quaternion);
console.log(lookAtVector);
var rotateTween = new TWEEN.Tween(controls.target)
    .to({
        x: obj.position.x,
        y: obj.position.y,
        z: obj.position.z
    }, 4000)
    .interpolation(TWEEN.Interpolation.CatmullRom)
    .easing(TWEEN.Easing.Quintic.InOut)
    .start();

var goTween = new TWEEN.Tween(camera.position)
    .to({
        x: obj.position.x,
        y: obj.position.y,
        z: obj.position.z + 10
    }, 4000)
    .interpolation(TWEEN.Interpolation.CatmullRom)
    .easing(TWEEN.Easing.Quintic.InOut);

goTween.start();
goTween.onComplete(function() {
    console.log('done!');

});

}

你需要添加 controls = new THREE.TrackballControls（camera）;

如何将相机补充到three.js中的对象？

2 个答案: