THREE.Euler()欧拉角

THREE.Euler

  • 用法 THREE.Euler( a , b , c , ‘xyz’ );
    表示将一个几何体绕x轴旋转a度,绕y轴旋转b度,绕z轴旋转c度;并且旋转的顺序是xyz ; 第三个参数旋转顺序可以是’XYZ’, ‘YZX’, ‘ZXY’, ‘XZY’, ‘YXZ’, ‘ZYX’
THREE.Euler = function ( x, y, z, order ) {

    this._x = x || 0;
    this._y = y || 0;
    this._z = z || 0;
    this._order = order || THREE.Euler.DefaultOrder;

};

原型上的方法

set( x , y , z , order )

set: function ( x, y, z, order ) {

    this._x = x;
    this._y = y;
    this._z = z;
    this._order = order || this._order;

    this.onChangeCallback();    //调用回调函数.

    return this;    //返回新的Euler(欧拉角)

},

setFromRotationMatrix

setFromRotationMatrix: function ( m, order ) {

    var clamp = THREE.Math.clamp;   //clamp用来设置数值的取值范围

    // assumes the upper 3x3 of m is a pure rotation matrix (i.e, unscaled)
    // 确保参数m是一个3x3的旋转矩阵.

    var te = m.elements;
    var m11 = te[ 0 ], m12 = te[ 4 ], m13 = te[ 8 ];
    var m21 = te[ 1 ], m22 = te[ 5 ], m23 = te[ 9 ];
    var m31 = te[ 2 ], m32 = te[ 6 ], m33 = te[ 10 ];

    order = order || this._order;

    if ( order === 'XYZ' ) {

        this._y = Math.asin( clamp( m13, - 1, 1 ) );

        if ( Math.abs( m13 ) < 0.99999 ) {

            this._x = Math.atan2( - m23, m33 );
            this._z = Math.atan2( - m12, m11 );

        } else {

            this._x = Math.atan2( m32, m22 );
            this._z = 0;

        }

    } else if ( order === 'YXZ' ) {

        this._x = Math.asin( - clamp( m23, - 1, 1 ) );

        if ( Math.abs( m23 ) < 0.99999 ) {

            this._y = Math.atan2( m13, m33 );
            this._z = Math.atan2( m21, m22 );

        } else {

            this._y = Math.atan2( - m31, m11 );
            this._z = 0;

        }

    } else if ( order === 'ZXY' ) {

        this._x = Math.asin( clamp( m32, - 1, 1 ) );

        if ( Math.abs( m32 ) < 0.99999 ) {

            this._y = Math.atan2( - m31, m33 );
            this._z = Math.atan2( - m12, m22 );

        } else {

            this._y = 0;
            this._z = Math.atan2( m21, m11 );

        }

    } else if ( order === 'ZYX' ) {

        this._y = Math.asin( - clamp( m31, - 1, 1 ) );

        if ( Math.abs( m31 ) < 0.99999 ) {

            this._x = Math.atan2( m32, m33 );
            this._z = Math.atan2( m21, m11 );

        } else {

            this._x = 0;
            this._z = Math.atan2( - m12, m22 );

        }

    } else if ( order === 'YZX' ) {

        this._z = Math.asin( clamp( m21, - 1, 1 ) );

        if ( Math.abs( m21 ) < 0.99999 ) {

            this._x = Math.atan2( - m23, m22 );
            this._y = Math.atan2( - m31, m11 );

        } else {

            this._x = 0;
            this._y = Math.atan2( m13, m33 );

        }

    } else if ( order === 'XZY' ) {

        this._z = Math.asin( - clamp( m12, - 1, 1 ) );

        if ( Math.abs( m12 ) < 0.99999 ) {

            this._x = Math.atan2( m32, m22 );
            this._y = Math.atan2( m13, m11 );

        } else {

            this._x = Math.atan2( - m23, m33 );
            this._y = 0;

        }

    } else {

        console.warn( 'THREE.Euler: .setFromRotationMatrix() given unsupported order: ' + order )   //通过按照以上几种旋转顺序设置欧拉角对象失败报错

    }

    this._order = order;    //重新设置旋转顺序

    this.onChangeCallback();    //调用回调函数.

    return this;    //返回新的Euler(欧拉角)

},
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
欧拉角Euler angles)指的是物体在三维空间中绕三个轴线旋转的角度,也称为绕轴旋转(yaw-pitch-roll)或Tait-Bryan角。在Three.js中,可以使用欧拉角来设置模型的旋转角度。 欧拉角有许多不同的表示方法,例如将旋转分解为绕X轴、Y轴和Z轴的旋转角度,或将旋转表示为旋转轴和旋转角度等。在Three.js中,我们可以使用Three.js自带的欧拉角Euler)类来表示欧拉角。 具体步骤如下: 1. 创建一个模型 这里以创建一个盒子(BoxGeometry)为例: ```javascript var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); ``` 2. 设置模型的欧拉角 使用模型的欧拉角(rotation)属性来设置模型的欧拉角: ```javascript var euler = new THREE.Euler(0, 0, Math.PI / 4); // 欧拉角 cube.rotation.setFromEuler(euler); // 设置欧拉角 ``` 这里将模型绕Z轴旋转了45度(Math.PI/4)。 完整代码示例: ```javascript var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; var euler = new THREE.Euler(0, 0, Math.PI / 4); // 欧拉角 var animate = function () { requestAnimationFrame(animate); cube.rotation.setFromEuler(euler); // 设置欧拉角 renderer.render(scene, camera); }; animate(); ``` 这里同样使用了requestAnimationFrame函数来实现动画效果,每帧设置模型的欧拉角

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值