在three.js三维空间中,我有一些位置已知的MESH对象和一个相机对象。
我想实现的是:当我点击一个按钮时,相机会自动旋转和缩放(改变其位置),这样用户的视图就会聚焦在选定的对象上。选定对象的位置是已知的。
请给我一些如何做的建议?
尝试camera.lookAt( object.position );
你不需要使用四元数。
如果需要,您可以将相机移近。
四元数slerp是您平滑旋转到目标位置的朋友。您需要使用四元数(camera.useQuaternion=true)。
var newQuaternion = new THREE.Quaternion();
THREE.Quaternion.slerp(camera.quaternion, destinationQuaternion, newQuaternion, 0.07);
camera.quaternion = newQuaternion;
这应该平滑地旋转到目标旋转。也许你需要考虑最后一个参数。我不确定缩放。
以下是使用slerp和四元数旋转对象的片段:
//Initial and final quaternions
var startQ = new THREE.Quaternion(0,0,0,1);
var endQ = new THREE.Quaternion(0,1,0,0);
//Number of animation frames
var animFrames = 100;
//Pause between two consecutive animation frames
var deltaT = 1;
function goSlerping(acc) {
if(acc>=1) return;
//Let's assume that you want to rotate a 3D object named 'mesh'. So:
THREE.Quaternion.slerp(startQ, endQ, mesh.quaternion, acc);
setTimeout(function() {
goSlerping(acc + (1/animFrames));
}, deltaT);
}
goSlerping(1/animFrames);
因此,使用上面的脚本来旋转相机是完全相同的:您只需要将mesh.quaternion
更改为camera.quaternion
。
您可能想访问这里。。。https://threejsfundamentals.org/threejs/lessons/threejs-cameras.html我做了以下工作,并为我工作,以获得对用户定义坐标的关注。。。
camera.lookAt(0, 10, 0);
-----
-----
-----
controls.target.set(0, 10, 0);
controls.update();