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

这是层次结构:

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

下图显示了如何在育儿之前和之后放置盒子:
javascript - Three.js-第一个 child 跳并采用父变换-LMLPHP

这是一张图片,如果在放置父母后如何重新放置框:
javascript - Three.js-第一个 child 跳并采用父变换-LMLPHP

相关代码如下:

        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

先感谢您。

最佳答案

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

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

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

关于javascript - Three.js-第一个 child 跳并采用父变换,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31906183/

10-12 07:33
查看更多