3つの.jsでDeviceOrientationControlsにオフセットを追加します

Question

deviceControls.update();コマンドの後にカメラにオフセットを追加しようとしています。ドラッグジェスチャの結果であろうこのオフセットfirst example.

に示すように、私は（私はAXBとBXAを試みた）2つの四元数を乗算する場合、私は

this example.にプレゼントとして、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); 

camera.target私の最終的なドラッグターゲット（のVector3）であり、そしてcamera.quaternionはdeviceControls.update()によって設定されており、デバイスジャイロによれば、カメラの向きに等しくなる：

は、ここに私の操作です。あなたの助け

の更新のための

感謝：私はチェンジャー回転順序、同じ問題にしようとしています。私はそれが元のデバイスオリエンテーションの更新後の変更によると思うが、解決する方法を見つけることができません。

Answer 1

DeviceOrientationControlsは今財産alphaOffsetAngle、およびthree.js 'Y' 軸周りのシーンを回転させる方法

controls.updateAlphaOffsetAngle(angle); // angle is in radians 

を持っています。

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