Modify mesh in three.js scene

Question

Modify mesh in three.js scene

Is there a way to dynamically change a mesh in a group triggered by a button click?

I am loading an external .obj file:

loader.load( obj, function ( object ) {

    createScene( object, mod.tipo, pid, cor.replace("#","0x") );

});

and adding it to a group

function createScene( geometry, name, id, cor ) {

    geometry.traverse( function ( child ) {

        if ( child instanceof THREE.Mesh ) {

            var material = new THREE.MeshPhongMaterial( {
                specular: 0xffffff,
                shininess: 10,
                side: THREE.DoubleSide,
                map: THREE.ImageUtils.loadTexture('/3d/js/texturas/white.jpg'),
                shading: THREE.SmoothShading
            } );

            material.color.setHex(cor);

            child.material = material;

            group.add( child );     

        }

Then this group is added to the scene: scene.add( group )

To hide the mesh, I set its visibility to false. However, I want to completely remove it from both the scene and the group.

I have already tried using scene.remove('name') or scene.remove(mesh), but they did not work. Does anyone know how to achieve this?

javascript three.js

Answer 1

Answer №1

If you're looking to accomplish this task, consider implementing the following code:

const targetNode = scene.findNodeByAttribute('name', true);
if (targetNode !== null) {
    scene.remove(targetNode);
}

This piece of code will identify a node with the name 'name' in your scene and promptly remove it from the scene.

Answer 2

If you're looking to accomplish this task, consider implementing the following code:

const targetNode = scene.findNodeByAttribute('name', true);
if (targetNode !== null) {
    scene.remove(targetNode);
}

This piece of code will identify a node with the name 'name' in your scene and promptly remove it from the scene.

Answer 3

Answer №2

After much trial and error, I finally found a solution:

In my specific situation, I had grouped meshes together in order to rotate them all to the starting position.

Initially, I attempted to add the meshes directly to the scene, but encountered problems when trying to manipulate them as a group. This led me to rethink my approach and work with a global variable containing an array of all meshes instead.

This is the function that proved to be successful:

var clearScene = function(name) { var objsToRemove = scene.children;

for (var t = 0; t<objsToRemove.length; t++){

    if (objsToRemove[t] instanceof THREE.Mesh) {

      if (objsToRemove[t].name = name) {
        scene.remove(objsToRemove[t]);
        break;
      }

    }

}

}

By iterating through each mesh element, I was able to pinpoint the one I wanted to remove from the scene simply by calling the 'remove' method.

This approach worked for me.

I realized the need to revise my grouping strategy and possibly adjust how I rotate meshes individually to their default positions, which could potentially improve performance.

Answer 4

After much trial and error, I finally found a solution:

In my specific situation, I had grouped meshes together in order to rotate them all to the starting position.

Initially, I attempted to add the meshes directly to the scene, but encountered problems when trying to manipulate them as a group. This led me to rethink my approach and work with a global variable containing an array of all meshes instead.

This is the function that proved to be successful:

var clearScene = function(name) { var objsToRemove = scene.children;

for (var t = 0; t<objsToRemove.length; t++){

    if (objsToRemove[t] instanceof THREE.Mesh) {

      if (objsToRemove[t].name = name) {
        scene.remove(objsToRemove[t]);
        break;
      }

    }

}

}

By iterating through each mesh element, I was able to pinpoint the one I wanted to remove from the scene simply by calling the 'remove' method.

This approach worked for me.

I realized the need to revise my grouping strategy and possibly adjust how I rotate meshes individually to their default positions, which could potentially improve performance.

Modify mesh in three.js scene

Answer №1

Answer №2

Similar questions

Obtaining the data stored in objects within a parse database

The error message "Express Routing - Attempting to access property 'include' of undefined" is displayed when an

Ramda Transitioning to a Liberated Style of Programming

Mastering the art of crafting form elements with jQuery

What could be causing this jQuery to malfunction?

What is the best way to retrieve data input from my select dropdown?

Issues encountered when trying to implement helperText in mui date picker

Incorporate titles for items in the jquery caroufredsel plugin

Retrieve data from an external website containing an HTML table without a table ID using Java Script and transform it into JSON

Encountering an error with Gatsby while running the development environment due to issues with antd and less configuration (NPM

Using Javascript to emphasize Ajax Response

What is the command to invoke an asynchronous method from the node console?

Sending JSON data containing an IFormFile and a string as parameters to C#

Can security groups be dynamically updated using a JSON file in JavaScript rather than relying on manual parameters?

AngularJS controller exceeding allowed complexity (SonarLint alert)

Identify and handle multiple scenarios in JavaScript without using if statements

Can you explain the concept of F-Bounded Polymorphism in TypeScript?

Tips for utilizing ng-repeat with a function that generates a fresh object?

"Modify hyperlink attributes to enhance security and optimize user experience

Encountering issues with styling the search bar using CSS and unable to see any changes reflected