绕轴旋转three.js答案

【问题标题】：Rotation around an axis three.js绕轴旋转three.js
【发布时间】：2014-11-11 17:55:35
【问题描述】：

我正在使用 three.js Revision 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);
    }

有人可以帮我找出我的代码有什么问题吗？为什么这两个功能即使出于不同的目的也能达到相同的结果？

完整的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();


}

【问题讨论】：

标签： three.js

【解决方案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;
}

试试看，如果适合你，请告诉我。

【讨论】：

【解决方案2】：

我找到了另一种绕世界轴旋转的方法，使用一个名为“rotateEuler”的函数

 function rotateEuler(object, eul) {

    object.position.applyEuler(eul);
}

这是对函数的调用：

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

【讨论】：