Question

我正在尝试在deviceControls.update();命令后向摄像机添加偏移量。我使用了DeviceOrientationControls

中显示的

const m1 = new THREE.Matrix4();
m1.lookAt(new THREE.Vector3(), camera.target, THREE.Object3D.DefaultUp.clone());

const quater = new THREE.Quaternion();
quater.setFromRotationMatrix(m1);

const finalQuater = new THREE.Quaternion();
finalQuater.multiplyQuaternions(quater, camera.quaternion);

camera.quaternion.copy(finalQuater);

偏移将是拖动手势的结果，如first example.

中所示

当我乘以2个四元数时（我尝试过x b和b x a），最终结果不正确。

这是我的操作：

camera.target

camera.quaternion是我的最终拖拽目标（Vector3），deviceControls.update()已由require设置，并且等于相机方向，根据设备陀螺仪。

感谢您的帮助

更新：我试图改变旋转顺序，同样的问题。我认为这是由于设备方向更新后的原点更改，但找不到如何解决。

Answer 1

onselect: function() { selectedItem = find(this.settings.values, {value: this.value()}) this.icon(selectedItem.icon) tinyMCE.execCommand(this.value()); }现在有一个属性DeviceOrientationControls和一个方法

alphaOffsetAngle

将围绕三个人旋转场景。＆＃39; Y＆＃39;轴。

three.js r.77

Answer 2

    var rotY = 0;
    var rotX = 0;    
    function setObjectQuaternion(quaternion, alpha, beta, gamma, orient) {
        var zee = new THREE.Vector3( 0, 0, 1 );
        var euler = new THREE.Euler();
        var q0 = new THREE.Quaternion();
        var q1 = new THREE.Quaternion( -Math.sqrt( 0.5 ), 0, 0, Math.sqrt( 0.5 ) ); // - PI/2 around the x-axis

        if (screenOrientation == 0) {
            var vectorFingerY = new THREE.Vector3( 1, 0, 0 ); 
            var fingerQY = new THREE.Quaternion();
            fingerQY.setFromAxisAngle ( vectorFingerY, -rotX );
        }else if (screenOrientation == 180) {
            var vectorFingerY = new THREE.Vector3( 1, 0, 0 ); 
            var fingerQY = new THREE.Quaternion();
            fingerQY.setFromAxisAngle ( vectorFingerY, rotX );
        }else if (screenOrientation == 90) {
            var vectorFingerY = new THREE.Vector3( 0, 1, 0 ); 
            var fingerQY = new THREE.Quaternion();
            fingerQY.setFromAxisAngle ( vectorFingerY, rotX );
        }else if (screenOrientation == -90) {
            var vectorFingerY = new THREE.Vector3( 0, 1, 0 ); 
            var fingerQY = new THREE.Quaternion();
            fingerQY.setFromAxisAngle ( vectorFingerY, -rotX );
        }
        q1.multiply( fingerQY );

        euler.set( beta, alpha, - gamma, 'YXZ' );                       // 'ZXY' for the device, but 'YXZ' for us
        quaternion.setFromEuler( euler );                               // orient the device
        quaternion.multiply( q1 );                                      // camera looks out the back of the device, not the top
        quaternion.multiply( q0.setFromAxisAngle( zee, - orient ) );    // adjust for screen orientation
    };

    function update(camera) {
        if (window.orientation !== undefined && window.orientation !== null) screenOrientation = window.orientation; 

        var alpha  = deviceOrientation.alpha ? THREE.Math.degToRad( deviceOrientation.alpha ) : 0; // Z
        var beta   = deviceOrientation.beta  ? THREE.Math.degToRad( deviceOrientation.beta  ) : 0; // X'
        var gamma  = deviceOrientation.gamma ? THREE.Math.degToRad( deviceOrientation.gamma ) : 0; // Y''
        var orient = screenOrientation       ? THREE.Math.degToRad( screenOrientation       ) : 0; // O
        setObjectQuaternion( camera.quaternion, alpha, beta, gamma, orient );
    };

将此添加到您的init container.appendChild（renderer.domElement）;

            renderer.domElement.addEventListener( 'touchstart', function (e) {
                if (controls) {
                    e.preventDefault();
                    e.stopPropagation();
                    tempX = e.touches[ 0 ].pageX;
                    tempY = e.touches[ 0 ].pageY;
                }
            }, false );
            renderer.domElement.addEventListener( 'touchmove', function (e) {
                if (controls) {
                    e.preventDefault();
                    e.stopPropagation();
                    rotY += THREE.Math.degToRad((tempX - e.touches[ 0 ].pageX)/4);
                    rotX += THREE.Math.degToRad((tempY - e.touches[ 0 ].pageY)/4);

                    mesh.quaternion.copy(MeshStartQY);
                    var vectorFingerY = new THREE.Vector3( 0, 1, 0 ); 
                    var fingerQY = new THREE.Quaternion();
                    fingerQY.setFromAxisAngle ( vectorFingerY, rotY );

                    mesh.quaternion.multiply(fingerQY);

                    tempX = e.touches[ 0 ].pageX;
                    tempY = e.touches[ 0 ].pageY;
                }
            }, false );

在three.js中向DeviceOrientationControls添加偏移量

2 个答案: