How to build an e-commerce try out gallery

Questions
1

Hello, im a new-bie to threejs. I’m actually looking for some hints on how to build logic for switching up and appending different parts of a 3D e.g like changing up the arms and legs and seats of a chair. You change the different kinds of handles and designs, adding and detaching elements to the model. What should l do about this?

2

Maybe the easiest way is to load all the different options as separate models at once and use the visible property to only show the ones selelected.

But if you want to use many options you could consider loading models when the user chose it, like in this example . You can for example use a group object as parent for an option, and clear any child objects when present before loading a new model and then add it to this group object. Also in this setup, each option will be a separate 3d model.

3

How can l find the source code for this particular project. In my mind l was thinking of referencing to the elemen to be changed using the ThreeJS DOM, then swap it out using visibility properties. The problems arises on how to load the model and make it hidden an if that will not impact the performance

4

You could use one of the model loaders, like in this example for GLTF

new GLTFLoader()
					.setPath( 'models/gltf/' )
					.load( 'SheenChair.glb', function ( gltf ) {
						scene.add( gltf.scene );
						object = gltf.scene;
					} );

If you load the parts (options) as individual models with this code you can set the ‘visible’ property of ‘object’. Otherwise you will have to iterate through the children of ‘object’, look for the meshes, and hide or show them.
The performance of course depends on the size of your models.

5

Okay thats a good idea, im trying to work that out


const CHILD_OBJECTS = [
    "back","base","cushions","legs","supports",
  ];

function removeObjects(parent, element) {

    parent.traverse((o) => {

     if (o.isMesh) {

       if (o.name === element) {

          console.log('element exists',element) // runs a call to remove the legs

          o.visible = "false"

         }

     }

   });

}

  for (let object of CHILD_OBJECTS) {
        removeObjects(theModel, object);
      }

where am l going wrong?
6 
o.visible = false

?

7

i’m trying to turn visibility for the object off

8

Yea, but the property is not string but boolean

9

Yes, I realised this moments after making the error, my code now looks like:

function removeCupObjects(replace) {

  replace.traverse((o) => {

    if (o.isMesh) {

      o.visible = true;

    }

  });

}

function removeChairObjects(parent, replace, element) {

  parent.traverse((o) => {

    if (o.isMesh) {

      if (o.name === "cushions") {

        const x_pos = o.position.x;

        const y_pos = o.position.y;

        const z_pos = o.position.z;

        // replace.position.x = x_pos;

        // replace.position.y = y_pos;

        // replace.position.z = z_pos;

        // replace.visible = true

        // replace.traverse((r) => {

        //     if(r.isMesh) {

        //         if(r.name === "saucer") {

        //             r.visible = true

        //         }              

        //     }

        // });

        console.log("element exists", element); // runs a call to remove the legs

        o.visible = false;

      }

    }

  });

}

So basically I’m trying to swap out the parts per each object with other ones by setting visibility true or false and managing the positioning as well. Code is very woggly for now , but this should be called with eventListeners later…

Any thoughts?