Hinzufügen von Offset zu DeviceOrientationControls in three.js

Question

Ich versuche, einen Offset nach deviceControls.update(); Befehl der Kamera hinzuzufügen. Ich benutzte DeviceOrientationControls wie in diesem first example.

Der Offset wird das Ergebnis einer Ziehbewegung gezeigt, wie präsentiert in this example.

Wenn ich die 2 quaternions multiplizieren (Ich habe versucht, axb und bxa), das Endergebnis nicht richtig.

Hier ist meine Operation:

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 ist mein letztes drag Ziel (Vector3) und wird von camera.quaterniondeviceControls.update() eingestellt worden und ist für die Kameraorientierung entspricht, entsprechend die Geräte Gyroskop.

Danke für Ihre Hilfe

Update: Ich habe zu Wechsler drehen, um versucht, das gleiche Problem. Ich denke es liegt an der Ursprungsänderung nach der Geräteausrichtung Update, kann aber nicht finden, wie zu lösen.

Answer 1

DeviceOrientationControls hat nun eine Eigenschaft alphaOffsetAngle, und ein Verfahren

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

, die die Szene auf der ganzen Three.js 'Y'-Achse drehen.

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

diese container.appendChild (renderer.domElement), um Ihre init hinzufügen;

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