It would be beneficial to see how you are using the addEntity and removeEntity code, but initially, make sure you are setting the object's name correctly. Before adding the object to the scene in your loader, try this:

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

The default "name" for an Object3D is "", so if you don't set it, your removeEntity function might fail when trying to find an object with an empty name.

I noticed that you pass the object's name to your loader. If this is where you store the URL to the resource, consider using the Object3D's .userData method for that purpose instead of the name field.

Edit: Response to newly added Code

Avoid having "/" in your object name as it could cause potential issues down the line.

After reviewing your code, it seems clear what's causing the problem. Your delete function is attempting to delete by name, but it requires an Object3D instead. Here's a better approach:

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

In this solution, I search for your Object3D in Three.js Scene using the object tag's name attribute.

Although I arrived late, upon reviewing the responses it is clear that further clarification is necessary.

Your remove function implementation

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
}

An effective method for removing 3D objects from Three.js scenes

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

removeItemsFromScene: function() {
    var objectsToRemove = _.rest(scene.children, 1);
    _.each(objectsToRemove, function( obj ) {
          scene.remove(obj);
    });
},

This particular method utilizes underscore.js to iterate through all children in a scene and remove them (excluding the first child). It is part of my code implementation to clear a scene. Remember to render the scene at least once after removal, as failing to do so will result in no visible change on the canvas! No special object flag or identifier is necessary for this task.

When removing objects, you need only reference the object itself, like so:

scene.remove(object); 

Rather than using scene.remove(object.name);, which unnecessary in this context.

PS: The _.each function is provided by underscore.js

In case your object is not currently visible in the scene, return to its parent to delete it

  function removeObjectFromScene(item) {
        var selectedObject = scene.getObjectByName(item.name);
        selectedObject.parent.remove( selectedObject );
    }

This method has been proven effective after thorough testing. It is essential to assign a unique name to each object upon creation.

    mesh.name = 'nameMeshObject';

Use the following function to delete an object:

    delete3DOBJ('nameMeshObject');



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

Creating a new scene and adding objects: https://i.sstatic.net/3vstm.png

To delete an object and create a new one: https://i.sstatic.net/KXk2W.png

I recently began creating a reusable function to handle the task of removing elements as needed:

function ClearElements(){
    while(container.children.length > 0){ 
        container.remove(container.children[0]); 
    }
}

You can now easily invoke the ClearElements() function whenever necessary.

Removing an object from the scene using 'scene.remove(object);' does not disable collision with the object.

To completely remove collision as well, you can use the following code for an array:

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

I have enhanced Ibrahim's code for removeObject3D by adding additional validation checks for geometry and material properties.

removeObject3D(obj) {
    if (!(obj instanceof THREE.Object3D)) return false;
    // Implementing better memory management and performance
    if (obj.geometry) {
        obj.geometry.dispose();
    }
    if (obj.material) {
        if (Array.isArray(obj.material)) {
            // Implementing better memory management and performance
            obj.material.forEach(m => m.dispose());
        } else {
            // Implementing better memory management and performance
            obj.material.dispose();
        }
    }
    if (obj.parent) {
        obj.parent.remove(obj);
    }
    // The parent could be the scene or another Object3D, but this method guarantees its removal
    return true;
}

In addition to @Ibrahim W.'s explanation on how to clean up threejs, it is important to also release the memory allocated to threejs objects.

Here is an example of how you can clean up properly:

// Sample code for cleaning up threejs scene
scene.children.forEach(sceneObject => {
        if (!(sceneObject instanceof THREE.Object3D)) return;

        if (sceneObject.geometry) sceneObject.geometry.dispose();

        if (sceneObject.material) {
            if (sceneObject.material instanceof Array) {
                sceneObject.material.forEach(material => material.dispose());
            } else {
                sceneObject.material.dispose();
            }
        }

        scene.remove(sceneObject);

    });

    scene.clear();

    domTarget.removeEventListener("pointermove", onPointerMove);
    window.removeEventListener("resize", onWindowResize);
    domTarget.removeChild(renderer.domElement);

    renderer.renderLists.dispose();
    renderer.forceContextLoss();
    renderer.context = null;
    renderer.domElement = null;
    renderer.dispose();
    renderer = null;
    scene = null;
    camera = null;
}

Cleaning up the WebglContext prevents encountering warnings like:

Too many active WebGL contexts. Oldest context will be lost

Sometimes, variables created in the global scope may not get cleared by the Javascript garbage collector after the animation is removed, so setting them to null ensures proper memory reclamation by the Garbage Collector.

Check out this example for a fresh perspective. I recently tackled a similar task in my own project and found success by properly disposing of the mesh's geometry and material attributes instead of just using scene.remove(mesh). View source

To delete an object from the scene, you can use the following code: scene.remove(Object) Just specify which specific object you want to remove

I encountered a similar issue to yours and found a solution that worked for me. Simply include the following code when creating your object: set object.is_ob to true.

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;
      // add this code
        object.is_ob = true;

        scene.add(object);
    });     
}

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

If you need to delete your object, use this code:

function removeEntity(object){
    var obj, i;
            for ( i = scene.children.length - 1; i >= 0 ; i -- ) {
                obj = scene.children[ i ];
                if ( obj.is_ob) {
                    scene.remove(obj);

                }
            }
}

Give it a try and let me know if it resolves your issue. It appears that three js may not recognize the object after being added to the scene, but this workaround should help.