Question

可能是3js的旋转问题没有9000，我只想拥有3个UI按钮来逐渐将对象旋转90度x，y和y; z方向每次点击一下，它有多难？

使用使用euler的常规旋转方法将导致万向节锁定，并且使用四元数时，轴将随机翻转，其中z轴将在某一点或另一点处为y轴。

请查看我的工作演示：http://grutex.com/webgl/demos/help/

编辑：这是旋转功能部分：

        function z_rotate(){

        var startAngle = 0;
        var start = {angle: startAngle};
        var end = {angle: startAngle + 90};
        var lastAngle=0;                                
        var tween = new TWEEN.Tween(start)
          .to(end, 400)
          .easing( TWEEN.Easing.Quadratic.Out )
          .onUpdate(function(){
              startAngle=this.angle;    
              my_object.rotateOnAxis(new THREE.Vector3(0,0,1),degreeToRadians(startAngle-lastAngle));
              lastAngle=startAngle;                     
           })
          .start(); 


    }

    function x_rotate(){

        var startAngle = 0;
        var start = {angle: startAngle};
        var end = {angle: startAngle + 90};
        var lastAngle=0;                                
        var tween = new TWEEN.Tween(start)
          .to(end, 400)
          .easing( TWEEN.Easing.Quadratic.Out )
          .onUpdate(function(){
              startAngle=this.angle;
              my_object.rotateOnAxis(new THREE.Vector3(1,0,0),degreeToRadians(startAngle-lastAngle));
              lastAngle=startAngle;                     
           })
          .start();
    }

    function y_rotate(){
        var startAngle = 0;
        var start = {angle: startAngle};
        var end = {angle: startAngle + 90};
        var lastAngle=0;                                
        var tween = new TWEEN.Tween(start)
          .to(end, 400)
          .easing( TWEEN.Easing.Quadratic.Out )
          .onUpdate(function(){
              startAngle=this.angle;
              my_object.rotateOnAxis(new THREE.Vector3(0,1,0),degreeToRadians(startAngle-lastAngle));
              lastAngle=startAngle;                     
           })
          .start();

    }

Answer 1

正如@WestLangley所指出的那样，我应该将3d对象附加到父对象点（THREE.Object3D），并在补间开始之前将3d对象附加到枢轴点，并在补间完成和重置之后分离枢轴点它的旋转为（0,0,0）

@WestLangley回答：Three.js: Adding and Removing Children of Rotated Objects

新修改的旋转功能：

var axis_x = new THREE.Vector3( 1, 0, 0 ).normalize();

    function x_rotate(){
        pivot_attach();
        var startAngle = 0;
        var start = {angle: degreeToRadians(startAngle)};
        var end = {angle: degreeToRadians(startAngle + 90)};
        var lastAngle=0;                                
        var tween = new TWEEN.Tween(start)
          .to(end, 400)
          .easing( TWEEN.Easing.Quadratic.Out )
          .onUpdate(function(){
              startAngle=this.angle;
             pivot.rotateOnAxis(axis_x,startAngle-lastAngle);
              lastAngle=startAngle;                     
           })
          .start().onComplete(pivot_detach);
    }

function pivot_attach() {

    pivot.updateMatrixWorld();
    THREE.SceneUtils.attach( my_object, scene, pivot );

}

function pivot_detach() {

    pivot.updateMatrixWorld();
    my_object.updateMatrixWorld(); // if not done by the renderer

    THREE.SceneUtils.detach( my_object, pivot, scene );
    pivot.rotation.set( 0, 0, 0 );

}

并且不要忘记将枢轴添加到场景“scene.add（pivot）;”

如何围绕X，Y和＆amp ;;旋转Object3d Z轴没有轴翻转或导致万向节锁定？

1 个答案: