3d - Three.js:使用 THREE.SceneUtils.attach/detach 函数添加和删除子对象的正确方法

Question

使用three.js，并改编此处提供的West Langley帖子中的说明:
Three.js: Adding and Removing Children of Rotated Objects ，我设置了一个 WebGL 场景，其中添加了五个立方体网格。最初，所有对象都是场景的子对象，然后，我将它们附加到第五个“parentCube”立方体并沿 Y 轴平移 100 个单位，从而平移其他四个立方体，然后将它们分离。

在那之后，我想独立地将“parentCube”立方体(以前是四个立方体的父)转换回原点，但是，当我执行该转换时，其他四个立方体网格也与以前的父立方体网格一起平移，即使当我分离它们时。

这可能是一个非常基本的问题，但是考虑到上述所有细节，我如何在不影响其他立方体的位置的情况下独立翻译“parentCube”？支队哪里出了问题？任何帮助，将不胜感激。谢谢 :)

这是我用来执行上述所有操作的代码示例:

        //Create parentCube mesh
        var parentCube = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100, 10, 10, 10), new THREE.MeshBasicMaterial({ color: 0xa1ff11, wireframe: true }));
        scene.add(parentCube);

        //...create materials for the child cubes....

        //create child cube mesh
        for(var i = 0; i < 4; i++)
            cubeMesh[i] = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100, 30, 30, 30), materials[i]);

        //--> Set child cube world positions before the attachment to parentCube mesh
        cubeMesh[0].position.set((100 / 2),(100 / 2),(100 / 2));
        cubeMesh[1].position.set(-(100 / 2),(100 / 2),(100 / 2));
        cubeMesh[2].position.set(-(100 / 2),-(100 / 2),(100 / 2));
        cubeMesh[3].position.set((100 / 2),-(100 / 2),(100 / 2));

        //Add child cubes to the scene
        for(var i = 0; i < cubeMesh.length; i++)
            scene.add(cubeMesh[i]);

        //attach child cubeMesh[i] to parentCube mesh
        for(var i = 0; i < 4; i++)
            THREE.SceneUtils.attach(cubeMesh[i], scene, parentCube);

        //--> Set positions of child elements after attachment to parentCube
        cubeMesh[0].position.set((100 / 2),(100 / 2),(100 / 2));
        cubeMesh[1].position.set(-(100 / 2),(100 / 2),(100 / 2));
        cubeMesh[2].position.set(-(100 / 2),(100 / 2),-(100 / 2));
        cubeMesh[3].position.set((100 / 2),(100 / 2),-(100 / 2));

        //translate parentCube
        parentCube.position.set(0,150,0);
        parentCube.updateMatrixWorld();

        //Attempt to detach child objects from parentCube
        //And make them children of the scene
        for(var i = 0; i < 4; i++)
        {
            cubeMesh[i].updateMatrixWorld();
            THREE.SceneUtils.detach(cubeMesh[i], parentCube, scene);
        }

        //Attempt to translate parentCube back to origin
        parentCube.position.set(0,0,0);
    }

Answer 1

这是一篇旧帖子，但为了搜索引擎，这里是我对此的看法

查看 THREE.SceneUtils.attach() 的代码，在我看来，该代码假定您要附加的对象是场景对象的父级。当您的对象实际上嵌套在场景图中的更下方时，这会导致处理问题。为了解决这个问题，我写了这个函数

function reparentObject3D(subject, newParent)
{
    subject.matrix.copy(subject.matrixWorld);
    subject.applyMatrix(new THREE.Matrix4().getInverse(newParent.matrixWorld));
    newParent.add(subject);
}

这允许您将对象从场景图中的任何级别重新设置为场景图中的任何其他级别。这免除了“分离”对象的需要。如果那是您需要的，您只需将它们重新设置到场景中