THREE.js Rotation Kopie funktioniert nicht

Question

Ich habe einen Fehler, wo ich die Quaternion eines Objekts kopieren und es an eine Funktion übergeben, wo es auf ein anderes Objekt angewendet wird, um ihre Rotationen synchron zu halten. Ich kann die Quaternion nicht auf das zweite Objekt anwenden.

Gegeben Objekt 1 ist msh und Objekt 2 ist msh2, wird dieser Code nicht die Drehung des msh zu msh2

var rot = new THREE.Quaternion().copy(msh.rotation); 
    msh2.rotation.copy(rot); 

gelten Sie diese weiter in diesem Stapel Snippet sehen, die das Problem in der kleinsten reproduzierbaren enthält Mode (aber nicht der genaue Code, den ich mit in meinem realen Projekt arbeiten)

var renderer = new THREE.WebGLRenderer({canvas : $("#can")[0]}); 
 
renderer.setSize($("#can").width(), $("#can").height()); 
 
var cam = new THREE.PerspectiveCamera(45, $("#can").width()/$("#can").height(), 0.1, 100); 
 
cam.position.set(0,2,6); 
 
cam.quaternion.multiply(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), -Math.PI/8)); 
 
var scene = new THREE.Scene(); 
 

 
var geo = new THREE.BoxGeometry(1,1,1); 
 
var mat = new THREE.MeshBasicMaterial({color : 0xff0000}); 
 
var msh = new THREE.Mesh(geo,mat); 
 
scene.add(msh); 
 

 
geo = new THREE.BoxGeometry(1,2,1); 
 
mat = new THREE.MeshBasicMaterial({color : 0xff00ff}); 
 
var msh2 = new THREE.Mesh(geo,mat); 
 
msh2.position.set(2,0,0); 
 
scene.add(msh2); 
 

 
function render() { 
 
    requestAnimationFrame(render); 
 
    msh.rotateX(0.001); 
 
    msh.rotateY(0.002); 
 
    //For some reason, this doesn't work?? 
 
    var rot = new THREE.Quaternion().copy(msh.rotation); 
 
    msh2.rotation.copy(rot); 
 
    //Yet this does (but it doesn't fit the flow of my 
 
    //original project because I don't want to pass 
 
    //objects around. 
 
    //msh2.rotation.copy(msh.rotation); 
 
    renderer.render(scene, cam); 
 
} 
 
render();

<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/build/three.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="can" width="400" height="300"></canvas>

Also see the JSFiddle here

Fehle ich etwas hier? Ich mache das mit Vector3 die ganze Zeit, so sehe ich nicht, warum ich es hier nicht tun kann ...

Answer 1

msh.rotation ist eine Instanz THREE.Euler, aber Sie versuchen, zu/von THREE.Quaternion zu kopieren. msh2.rotation.copy (msh.rotation) sollte gut funktionieren, ebenso wie msh2.quaternion.copy (msh.quaternion)

Answer 2

Wenn ich Sie richtig verstehe, wollen Sie beide Objekte mit der gleichen Geschwindigkeit und Winkel drehen. Sie müssen nur die render(); Funktion mit diesen beiden Linien aktualisieren:

msh2.rotateX(0.001); 
    msh2.rotateY(0.002); 

Updated JSFiddle