Javascript 如何在three.js中将相机与对象连接起来?
我已经在场景中创建了一些对象,并设置了光线投射/tweening代码,这样每当我单击一个对象时,该对象都会直接按照摄影机的位置和旋转设置动画 这是我对对象进行光线投射/tweening的代码: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 ) *
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!');
});
}
您需要添加
控件=新的三个轨迹球控件(摄像头)