我正在使用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);
我如何正确翻译两个父母a-camera和a-marker之间的位置？
为了重新定位，我现在在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);