更改组件 parent 并保持位置

Question

我正在使用 AR.js 并且在标记组件中放置了一个球体。

<body style="margin : 0px; overflow: hidden;">
    <a-scene vr-mode-ui="enabled: false" embedded="" arjs="sourceType: webcam; debugUIEnabled: false;">
        <a-marker markerhandler id="marker" emitevents="true" cursor="rayOrigin: mouse" preset="hiro">
            <a-sphere id="sphere" color="green" radius="0.3" position="0 1 0" ></a-sphere>
        </a-marker>
        <!-- use this <a-entity camera> to support multiple-markers, otherwise use <a-marker-camera> instead of </a-marker>-->
        <a-entity camera="" id="camera">
                <a-entity geometry="primitive: plane; height: 0.1; width: 0.1" position="0.4 -0.2 -1"
                material="color: gray; opacity: 0.5"></a-entity>
                <a-entity id="sphere-button" geometry="primitive: plane; height: 0.1; width: 0.1" position="-0.4 -0.2 -1"
                material="color: green; opacity: 0.5"></a-entity>
        </a-entity>
    </a-scene>  
  </body>

当点击#sphere-button时，球体应该从并连接到相机。在DOM搬迁期间，位置应保持在相同，但事实并非如此。我试过这个：

let v = new THREE.Vector3();
v.copy(sphere.object3D.position);
sphere.object3D.localToWorld(v);
camera.object3D.worldToLocal(v);
sphere.parentNode.removeChild(entity);
camera.appendChild(sphere);
entity.setAttribute('position', v);

如何正确翻译两个parentsa-camera和a-marker[=24=之间的位置]?

Answer 1

对于重新设置父级，我现在会在 three.js 级别进行，而不使用 DOM。在 DOM atm 上分离和附加将重新初始化所有内容并且会是一团糟。

let v = new THREE.Vector3();
v.copy(sphere.object3D.position);
sphere.object3D.localToWorld(v);
camera.object3D.worldToLocal(v);
camera.object3D.add(sphere.object3D);
sphere.object3D.position.copy(v);

Answer 2

我尝试了一种不同的方法，使用object3D.attach（正如@prisoner849 在评论中所建议的那样）来获取与预期父对象相关的 Three 对象的位置、旋转等，然后使用该位置、旋转……在预期的父项下克隆实体（最后，删除原始实体）。

您可以在 this answer to "AFrame: reparenting an element keeping its world position, rotation" 中查看实现此方法的组件。

更改组件 parent 并保持位置

Change parent of component and keep position

three.js

aframe

ar.js