Three.js - 第一个孩子跳跃并采用家长变换

Question

我正在使用Three.js中的“.add（）”方法（RE：71）在三个对象之间创建父/子层次结构。养育两个物体不会造成任何问题。但是，当我尝试创建三级层次结构时，中间子级跳转到相当于其父级与原点的偏移量的偏移量。

这是层次结构：

Red Box（Green Box的父母） - ＆gt; Green Box（蓝盒子的父母） - ＆gt;蓝盒子

下面是如何在育儿之前和之后定位方框的图片：

这是一个图像，如果在子对象时如何重新定位框：

相关代码如下所示：

        var testObject_G1 = new THREE.BoxGeometry(50, 100, 100);
        var testObject_G2 = new THREE.BoxGeometry(100, 100, 50);
        var testObject_G3 = new THREE.BoxGeometry(50, 100, 100);

        var testObject_MR = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        var testObject_MG = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        var testObject_MB = new THREE.MeshBasicMaterial({ color: 0x0000ff });

        var testObject_Mesh = new THREE.Mesh(testObject_G1, testObject_MR);
        testObject_Mesh.position.x = -100;

        var testObject_Mesh2 = new THREE.Mesh(testObject_G2, testObject_MG);
        testObject_Mesh2.position.x = 0;

        var testObject_Mesh3 = new THREE.Mesh(testObject_G3, testObject_MB);
        testObject_Mesh3.position.x = 100;

        testObject_Mesh2.add( testObject_Mesh3 );
        testObject_Mesh.add( testObject_Mesh2 );

        scene.add( testObject_Mesh );

这里有一个JS小提琴：jumping second child

提前谢谢。

Answer 1

你看到的是正确的。在层次结构中，子元素将继承父变换（继承是简化;它们的矩阵将成倍增加，但您只定义了转换，因此将添加值）。因此testMesh（红色）将出现在x = -100，testMesh2（绿色）也将出现在x = -100（因为其x变换为0并将继承其父变换）并且testMesh3（蓝色）将出现在x = 0 （因为-100 + 0 + 100 = 0）。

将此添加到您的小提琴中以查看相对变换。

scene.add( new THREE.AxisHelper( 100 ));