Is there a way to manipulate each object that I create in Three.js?

Question

Is there a way to manipulate each object that I create in Three.js?

Currently, I am working on developing a scene with three.js and incorporating 3 spheres into it. My goal is to switch all wireframe materials of the spheres created to non-wireframe ones. I opted not to use scene.traverse() as my scene contains multiple objects and I only wish to modify the spheres. However, with my existing code, I am limited to switching only one sphere. How can I access each individual sphere? Any assistance would be greatly appreciated. Thank you!

var numSpheres = 3;

function createSphere (x, y, z){

    sphere = new THREE.Object3D();

    material = new THREE.MeshBasicMaterial({ color: 0XFFA500, wireframe: true});
    geometry = new THREE.SphereGeometry (2, 8, 8);
    mesh = new THREE.Mesh(geometry, material);

    sphere.add(mesh);
    sphere.position.set(x, y, z);

    scene.add(sphere);
}

createSpheres(numSpheres){

    for(i = 1; i <= numSpheres; i++){       
        var randomnumber1 = Math.floor(Math.random() * (29.5 - -29.5 + 1)) + -29.5;
        var randomnumber2 = Math.floor(Math.random() * (29.5 - -29.5 + 1)) + -29.5;

        createSphere(randomnumber1, 3, randomnumber2);
    }
}
function onKeyDown(e){

    case 65: 
    case 97:
        sphere.traverse(function (node){
                if(node instanceof THREE.mesh) {
                    node.material.wireframe = !node.material.wireframe;
                }
        });

javascript object three.js traversal

Answer 1

Answer №1

Following @prisoner849's advice, organize the objects you wish to modify in either an array or map. By doing so, you can avoid using instanceof THREE.Mesh and solely focus on manipulating the intended objects.

const numSpheres = 3;
let spheresMap = {}; // OR
let spheresArray = [];

function createSphere(x, y, z){

    const sphere = new THREE.Object3D();

    material = new THREE.MeshBasicMaterial({ color: 0XFFA500, wireframe: true});
    geometry = new THREE.SphereGeometry (2, 8, 8);
    mesh = new THREE.Mesh(geometry, material);

    sphere.add(mesh);
    sphere.position.set(x, y, z);

    scene.add(sphere);

    spheresMap[sphere.id] = sphere; // OR
    spheresArray.push(sphere);
}

createSpheres(numSpheres){

    for(let i = 1; i <= numSpheres; i++){       
        let randomnumber1 = Math.floor(Math.random() * (29.5 - -29.5 + 1)) + -29.5;
        let randomnumber2 = Math.floor(Math.random() * (29.5 - -29.5 + 1)) + -29.5;

        createSphere(randomnumber1, 3, randomnumber2);
    }
}
function onKeyDown(e){

    switch (e.key) {
      case 'a': 
      case 'A':
        for (let key in spheresMap) {
            spheresMap[key].material.wireframe = !spheresMap[key].material.wireframe;
        }
        // OR
        for (let i=0; i<spheresArray.length; i++) {
            spheresArray[i].material.wireframe = !spheresArray[i].material.wireframe;
        }
    }
}

Answer 2

Following @prisoner849's advice, organize the objects you wish to modify in either an array or map. By doing so, you can avoid using instanceof THREE.Mesh and solely focus on manipulating the intended objects.

const numSpheres = 3;
let spheresMap = {}; // OR
let spheresArray = [];

function createSphere(x, y, z){

    const sphere = new THREE.Object3D();

    material = new THREE.MeshBasicMaterial({ color: 0XFFA500, wireframe: true});
    geometry = new THREE.SphereGeometry (2, 8, 8);
    mesh = new THREE.Mesh(geometry, material);

    sphere.add(mesh);
    sphere.position.set(x, y, z);

    scene.add(sphere);

    spheresMap[sphere.id] = sphere; // OR
    spheresArray.push(sphere);
}

createSpheres(numSpheres){

    for(let i = 1; i <= numSpheres; i++){       
        let randomnumber1 = Math.floor(Math.random() * (29.5 - -29.5 + 1)) + -29.5;
        let randomnumber2 = Math.floor(Math.random() * (29.5 - -29.5 + 1)) + -29.5;

        createSphere(randomnumber1, 3, randomnumber2);
    }
}
function onKeyDown(e){

    switch (e.key) {
      case 'a': 
      case 'A':
        for (let key in spheresMap) {
            spheresMap[key].material.wireframe = !spheresMap[key].material.wireframe;
        }
        // OR
        for (let i=0; i<spheresArray.length; i++) {
            spheresArray[i].material.wireframe = !spheresArray[i].material.wireframe;
        }
    }
}

Answer 3

Answer №2

In the future, if you are able to access your spheres individually, the most important aspect is organizing them in an array within an object:

 function createSphere (x, y, z){

        var sphere= new THREE.Mesh(new THREE.SphereGeometry (2, 8, 8), new THREE.MeshBasicMaterial({ color: 0XFFA500, wireframe: true}));

        scene.add(sphere);
        sphere.position.set(x, y, z);    
        return sphere;

 }

 mySpheres = {};
 mySpheres.models = [];
 mySpheres.materials = [];

 for(i = 1; i <= 3; i++){       
        var randomnumber1 = Math.floor(Math.random() * (29.5 - -29.5 + 1)) + -29.5;
        var randomnumber2 = Math.floor(Math.random() * (29.5 - -29.5 + 1)) + -29.5;

        var obj = createSphere(randomnumber1, 3, randomnumber2); // 
        var id = obj.id; // or whartever (redone,barrack,donald,george)
        mySpheres.models[id] = obj;
        mySpheres.materials.push(obj.material);
 }


    //after that you can do 
    mySpheres.models['donald'].translateX(10); 
    //or 
    mySpheres.models['george'].material.opacity = 0.5;
    //or
    mySpheres.materials.forEach(function(m) {
         m.opacity = 0.5;
    });

Answer 4

In the future, if you are able to access your spheres individually, the most important aspect is organizing them in an array within an object:

 function createSphere (x, y, z){

        var sphere= new THREE.Mesh(new THREE.SphereGeometry (2, 8, 8), new THREE.MeshBasicMaterial({ color: 0XFFA500, wireframe: true}));

        scene.add(sphere);
        sphere.position.set(x, y, z);    
        return sphere;

 }

 mySpheres = {};
 mySpheres.models = [];
 mySpheres.materials = [];

 for(i = 1; i <= 3; i++){       
        var randomnumber1 = Math.floor(Math.random() * (29.5 - -29.5 + 1)) + -29.5;
        var randomnumber2 = Math.floor(Math.random() * (29.5 - -29.5 + 1)) + -29.5;

        var obj = createSphere(randomnumber1, 3, randomnumber2); // 
        var id = obj.id; // or whartever (redone,barrack,donald,george)
        mySpheres.models[id] = obj;
        mySpheres.materials.push(obj.material);
 }


    //after that you can do 
    mySpheres.models['donald'].translateX(10); 
    //or 
    mySpheres.models['george'].material.opacity = 0.5;
    //or
    mySpheres.materials.forEach(function(m) {
         m.opacity = 0.5;
    });

Is there a way to manipulate each object that I create in Three.js?

Answer №1

Answer №2

Similar questions

What is the process for accessing the theme spacing unit in MUI 5?

Using JavaScript to Transmit URL

Issue with decompressing the identical data using zlib (Z_BUF_ERROR)

Using v-model with the Toast-UI editor in Vue.js adds a dynamic and

Angular 6 is experiencing an issue with the functionality of the file toggle JS

Any suggestions for resolving issues with tipsy, SVG, and CSS on Firefox?

Restrict the size of AJAX response

"Encountering issues with ModalPopupExtender in Internet Explorer, while it functions properly in

Having trouble with npm and unable to find a solution that works. Any suggestions on how to fix it?

Combining D3 and D3plus in an Angular web application: A complete guide

What is the process for transferring an object to a different file?

What is the process for inserting a document into an array that is nested within another array?

What is the best method for importing gltf files in three.js?

Obtain the form value upon submission without the need to reload the page

Problem with reordering rows in a PHP DataTable

Utilize dropdown1 to dynamically populate dropdown 2 in AngularJS

What is the best way to display changing session variables in PHP?

Creating a dynamic video progress bar using three.js: A step-by-step guide

It seems that the `to` required prop was missing in the `Link` component of React-Router

Adjust the width of the div by dragging one of its edges