La copie de rotation de THREE.js ne fonctionne pas

Question

J'ai un bogue où je copie le Quaternion d'un objet et le passe à une fonction où il est appliqué à un autre objet pour synchroniser les rotations. Je ne peux pas obtenir le Quaternion à appliquer au deuxième objet.

Étant donné l'objet 1 est msh et objet 2 est msh2, ce code ne sera pas appliquer la rotation de msh à msh2

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

Vous pouvez le voir plus loin dans cette pile Snippet qui contient le problème le plus petit reproductible la mode (mais pas le code exact, je travaille dans mon vrai projet)

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

Suis-je manque quelque chose ici? Je fais cela avec Vector3 tout le temps, donc je ne vois pas pourquoi je ne peux pas le faire ici ...

Answer 1

msh.rotation est une instance de THREE.Euler, mais vous essayez de copier/de THREE.Quaternion. msh2.rotation.copy (msh.rotation) devrait fonctionner correctement, comme msh2.quaternion.copy (msh.quaternion)

Answer 2

Si je vous comprends bien, vous voulez que les deux objets tournent à la même vitesse et angle. Vous avez juste besoin de mettre à jour la fonction render(); avec ces deux lignes:

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

Updated JSFiddle