圍繞一個軸旋轉three.js

Question

我正在使用three.js修訂69，我有一個問題圍繞全局軸旋轉對象。 我已經在很多網站上找到定義如下功能rotateAroundWorldAxis：

function rotateAroundWorldAxis(object, axis, radians) { 

    var rotationMatrix = new THREE.Matrix4(); 
    rotationMatrix.makeRotationAxis(axis.normalize(), radians); 
    rotationMatrix.multiply(object.matrix);      // pre-multiply 
    object.matrix = rotationMatrix; 
    object.rotation.setFromRotationMatrix(object.matrix); 
} 

我叫rotateAroundWorldAxis在我的渲染功能類似：

function render() { 

     var yAxis = new THREE.Vector3(0,1,0); 
     rotateAroundWorldAxis(albero,yAxis,Math.PI/180); 
     requestAnimationFrame(render);  
     renderer.render(scene, camera); 
    } 

但結果總是一樣的，目的是圍繞自己的軸旋轉，我獲得通過在網絡上發現了另一個功能相同的結果：rotateAroundObjectAxis

var rotObjectMatrix; 
    function rotateAroundObjectAxis(object, axis, radians) { 
     rotObjectMatrix = new THREE.Matrix4(); 
     rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);     
     object.matrix.multiply(rotObjectMatrix); 
     object.rotation.setFromRotationMatrix(object.matrix); 
    } 

能SOM請幫助我找出我的代碼出了什麼問題？爲什麼這兩種功能即使是爲了不同的目的而獲得相同的結果？

完整的JavaScript是：

function drawStuff() { 


    var albero = new THREE.Object3D(); 
    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(55, window.innerWidth/window.innerHeight, 0.1, 1000); 

    var renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 


    var cone = createCone(0, 0, 0); //create cone of the tree 
    var cylinder = createCylinder(0, -1.1, 0); //create cylinder of the tree 
    albero = createAlbero(-4, 2, 3); 

    scene.add(albero); 

    var axisHelper = new THREE.AxisHelper(5); 
    scene.add(axisHelper); 

    camera.position.z = 20; 


    function createCone(x, y, z){  
     var coneGeometry = new THREE.CylinderGeometry(0.0, 0.7, 2, 32, 32); 
     var coneMaterial = new THREE.MeshBasicMaterial({color: 0xFF0000}); 
     var cone = new THREE.Mesh(coneGeometry, coneMaterial); 
     cone.position.set(x, y, z); 
     return cone; 
    } 

    function createCylinder(x, y, z){ 

     var cylGeometry = new THREE.CylinderGeometry(0.1, 0.1, 0.4, 32, 32); 
     var cylinderMaterial = new THREE.MeshBasicMaterial({color: 0xffff00}); 
     var cylinder = new THREE.Mesh(cylGeometry, cylinderMaterial); 
     cylinder.position.set(x, y, z); 
     return cylinder; 

    } 

    function createAlbero(x ,y, z){ 

     albero.add(cone); 
     albero.add(cylinder); 
     albero.position.set(x ,y, z); 
     return albero; 
    } 

    var rotObjectMatrix; 
    function rotateAroundObjectAxis(object, axis, radians) { 
     rotObjectMatrix = new THREE.Matrix4(); 
     rotObjectMatrix.makeRotationAxis(axis.normalize(), radians); 

     //moltiplico la matrice dell'oggetto per la matrice di rotazione 
     object.matrix.multiply(rotObjectMatrix); 

     object.rotation.setFromRotationMatrix(object.matrix); 
    } 


    function rotateAroundWorldAxis(object, axis, radians) { 

     var rotationMatrix = new THREE.Matrix4(); 

     rotationMatrix.makeRotationAxis(axis.normalize(), radians); 
     rotationMatrix.multiply(object.matrix);      // pre-multiply 
     object.matrix = rotationMatrix; 
     object.rotation.setFromRotationMatrix(object.matrix); 
    } 



    function render() { 

     var yAxis = new THREE.Vector3(30,50,1); 
     rotateAroundWorldAxis(cone2,yAxis,Math.PI/180); 
     requestAnimationFrame(render);  
     renderer.render(scene, camera); 
    }          
    render(); 


} 

Answer 1

如果我理解你的意圖是正確的，你有興趣在圍繞一個指定的軸，基本上將它們設置了一圈移動的物體。

這實際上更多的是對象的定位，而不是對象的方向（讀取：旋轉）。因此，它可能會更好寫，將手動設置對象的基礎上，你所感興趣的旋轉位置的功能。

function rotateAboutWorldAxis(object, axis, angle) { 
    var rotationMatrix = new THREE.Matrix4(); 
    rotationMatrix.makeRotationAxis(axis.normalize(), angle); 
    var currentPos = new THREE.Vector4(object.position.x, object.position.y, object.position.z, 1); 
    var newPos = currentPos.applyMatrix4(rotationMatrix); 
    object.position.x = newPos.x; 
    object.position.y = newPos.y; 
    object.position.z = newPos.z; 
} 

試一下，讓我知道這是否爲你的作品。

Answer 2

我找到了另一種方式來左右世界的軸線旋轉，使用一個名爲「rotateEuler」

function rotateEuler(object, eul) { 

    object.position.applyEuler(eul); 
} 

功能下面是調用該函數：

var alberoRot= new THREE.Euler(0,0.02,0, "XYZ"); 
    rotateEuler(albero,earthRot);