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

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

完整的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

我找到了另一种围绕世界轴旋转的方法，使用了一个名为＆＃34; rotateEuler＆＃34;

的函数

 function rotateEuler(object, eul) {

    object.position.applyEuler(eul);
}

这是对函数的调用：

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

绕轴旋转三个.js

2 个答案: