首页 文章

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

提问于
浏览 次
2

我在场景中创建了一些对象，并设置了光线投射/补间代码，这样每当我点击一个对象时，该对象就会直接动画到相机的位置和旋转 .

这是我的光线投射/补间对象的代码：

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;

            }
        }

但是，我想知道，我怎么能让补间动画相机到对象，而不是相机的对象？我想这样做是因为我希望物体不断旋转并在场景中移动，并且希望相机能够保持并跟踪单个物体 .

顺便说一下，这都是透视相机 .

javascript three.js tween raycasting perspectivecamera

2 回答

  • 0

    我们假设您正在使用OrbitControls.js来控制您的相机 .
    您需要做的是将控件目标 controls.target = new THREE.Vector3(0, 0, -100); 设置为对象的中心（或补间） . 您将对象旋转设置为（0,0,0），所以假设您要从顶部查看对象，将摄像机位置设置为（0,10，-100） - 与目标相同，只是偏移在你想要看的方向形式 .
    假设你的对象旋转不是（0,0,0），你需要计算它的前向向量（或你想要从中查看它的任何其他向量），并将摄像机位置放在沿该向量轴的某个位置 .

    回复于
  • 0

    我正在尝试做类似的事情，这是我到目前为止，但努力获得对象面向方向向量

    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）;

    回复于

相关问题