THREE.js rotation copy is not working

Question

I have a bug where I copy the Quaternion of one object and pass it to a function where it gets applied to another object to keep their rotations in sync. I cannot get the Quaternion to apply to the second object.

Given object 1 is msh and object 2 is msh2, this code will not apply the rotation of msh to msh2

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

You can see this further in this Stack Snippet which contains the problem in the smallest reproducable fashion (but isn't the exact code I'm working with in my real project)

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

Am I missing something here? I do this with Vector3 all the time so I don't see why I can't do it here...

msun · Accepted Answer · 2016-10-14 18:21:57Z

5

msh.rotation is an instance of THREE.Euler, but you're trying to copy to/from THREE.Quaternion. msh2.rotation.copy(msh.rotation) should work fine, as would msh2.quaternion.copy(msh.quaternion)

answered Oct 14, 2016 at 18:21

msun

8516 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cobertos Over a year ago

Agh, I knew it was something dumb. I was doing console traces and it looked like it was updating properly. Explains why my _w property was always undefined, too.

Ashley Ford · Accepted Answer · 2016-10-14 15:22:06Z

0

If I understand you correctly you want both objects to rotate at the same speed and angle. You just need to update the render(); function with these two lines:

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

Updated JSFiddle

answered Oct 14, 2016 at 15:22

Ashley Ford

1

1 Comment

Cobertos Over a year ago

That's just the snippet of the problem reproduced in the smallest way. In my actual project

I copy the Quaternion of one object and pass it to a function where it gets applied to another object to keep their rotations in sync

as I said in the first paragraph. The rotation is coming from mouse controls controlling a camera with really nontrivial rotations so I can't reproduce them like that.

Collectives™ on Stack Overflow

THREE.js rotation copy is not working

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related