Javascript Three.js 如何使用四元数旋转相机
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11665562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Three.js How to use quaternion to rotate camera
提问by user1533481
In Three.js, I would like to use THREE.quaternion to make the camera object rotate to the selected object.
在 Three.js 中，我想使用 THREE.quaternion 使相机对象旋转到所选对象。
I did search the web but found no example/demo or document about how to use this quaternion class.
我确实在网上搜索过，但没有找到关于如何使用这个四元数类的示例/演示或文档。
I try my luck with following code:
我用以下代码试试运气：
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 10;
camera.position.z = 0;
camera.position.x = radious;
camera.useQuaternion = true;
// I did use the TrackballTrackballControls. Maybe it causes the problem so I put it here
controls = new THREE.TrackballControls( camera, document.getElementById(_canvasElement) );
// function to make the camera rotate to the object
function focusOn3DObject(obj){
obj.useQuaternion = true;
obj.quaternion = new THREE.Quaternion(obj.position.x, obj.position.y, obj.position.z, 1);
var newQuaternion = new THREE.Quaternion();
THREE.Quaternion.slerp(camera.quaternion, obj.quaternion, newQuaternion, 0.07);
camera.quaternion = newQuaternion;
}
But it doesn't work. Did I miss something? Please help. Thanks in advance.
但它不起作用。我错过了什么？请帮忙。提前致谢。
回答by Sebastian Sachtleben
Slerp is quite easy. It takes 4 parameters:
Slerp 很容易。它需要4个参数：
targetRotationthe actual camera rotationdestinationRotationthe object rotationdestinationRotationnew quaternion which will be the new camera rotationpercentOfRotationthis parameter is playground, I'm using 0.07 here right now, could be value between 0 (0%) and 1 (100%)
targetRotation实际的相机旋转destinationRotation物体旋转destinationRotation新的四元数将是新的相机旋转percentOfRotation这个参数是操场，我现在在这里使用 0.07，可能是 0 (0%) 和 1 (100%) 之间的值
This is my rotation method:
这是我的旋转方法：
var qm = new THREE.Quaternion();
THREE.Quaternion.slerp(camera.quaternion, destRotation, qm, 0.07);
camera.quaternion = qm;
camera.quaternion.normalize();
Hopefully this will help you. And don't bother I also worked some weeks on the perfect camera following.
希望这会帮助你。别打扰，我也在完美的相机跟踪上工作了几个星期。
回答by sampopes
You can use the method applyQuaternion from ThreeJs
您可以使用 ThreeJs 中的 applyQuaternion 方法
const quaternion = new THREE.Quaternion(obj.position.x, obj.position.y, obj.position.z, 1);
camera.applyQuaternion(quaternion); // Apply Quaternion
camera.quaternion.normalize(); // Normalize Quaternion
回答by Sebastian Sachtleben
I think this line wont work:
我认为这条线行不通：
obj.quaternion = new THREE.Quaternion(obj.position.x, obj.position.y, obj.position.z, 1);
You need to set
你需要设置
obj.useQuaternion = true
After adding object to scene, when you rotate it will be automatically applied to obj.quaternion.
将对象添加到场景后，当您旋转时，它将自动应用于obj.quaternion.
The second point is you should apply the object to your controls and not the camera. Because you want to control the object and not the camera?
第二点是您应该将对象应用于您的控件而不是相机。因为你想控制物体而不是相机？
回答by SAK
I have tried using it:
我试过使用它：
var newQuaternion = new THREE.Quaternion();
THREE.Quaternion.slerp(camera.quaternion, obj.quaternion, newQuaternion, 0.01);
camera.quaternion = newQuaternion;
camera.quaternion.normalize();
camera.matrixAutoUpdate();
However, I have failed to get the desired outcome. I know it is a fairly old post but I would be happy if someone could respond. I didn't see any other relevant posts other than this so really hoping for someone to respond.
然而，我没有得到想要的结果。我知道这是一个相当老的帖子，但如果有人能回复我会很高兴。我没有看到除此之外的任何其他相关帖子，所以真的希望有人回复。
Here is my problem in detail: Rotate camera to look at Selected object in three.js
这是我的详细问题：旋转相机以查看three.js中的选定对象
