Three.js 中的父子关系

Question

我创建了一个立方体，宽度=2083，高度=1987，深度=0。然后我绘制了另一个高度 = 40、宽度 = 80、深度 = 0 的立方体，并将第二个立方体作为第一个 cube.I 的子级，设置了子立方体的位置，例如它将进入父立方体。子立方体的位置是(x= -1210, y= -880)

        camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 8000;


        var parentCube = new THREE.Mesh(new THREE.BoxGeometry(2083,1987,0), new THREE.MeshBasicMaterial({color:0xaa00ff}));

        childCube = new THREE.Mesh(new THREE.BoxGeometry(80, 40, 0), new   THREE.MeshBasicMaterial({color: 0x00ff00}) );
        childCube.position.x = -1210;
        childCube.position.y = -880;
        childCube.position.z = 0;
        parentCube.add(childCube);

问题是子立方体被绘制在父立方体之外。

此外，如果我删除父子关系，则 childCube 会按预期在 parentCube 内绘制。

Answer 1

当您定义 parent-child 关系时，child 的位置 相对于 parent。

所以要在 parent 的中心放置一个 child，使用位置 (0,0,0)

您的示例位置确实在 parent 的范围之外。

Three.js 中的父子关系

Parent child relationship in Three.js

javascript

parent-child

three.js