Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在three.js中将相机与对象连接起来?_Javascript_Three.js_Tween_Raycasting_Perspectivecamera - Fatal编程技术网

Javascript 如何在three.js中将相机与对象连接起来?

Javascript 如何在three.js中将相机与对象连接起来?,javascript,three.js,tween,raycasting,perspectivecamera,Javascript,Three.js,Tween,Raycasting,Perspectivecamera,我已经在场景中创建了一些对象,并设置了光线投射/tweening代码,这样每当我单击一个对象时,该对象都会直接按照摄影机的位置和旋转设置动画 这是我对对象进行光线投射/tweening的代码: function onDocumentMouseDown( event ) { event.preventDefault(); mouse.x = ( event.clientX / renderer.domElement.clientWidth ) *

我已经在场景中创建了一些对象,并设置了光线投射/tweening代码,这样每当我单击一个对象时,该对象都会直接按照摄影机的位置和旋转设置动画

这是我对对象进行光线投射/tweening的代码:

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;

            }
        }
但是,我想知道,我如何才能使二人组将摄影机设置为对象的动画,而不是将对象设置为摄影机的动画?我之所以要这样做,是因为我希望对象在场景中不断旋转和移动,并且希望摄影机能够保持并跟踪单个对象


顺便说一下,这都是透视相机。

假设您正在使用OrbitControls.js控制您的相机。
然后需要做的是通过
controls.target=new THREE.Vector3(0,0,-100)设置控件目标到对象的中心(或在对象之间)。您正在将对象旋转设置为(0,0,0),因此假设您希望从顶部查看对象,您将相机位置设置为(0,10,-100)-与您的目标相同,只是在您希望查看的方向上偏移。

假设你的物体旋转不是(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!');

});
}

您需要添加 控件=新的三个轨迹球控件(摄像头)