ThreeJS: Eliminar objeto de la escena

Estoy usando ThreeJS para desarrollar una aplicación web que muestra una lista de entidades, cada una con el botón correspondiente “Ver” y “Ocultar”; p.ej nombre de la entidad Ver Ocultar. Cuando el usuario hace clic Vista botón, se llama a la siguiente función y la entidad se dibuja en la pantalla con éxito.

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

Y al hacer clic Esconder botón, se llama a la siguiente función:

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

El problema es que la entidad no se elimina de la pantalla una vez cargada cuando Esconder se hace clic en el botón. ¿Qué puedo hacer para hacer Esconder botón para trabajar?

Hice un pequeño experimento. yo añadí scene.remove(object.name); justo después de scene.add(object); dentro addEntity función y como resultado, cuando se hace clic en el botón “Ver”, no se dibuja ninguna entidad (como se esperaba), lo que significa que scene.remove(object.name); funcionó bien dentro addEntity. Pero aún no puedo descubrir cómo usarlo en removeEntity (objeto).

Además, verifiqué el contenido de scene.children y muestra: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Código completo: http://devplace.in/~harman/model_display1.php.html

Por favor pregunte, si necesita más detalles. Probé con rev-59-dev y rev-60 de ThreeJS.

Gracias. 🙂

Creo que ver su uso para el código addEntity y removeEntity sería útil, pero mi primer pensamiento es ¿realmente está configurando object.name? Pruebe en su cargador justo antes de scene.add(object); algo como esto:

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

Lo que podría estar sucediendo es que el “nombre” predeterminado para un Object3D es “”, por lo que cuando llama a su función removeEntity falla debido a que el nombre de los objetos de la escena es “”

Además, me doy cuenta de que pasas object.name a tu cargador. ¿Es aquí donde está almacenando la URL del recurso? Si es así, recomendaría usar el método .userData incorporado de Object3D para almacenar esa información y mantener el campo de nombre para identificar la escena.

Editar: respuesta al código recién agregado

Lo primero que debe tener en cuenta es que no es una gran idea tener “/” en el nombre de su objeto, parece funcionar bien, pero nunca se sabe si algún algoritmo decidirá escapar de esa cadena y romper su proyecto.

El segundo elemento es ahora que he visto su código, es realmente sencillo lo que está pasando. Su función de eliminación está intentando eliminar por nombre, necesita un Object3D para eliminar. Prueba esto:

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

Aquí ves que busco tu Object3D en los Tres.js Scene pasando la etiqueta de su objeto name atributo.

clearScene: function() {
    var objsToRemove = _.rest(scene.children, 1);
    _.each(objsToRemove, function( object ) {
          scene.remove(object);
    });
},

esto usa undescore.js para iterar sobre todos los niños (excepto el primero) en una escena (es parte del código que uso para borrar una escena). solo asegúrate de que prestar la escena al menos una vez después borrando, porque de lo contrario el lienzo no cambia! No hay necesidad de una bandera obj “especial” ni nada como esto.

Además, no elimina el objeto por su nombre, solo por el objeto en sí, por lo que llamar

scene.remove(object); 

en lugar de scene.remove(object.name);
puede ser suficiente

PD: _.each es una función de guión bajo.js

Llegué tarde, pero después de leer las respuestas, es necesario aclarar más.

La función de eliminación que escribiste

function removeEntity(object) {
    // scene.remove(); it expects as a parameter a THREE.Object3D and not a string
    scene.remove(object.name); // you are giving it a string => it will not remove the object
}

Una buena práctica para eliminar objetos 3D de las escenas de Three.js

function removeObject3D(object3D) {
    if (!(object3D instanceof THREE.Object3D)) return false;

    // for better memory management and performance
    if (object3D.geometry) object3D.geometry.dispose();

    if (object3D.material) {
        if (object3D.material instanceof Array) {
            // for better memory management and performance
            object3D.material.forEach(material => material.dispose());
        } else {
            // for better memory management and performance
            object3D.material.dispose();
        }
    }
    object3D.removeFromParent(); // the parent might be the scene or another Object3D, but it is sure to be removed this way
    return true;
}

Si su elemento no está directamente en su escena, vuelva a Padre para eliminarlo

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

ESTO FUNCIONA MUY BIEN. Lo probé, así que, ESTABLEZCA EL NOMBRE para cada objeto.

dar el nombre al objeto en el momento de la creación

    mesh.name="nameMeshObject";

y use esto si tiene que eliminar un objeto

    delete3DOBJ('nameMeshObject');



    function delete3DOBJ(objName){
        var selectedObject = scene.getObjectByName(objName);
        scene.remove( selectedObject );
        animate();
    }

abrir una nueva escena, agregar objeto

eliminar un objeto y crear uno nuevo

Empecé a guardar esto como una función y lo llamé según sea necesario para cualquier reacción que lo requiera:

function Remove(){
    while(scene.children.length > 0){ 
    scene.remove(scene.children[0]); 
}
}

Ahora puede llamar a Remove(); función cuando corresponda.

Cuando usas: scene.remove(objeto); ¡El objeto se elimina de la escena, pero la colisión con él todavía está habilitada!

Para eliminar también la colisión con el objeto, puede usar eso (para una matriz): objectsArray.splice(i, 1);

Ejemplo :

for (var i = 0; i < objectsArray.length; i++) {
//::: each object ::://
var object = objectsArray[i]; 
//::: remove all objects from the scene ::://
scene.remove(object); 
//::: remove all objects from the array ::://
objectsArray.splice(i, 1); 

}