更改组件的父级并保持位置 [英] Change parent of component and keep position
问题描述
我正在使用 AR.js 并且在标记组件中放置了一个球体.
I am using AR.js and have a sphere positioned in the marker component.
<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 中重定位期间，位置应保持在一样，但事实并非如此.我试过这个:
When #sphere-button is clicked, the sphere should dettach from and attach to the camera. During the relocation in the DOM, the position should stay the same, but it does not. I tried this:
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 之间的位置?
How do i correctly translate the position between the two parents a-camera and a-marker?
推荐答案
对于重新养育，我现在会在 Three.js 级别进行，而不是使用 DOM.在 DOM atm 上分离和附加将重新初始化所有内容，并且会一团糟.
For reparenting, I'd do it at three.js level for now and not use the DOM. Detaching and attaching on DOM atm will re-init everything and would be a mess.
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);
这篇关于更改组件的父级并保持位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
