三.js添加：保持位置[重复]

Question

当我将 Object3D 添加到另一个 Object3D（“add”方法）时，子级会根据父级更改其变换。

在将孩子添加到父母后，有没有办法保持孩子的位置/旋转/比例？

小提琴：https://jsfiddle.net/pqfzd8a2/1/

mesh = new THREE.Mesh(geometry, material);    
mesh.position.y = 25;

var mesh2 = mesh.clone();
mesh2.position.y = 80;

var mesh3 = mesh2.clone();

mesh.rotation.z = Math.PI*0.25;

scene.add(mesh);    
mesh.add(mesh2);
scene.add(mesh3);

做了什么？

1. 网格已旋转。
2. mesh2 和mesh3 是彼此相同位置的克隆。
3. mesh2 已添加到网格中，而 mesh3 已添加到场景中。

mesh2 和mesh3 的区别在于它们被添加（父级）到不同的父级（相应地添加到网格和直接添加到场景中）。在被添加（父母）之前，他们处于相同的位置。关键是将对象保持在添加（父级）之前的位置。

预期结果：mesh2 和mesh3 应该在相同的位置。

实际结果：mesh2添加后改变了位置/旋转/缩放。

如何使对象在成为父对象后保持其全局变换？

Answer 1

嗯，这就是定义的行为，至少是这些层次结构存在的原因。如果您不想将父级的变换应用于子级，则没有理由将这些项设置为父级。

使用这种方法可以更轻松地处理由较小对象组成的复杂对象，例如带轮子的汽车。不是移动汽车，然后移动每个车轮，而是让车轮成为汽车的孩子，它们将一直移动/旋转/缩放。这就是父母的转变是如何被所有孩子“继承”的。所以他们的变换是相对于他们各自的父母。就像月亮绕着地球转，地球绕着太阳转，又绕着太阳转……

如果你真的需要在孩子内部取消父母变换，那么你需要将父母变换的逆应用于孩子的变换，但正如我所说，这没有多大意义，因为你只是不需要为他们做父母，你就完成了。

Answer 2

不，它们不应该处于相同的位置，因为您正在更改网格和网格 2 的位置和旋转。如果要将网格添加到另一个网格，则将其添加到父上下文中。

mesh.add(mesh2); // <-- mesh is translated and rotated, mesh2 will inherit the same context

在这个小提琴中，您会看到网格上的旋转也适用于 mesh2：https://jsfiddle.net/r57opdgn/