Three.js 如何使用四元数旋转相机 [英] Three.js How to use quaternion to rotate camera
本文介绍了Three.js 如何使用四元数旋转相机的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在 Three.js 中,我想使用 THREE.quaternion 使相机对象旋转到所选对象.
In Three.js, I would like to use THREE.quaternion to make the camera object rotate to the selected object.
我确实在网上搜索过,但没有找到关于如何使用这个四元数类的示例/演示或文档.
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.
推荐答案
Slerp 非常简单.它需要4个参数:
Slerp is quite easy. It takes 4 parameters:
targetRotation
实际的相机旋转destinationRotation
对象旋转destinationRotation
新的四元数,这将是新的相机旋转percentOfRotation
这个参数是游乐场,我现在在这里使用 0.07,可能是 0 (0%) 和 1 (100%) 之间的值
targetRotation
the actual camera rotationdestinationRotation
the object rotationdestinationRotation
new quaternion which will be the new camera rotationpercentOfRotation
this parameter is playground, I'm using 0.07 here right now, could be value between 0 (0%) and 1 (100%)
这是我的轮换方法:
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.
这篇关于Three.js 如何使用四元数旋转相机的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文