我正在使用Three.js(RE:71)中的“ .add()”方法在三个对象之间创建父级/子级层次结构。为两个对象做父母不会带来任何问题。但是,当我尝试创建三级层次结构时,中间子级会跳转到与父级原点的偏移量相等的偏移量。
这是层次结构:
红框(绿框的父级)->绿框(蓝框的父级)->蓝框
下图显示了如何在育儿之前和之后放置盒子:
这是一张图片,如果在放置父母后如何重新放置框:
相关代码如下:
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/