Three.js add: keep position
<p>When I add an Object3D to another Object3D ("add" method) the child changes its transform depending on parent's one.</p>

<p>Is there a way to keep position/rotation/scale of the child after adding it to a parent?</p>

<p>Fiddle: <a href="https://jsfiddle.net/pqfzd8a2/1/" rel="nofollow noreferrer">https://jsfiddle.net/pqfzd8a2/1/</a></p>

<pre><code>mesh = new THREE.Mesh(geometry, material);    
mesh.position.y = 25;

var mesh2 = mesh.clone();
mesh2.position.y = 80;

var mesh3 = mesh2.clone();

mesh.rotation.z = Math.PI*0.25;

scene.add(mesh);    
mesh.add(mesh2);
scene.add(mesh3);
</code></pre>

<p><strong>What was done?</strong></p>

<ol>
<li>mesh is rotated.</li>
<li>mesh2 and mesh3 are clones of each other with same position.</li>
<li>mesh2 is added to mesh, while mesh3 was added to scene.</li>
</ol>

<p><em>The difference between mesh2 and mesh3 is that they were added (parented) to different parents (to mesh and directly to the scene, correspondingly). Before being added (parented) to something, they were in same position. The point is to keep the object where it was before being added (parented).</em></p>

<p><strong>Expected result</strong>: mesh2 and mesh3 should be in the same positions.</p>

<p><strong>Actual result</strong>: mesh2 changes position/rotation/scale after being added.</p>

<p>How to make objects keep their global transform after being parented?</p>