three.js可以同时旋转和移动一个对象

时间:2013-09-27 23:05:48

标签: javascript three.js

您好,感谢您的时间。我正在尝试移动一个物体并同时旋转它。在执行两个动作时,对象移动不稳定。我已经读过旋转以某种方式改变轴。真的吗?这是代码。我曾尝试使用世界轴和物体轴进行旋转但具有相同的问题。

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


var rotWorldMatrix;
     // Rotate an object around an arbitrary axis in world space       
    function rotateAroundWorldAxis(object, axis, radians) {
       rotWorldMatrix = new THREE.Matrix4();
       rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
       rotWorldMatrix.multiply(object.matrix);               

       object.matrix = rotWorldMatrix;

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

          function spriteAI2() {
            //var ranTen = Math.floor((Math.random()*7)+2);
            var xAxis = new THREE.Vector3(1,0,0);
            var yAxis = new THREE.Vector3(0,1,0);
            var zAxis = new THREE.Vector3(0,0,1);
            rotateAroundObjectAxis(meshSprite, zAxis, Math.PI / 180);
            if (meshSprite.position.x > 30 && meshSprite.position.x <= 450) { 
            meshSprite.translateX( -6 );
            } else if (meshSprite.position.y > 30 && meshSprite.position.y <= 250) {
            meshSprite.translateY( -6);
            } else if (meshSprite.position.z > 30 && meshSprite.position.z <= 350) {
            meshSprite.translateZ( -6 );
            } else if (meshSprite.position.x < -30 && meshSprite.position.x >= -450) {
            meshSprite.translateX( 6 );
            } else if (meshSprite.position.y < -30 && meshSprite.position.y >= -250) {
            meshSprite.translateY( 6 );
            } else if (meshSprite.position.z < -30 && meshSprite.position.z >= -350) {
            meshSprite.translateZ( 6 );
            } else if (meshSprite.position.x < 31 && meshSprite.position.y < 31 && meshSprite.position.z < 31 && meshSprite.position.x > -31 && meshSprite.position.y > -31 && meshSprite.position.z > -31) { 
            var locX = Math.floor((Math.random()*450)+1);
            locX *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
            var locY = Math.floor((Math.random()*250)+1);
            locY *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
            var locZ = Math.floor((Math.random()*350)+1);
            locZ *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
            scene.remove(meshSprite);
            //texture.dispose();
            c2ImgMaterial.dispose();
            meshSprite.position.set( locX, locY, locZ );
            scene.add( meshSprite );
            //c2Sprite.clone;
            }
        }   

1 个答案:

答案 0 :(得分:0)

我找到了问题的根源。似乎在three.js对象可以在本地或全局移动。就我而言,我使用的是本地版本。

            meshSprite.translateX(-6); // Local

            var delta = clock.getDelta(); // Global
            var moveDistance = 125 * delta; // 200 pixels per second
            meshSprite.position.x += moveDistance;

切换到全球运动形式后,旋转时不会发生冲突。 可以在以下URL中找到更广泛的解释。 http://stemkoski.github.io/Three.js/Mesh-Movement.html