Three.js如何使用四元數來旋轉相機

在Three.js中，我想使用THREE.quaternion使相機對象旋轉到所選對象。Three.js如何使用四元數來旋轉相機

我沒有搜索網頁，但沒有找到關於如何使用這個四元數類的示例/演示或文檔。

我試試我的運氣與下面的代碼：

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; 
    }

但它不工作。我錯過了什麼？請幫忙。提前致謝。

來源

2012-07-26 user1533481

請注意，在較新的THREE.js版本中，'useQuaternion'已被刪除。該庫現在默認使用四元數。 – 2014-01-14 00:54:20

另請注意，今天（Aug/2015）THREE的Camera對象具有一個方法.lookAt（vector3） - 它接收一個Vector3並查看一個對象的位置。您可以傳遞任何object3d.position作爲參數，供攝像機查看。檢查出來：http://threejs.org/docs/index.html#Reference/Cameras/Camera – Tiago 2015-08-29 22:40:42

我覺得這條線不會工作：

obj.quaternion = new THREE.Quaternion(obj.position.x, obj.position.y, obj.position.z, 1);

您需要設置

obj.useQuaternion = true

添加對象的場景，當你轉動它會自動應用到obj.quaternion後。

第二點是您應該將對象應用到您的控件而不是相機。因爲你想控制對象而不是相機？

來源

2012-07-26 15:41:47

我想使相機旋轉並聚焦在物體上。相機會圍繞物體移動。所以我認爲相機將被控制。我錯了嗎？ – user1533481 2012-07-27 02:53:11

它看起來像我在黑暗中找到，因爲沒有文件或關於這個的一個例子:(你能解釋我的函數斯勒普？這是什麼參數？我嘗試了你的建議，但不成功 – user1533481 2012-07-27 02:53:21

注意在更新的THREE.js構建中，'useQuaternion'已被刪除。庫現在默認使用四元數。 – 2014-01-14 00:52:45

斯勒普很容易。它需要4個參數：

targetRotation實際的攝像機旋轉
destinationRotation物體旋轉
destinationRotation新四元，這將是新相機的旋轉
percentOfRotation這個參數是操場上，我使用的是0.07現在可以是0（0％）和1（100％）之間的值

這是我的輪換方法：

var qm = new THREE.Quaternion(); 
THREE.Quaternion.slerp(camera.quaternion, destRotation, qm, 0.07); 
camera.quaternion = qm; 
camera.quaternion.normalize();

希望這會幫助你。而且不用擔心，我也在完美的相機之後工作了幾周。

來源

2012-08-06 13:53:27

嗨，在文檔中，.slerp只有2個參數... https://threejs.org/docs/#Reference /Math/Quaternion...Did我誤解了一些東西？ – 2017-03-02 23:11:11

@SébastienGarcia-Roméo在Quaternion中有兩個slerp方法 - 在這個答案中使用的方法是靜態方法，它們都在[quaternion文檔頁面]（https： //threejs.org/docs/#api/math/Quaternion.slerp），但靜態方法在底部。 – 2017-11-03 18:32:58

Three.js如何使用四元數來旋轉相機

回答

相關問題