javascript - 三个JS : Remove object from scene

Question

我正在使用 ThreeJS 开发一个显示实体列表的 Web 应用程序，每个实体都有相应的“查看”和“隐藏”按钮；例如实体名称查看隐藏。当用户点击 View 按钮时，将调用以下函数并成功在屏幕上绘制实体。

function loadOBJFile(objFile){            
    /* material of OBJ model */                                          
    var OBJMaterial = new THREE.MeshPhongMaterial({color: 0x8888ff});
    var loader = new THREE.OBJLoader();
    loader.load(objFile, function (object){
        object.traverse (function (child){
            if (child instanceof THREE.Mesh) {
                child.material = OBJMaterial;
            }
        });
        object.position.y = 0.1;
        scene.add(object);
    });     
}

function addEntity(object) {
    loadOBJFile(object.name);
}

点击隐藏按钮，调用以下函数:

function removeEntity(object){
    scene.remove(object.name);
}

问题是，当点击Hide 按钮时，实体不会在加载后从屏幕上移除。我该怎么做才能使隐藏 按钮起作用？

我做了一个小实验。我在 addEntity 函数中的 scene.add(object); 之后添加了 scene.remove(object.name);，结果，当“单击 View ”按钮，没有绘制实体(如预期的那样)，这意味着 scene.remove(object.name); 在 addEntity 中工作得很好。但我仍然无法弄清楚如何在 removeEntity(object) 中使用它。

此外，我检查了 scene.children 的内容，它显示:[object Object]、[object Object]、[object Object]、[object Object]、[object Object]、[object Object]

完整代码:http://devplace.in/~harman/model_display1.php.html

如果需要更多详细信息，请询问。我用 ThreeJS 的 rev-59-dev 和 rev-60 进行了测试。

谢谢。 :)

Answer 1

我认为看到您对 addEntity 和 removeEntity 代码的用法会有所帮助，但我的第一个想法是您实际上是在设置 object.name 吗？在 scene.add(object); 之前尝试加载程序像这样:

object.name = "test_name";
scene.add(object);

可能发生的情况是 Object3D 的默认“名称”是“”，因此当您随后调用 removeEntity 函数时，由于场景对象名称是“”，它会失败

此外，我注意到您将 object.name 传递给了加载器？这是您存储资源 URL 的地方吗？如果是这样，我建议使用 Object3D 的内置 .userData 方法来存储该信息并保留名称字段以用于场景识别目的。

编辑:响应新添加的代码

首先要注意的是，在您的对象名称中包含“/”并不是一个好主意，它似乎工作正常，但您永远不知道某些算法是否会决定转义该字符串并破坏您的项目。

第二项是现在我已经看过您的代码，它实际上很简单。您的删除功能正在尝试按名称删除，您需要一个 Object3D 才能删除。试试这个:

function removeEntity(object) {
    var selectedObject = scene.getObjectByName(object.name);
    scene.remove( selectedObject );
    animate();
}

在这里，您看到我通过传入对象标记的 name 属性在 Three.js Scene 中查找您的 Object3D。希望有帮助