围绕一个轴旋转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);