ThreeJS:从场景中删除对象 [英] ThreeJS: Remove object from scene

问题描述

我正在使用 ThreeJS 开发一个显示实体列表的 Web 应用程序，每个实体都有对应的查看"和隐藏"按钮；例如entityName 查看隐藏.当用户点击查看按钮时，以下函数被调用并成功绘制到屏幕上.

I'm using ThreeJS to develop a web application that displays a list of entities, each with corresponding "View" and "Hide" button; e.g. entityName View Hide. When user clicks View button, following function is called and entity drawn on screen successfully.

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);
}

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

And on clicking Hide button, following function is called:

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

问题是，当点击隐藏按钮后，实体不会从屏幕上移除.我该怎么做才能使隐藏按钮起作用?

The problem is, entity is not removed from screen once loaded when Hide button is clicked. What can I do to make Hide button to work?

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

I did small experiment. I added scene.remove(object.name); right after scene.add(object); within addEntity function and as result, when "View" button clicked, no entity drawn (as expected) meaning that scene.remove(object.name); worked just fine within addEntity. But still I'm unable to figure out how to use it in removeEntity(object).

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

Also, I checked contents of scene.children and it shows: [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 进行了测试.

Please ask, if more detail is needed. I tested with rev-59-dev and rev-60 of ThreeJS.

谢谢.:)

推荐答案

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

I think seeing your usage for addEntity and removeEntity code would be helpful, but my first thought is are you actually setting the object.name? Try in your loader just before scene.add(object); something like this:

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

可能发生的情况是 Object3D 的默认名称"为"，因此当您调用 removeEntity 函数时，由于场景对象名称为"而失败

What might be happening is the default "name" for an Object3D is "", so when you then call your removeEntity function it fails due to the scene objects name being ""

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

Also, I notice you pass in object.name to your loader? Is this where your storing the URL to the resource? If so, I would recommend using the Object3D's built in .userData method to store that information and keep the name field for scene identification purposes.

响应新添加的代码

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

First thing to note is it's not a great idea to have "/" in your object name, it seems to work fine but you never know if some algorithm will decide to escape that string and break your project.

第二项是现在我已经看到了你的代码，它实际上是直接发生的事情.您的删除功能正在尝试按名称删除，您需要一个 Object3D 来删除.试试这个:

Second item is now that I've seen your code, its actually straight forward whats going on. Your delete function is trying to delete by name, you need an Object3D to delete. Try this:

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

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

Here you see I lookup your Object3D in the Three.js Scene by passing in your object tag's name attribute. Hope that helps

这篇关于ThreeJS:从场景中删除对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！