javascript - Three.js - 第一个子级跳跃并采用父级变换

Question

我正在使用 Three.js 中的“.add()”方法在三个对象之间创建父/子层次结构(RE:71)。为两个对象添加子对象不会造成任何问题。但是，当我尝试创建三级层次结构时，中间子级跳转到等于其父级距原点的偏移量的偏移量。

这是层次结构:

红框(绿框的父级)-> 绿框(蓝框的父级)-> 蓝框

下图显示了在父子关系之前和之后应如何放置框:

这是一个图像，如果设置父级时框如何重新定位:

相关代码如下:

        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 Fiddle:jumping second child

提前谢谢您。

Answer 1

你所看到的是正确的。在层次结构中，子级将继承父级变换(继承是简化；它们的矩阵将相乘，但您只定义了转换，因此将添加值)。因此 testMesh(红色)将出现在 x=-100 处，testMesh2(绿色)也将出现在 x=-100 处(因为它的 x 变换为 0 并且将继承其父变换)，testMesh3(蓝色)将出现在 x=0 处(因为-100+0+100=0)。

将其添加到您的 fiddle 中以查看相对转换。

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