Three.js自动旋转摄像头以专注于对象

在three.js 3D空间中，我有一些MESH对象，它们的位置已知并且有一个摄像头对象。Three.js自动旋转摄像头以专注于对象

我想实现的是：当我点击一个按钮时，相机将自动旋转并缩放（改变其位置），以便用户的视图将聚焦在所选对象上。所选对象的位置是已知的。

请给我一些关于如何做到这一点的建议？

2012-07-24 user1533481

Quaternion slerp是您顺利旋转到目标位置的朋友。你需要使用quaternion（camera.useQuaternion = true）。

var newQuaternion = new THREE.Quaternion(); 
THREE.Quaternion.slerp(camera.quaternion, destinationQuaternion, newQuaternion, 0.07); 
camera.quaternion = newQuaternion;

这应该顺利旋转到目的地旋转。也许你需要玩最后一个参数。我不确定变焦。

来源

2012-07-24 14:41:56

非常感谢您的回复。关于paraneters，它是目标Quaternion是targetObject.quaternion？ “newQuaternion”参数是否需要更多规范？我尝试以下，但它不起作用。 'var newQuaternion = new THREE.Quaternion（）; \t \t \t \t THREE.Quaternion.slerp（camera.quaternion，targetObj.quaternion，newQuaternion，0.07）; \t \t \t \t camera.quaternion = newQuaternion;'你有这样的例子吗？ – user1533481 2012-07-25 12:17:47

尝试camera.lookAt(object.position);

你并不需要使用四元数。

如果需要，您可以将相机移近。

来源

2012-07-26 12:59:12 WestLangley

感谢您的回答。但似乎不会使相机顺利过渡到对象。我认为它应该是关于改变相机位置的事情，因为当用鼠标旋转相机时，它将基于鼠标参数将相机位置更新为新的相机位置 – user1533481 2012-07-27 03:10:45

您在原始问题中没有提到有关“平滑过渡”的任何内容。 – WestLangley 2012-07-27 13:01:38

下面是使用球面线性插值和四元数旋转对象的一个片段：

//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。

来源

2016-03-01 15:12:39

Three.js自动旋转摄像头以专注于对象

回答

相关问题