我正在尝试重新设置元素(实体)的父级，保持其在场景中的位置、旋转(以及如果可能的话，大小，例如比例)。理想情况下，我希望有一个组件(例如“reparent”)，当在实体上设置时，将其“移动”到指定的父级，从而将实体的外观保留在场景中。例如，对于下一个 HTML 代码，绿色实体将成为红色实体的子级，但会保持其在场景中的位置和旋转:
<a-scene id="scene" background="color: grey">
<a-entity id="red"
position="-1 3.5 -4" rotation="30 0 0" material="color: red"
geometry="primitive: cylinder"></a-entity>
<a-entity id="green" reparent="parent: #red"
position="-3 2 -4" rotation="0 45 0" material="color: green"
geometry="primitive: box"></a-entity>
</a-scene>
显然，这可以使用attach在三个级别上完成。 ，但是当我尝试使用它编写一个简单的组件时，它不起作用，显然是由于 HTML 的重新父级调整造成的(我假设是因为 AFrame)。
我已经编写了他的测试组件来显示问题:
AFRAME.registerComponent('reparent', {
schema: {
parent: {type: 'selector', default: null},
},
init: function () {
const el = this.el;
const parent = this.data.parent;
move = function(evt) {
parent.object3D.attach(el.object3D);
console.log(el.object3D.parent.el.id, el.parentElement.id);
// parent.appendChild(el);
// console.log(el.object3D.parent.el.id, el.parentElement.id);
};
el.sceneEl.addEventListener('loaded', move);
}
});
运行时，结果是红色场景:object3D 的父级发生了更改，但在 HTML 级别，元素的父级仍然是场景。绿色框按预期显示(在“-3 2 -4”中，世界坐标，并且旋转正确)。
如果我取消注释这两行，我会得到第二行red red，但绿色框消失。换句话说，现在在 HTML 中，元素按照预期重新设置了父级，但不知何故，它的 object3D 不再工作。
知道为什么会失败，或者对这样的组件有其他想法吗？
所有这一切都通过 AFrame 1.1.0 实现。
最佳答案
在得到重用相同元素(实体)进行重新父级设置不是一个好主意的建议后(请参阅 Change parent of component and keep position )，我探索了将要重新设置父级的实体复制到新父级下的新元素中的想法，并且然后删除“旧”实体(而不是直接重新设置实体的父级)。诚然，这不是世界上最干净的黑客，但我希望它对我的用例有所帮助。所以，我写了一个组件:
AFRAME.registerComponent('reparent', {
schema: {
parent: {type: 'selector', default: null},
},
update: function () {
const el = this.el;
const parent = this.data.parent;
if (el.parentElement == parent) {
// We're already a child of the intended parent, do nothing
return;
};
// Reparent, once object3D is ready
reparent = function() {
// Attach the object3D to the new parent, to get position, rotation, scale
parent.object3D.attach(el.object3D);
let position = el.object3D.position;
let rotation = el.object3D.rotation;
let scale = el.object3D.scale;
// Create new element, copy the current one on it
let newEl = document.createElement(el.tagName);
if (el.hasAttributes()) {
let attrs = el.attributes;
for(var i = attrs.length - 1; i >= 0; i--) {
let attrName = attrs[i].name;
let attrVal = el.getAttribute(attrName);
newEl.setAttribute(attrName, attrVal);
};
};
// Listener for location, rotation,... when the new el is laded
relocate = function() {
newEl.object3D.location = location;
newEl.object3D.rotation = rotation;
newEl.object3D.scale = scale;
};
newEl.addEventListener('loaded', relocate, {'once': true});
// Attach the new element, and remove this one
parent.appendChild(newEl);
el.parentElement.removeChild(el);
};
if (el.getObject3D('mesh')) {
reparent();
} else {
el.sceneEl.addEventListener('object3dset', reparent, {'once': true});
};
}
});
您可以检查它是否适用于以下 HTML 文件:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="reparent.js"></script>
</head>
<body>
<a-scene id="scene" background="color: grey">
<a-entity id="red"
position="1 2 -4" rotation="30 0 0" material="color: red"
geometry="primitive: cylinder"></a-entity>
<a-entity id="green" reparent="parent: #red"
position="-1 0 -4" rotation="0 45 0" material="color: green"
geometry="primitive: box"></a-entity>
<a-entity id="wf"
position="-1 0 -4" rotation="0 45 0" material="wireframe: true"
geometry="primitive: box"></a-entity>
</a-scene>
</body>
</html>
线框实体只是为了显示绿色框如何精确地保持在相同位置，尽管它在红色实体下“重新设置了父级”(浏览 DOM 来检查)。如上所述，绿色框实际上是一个新框，是从原始框克隆的，然后被组件删除。
组件应该在其 parent 属性更改时工作，从而在需要时允许动态重新设置父级。
关于javascript - AFrame:重新调整元素的父级，保持其世界位置、旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65538916/