title: Invert rotation of parent in the child, so the child appears unrotated in the world
body: <p>In a THREE.js scene, I have a parent object that rotates around.  This parent has children that should be positionally locked to their parent's rotation, but their own rotation needs to be independent and not inherit from the parent.</p>
  
  <p>A simple case would be to make the children always face the camera.</p>
  
  <p>My attempt was to "invert" the rotation of the parent in the children.  That is:</p>
  
  <pre><code># render loop
  render = -&gt;
    requestAnimationFrame(render)
  
    # Rotate the parent
    @parent.rotation.x += 0.01
    @parent.rotation.z += 0.02
  
    # Attempt to invert rotation of the parent, and fail :(
    for child in @children
      child.rotation.x = -@parent.rotation.x
      child.rotation.z = -@parent.rotation.z
  </code></pre>
  
  <p>The result of this naive attempt is here.  The small yellow planes are children of the gray cube, and they rotate around in ways I wouldn't expect...</p>
  
  <p><a href="http://jsfiddle.net/b6jgS/" rel="noreferrer">http://jsfiddle.net/b6jgS/</a></p>
  
  <p>What I want is those planes to be perfect squares the whole time, moving with the rotation of the cube, but with their rotation locked to the world, and not the parent.</p>
  
  <p>So how would I undo the rotation of the parent in the child? What crazy math am I missing here?</p>
  
  <p><em>I know I could be using point sprites for this example, but I have more complex needs in mind eventually where point sprites just won't do.  So I need to figure out to do this with a real 3D object.</em></p>
  
  <hr>
  
  <p><strong>EDIT:</strong> This <em>does</em> work for each axis alone.  If the parent only rotates on X, I can invert that on the child's X rotation and it's just like I want.  Same for only Z.  However, if I start to vary and then invert both X and Z it then gets all squirrely.</p>