On A-Frame scene, I want change entity's(a-box) parent.
So I doing removeChild() and appendChild().
But this work did not work as my intended.
It seemed that Object3D was lost when removeChild() was done. (box disappeared!)
Is there a way to change parent without cloneNode()?
I want to move the original box, not the box's clone.
A-Frame version is 0.9.1
<a-scene>
<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
<a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 0 3.8">
<a-camera></a-camera>
</a-entity>
</a-scene>
<script>
// this code doesn't work as my intended
var plane = document.querySelector('a-plane');
var box = document.querySelector('a-box');
box.parentEl.removeChild(box);
plane.appendChild(box);
// is this the only way?
// var plane = document.querySelector('a-plane');
// var box = document.querySelector('a-box');
// var copyBox = box.cloneNode(true);
// box.parentEl.removeChild(box);
// plane.appendChild(copyBox);
</script>
We hope that moving the DOM node works, but it's not fully tested. Might just be an issue. You can also just move the three.js object3D which is a lot faster.
const obj = el.object3D;
anotherEl.object3D.add(obj);