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

vals 2014-05-04 16:57:37

你的代码行

   THREE.SceneUtils.detach(cubeMesh[i], scene, parentCube);

应该

   THREE.SceneUtils.detach(cubeMesh[i], parentCube, scene);

我已经用你的示例进行了演示，我认为应该是正确的方法。

的HTML

<body>
    <button onclick="attachChild();">attach</button>
    <button onclick="detachChild();">dettach</button>
</body>

的JavaScript

var camera, scene, renderer;
var geometry, material1, material2;
var parentCube;
var cubeMesh = [];
var cameraControls;
var attached = true;

window.onload = function() {
    init();
    animate();
}

function init() {

    camera = new THREE.PerspectiveCamera(75, 2, 1, 10000);
    camera.position.z = 400;
    camera.position.y = 100;

    scene = new THREE.Scene();

    geometry = new THREE.BoxGeometry(200, 200, 200);
    material1 = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true  });

    //Create parentCube mesh
    parentCube = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100, 1, 1, 1), material1);
    scene.add(parentCube);

    //...create materials for the child cubes....
    material2 = new THREE.MeshBasicMaterial({        color: 0x00ff00   });
    //create child cube mesh
    cubeMesh[0] = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100, 1, 1, 1), material2);
    cubeMesh[1] = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100, 1, 1, 1), material2);
    cubeMesh[2] = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100, 1, 1, 1), material2);
    cubeMesh[3] = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100, 1, 1, 1), material2);

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

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


   //translate parentCube
   parentCube.position.set(0,50,0);


  renderer = new THREE.CanvasRenderer();
    renderer.setSize(600, 300);

    document.body.appendChild(renderer.domElement);

        // CONTROLS
    cameraControls = new THREE.OrbitControls(camera);
    cameraControls.addEventListener( 'change', render );


}

function animate() {
    cameraControls.update();
    requestAnimationFrame(animate);
    parentCube.rotation.z += 0.01;
    render ();
}

function render () {
    renderer.render(scene, camera);

}

function attachChild () {
    if (attached) {
        alert ("already attached");
    } else {
        for (var i = 0; i < 4; i++)
            THREE.SceneUtils.attach(cubeMesh[i], scene, parentCube);
        attached = true;
    }
}

function detachChild () {
    if ( ! attached) {
        alert ("not attached");
    } else {
        for (var i = 0; i < 4; i++)
            THREE.SceneUtils.detach(cubeMesh[i], parentCube, scene);
        attached = false;
    }
}

特别注意，我将孩子直接添加到父对象（而不是场景），并且我认为它们从一开始就是附加的。之后，分离并重新连接它们可以按预期工作

如何将其用于Rubik的立方体模拟？

我只是创建添加到场景中的所有多维数据集。

然后，要执行移动，你必须

识别枢轴立方体（位于面中心的那个）
识别周围的立方体
将那些附加到枢轴上
旋转枢轴
拆下立方体

The_Obfuscator 2014-05-01 09:58:05

效果很好。另外，由于我是WebGL开发的新手，所以我想知道：是否总是需要在将子元素作为对象绑定到对象（在这种情况下，将cubeMesh [i]附加到parentCube）后在世界空间中重新放置子元素？已经做完了吗？还是有一些更简单的解决方法？每当我父对象时，即使我在附加之前为孩子分配了世界空间位置，子对象也会占据父对象的位置。提前致谢。

vals 2014-05-01 18:25:44

进行附加时，网格物体不应更改世界坐标。因此，如果以前已定位，则它应该保持全球位置，并且您无需执行任何其他操作。如果不是这种情况，请发布更多代码，我来看一下

The_Obfuscator 2014-05-02 06:27:59

我更新了主要问题的代码，以反映评论中提出的问题。在创建了cubeMesh [i]子多维数据集（在对parentCube的附件之前）之后，我设置了它们的全局位置。将cubeMesh [i]附加到parentCube之后，我必须再次重置它们在世界空间中的位置（请参考代码中带箭头的注释部分）。如果在附件之后不执行此操作，则所有cubeMesh [i]网格都将重新放置在parentCubes的位置，从而失去其原始世界空间的位置。谢谢。

vals 2014-05-02 18:12:41

我相信问题在于，在设置对象位置并将它们附加到父对象之间，您还没有经过任何渲染。如果是这样，这是一种真正的方法吗（您真的需要将它们附加到父对象上吗？），为什么不将它们添加到父对象而不是场景中呢？

The_Obfuscator 2014-05-04 03:48:33

谢谢你的例子。从中了解了很多。我实际上是在对Rubik的多维数据集进行建模和动画处理，因此cubeMesh [i]（子多维数据集）将被动态地附加和分离到parentCube cube / object3D（）（使用了哪个）。

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

(3d - Three.js: Proper way to add and remove child objects using THREE.SceneUtils.attach/detach functions)

热门github