Three JS - Build a car

Questions
1

Hey there!

I’ve been tasked with creating a puzzle where people can put together a 3D car. There will be 8 pieces that can be placed together to make the final car.

At the minute I’m importing one model with everything in, including background and the car (fully assemble). I’m not sure if this is the best way to go but it’s where I have started. I’ve disassembled one part of the car by hard coding (testing) it’s position away from the main part of the car. I’ve now hooked up THREE.DragControls but each individual item is being moved instead of the collection of objects.

If you look at the console output (from game.js line 74) you will see the items that I would like to be able to drag and move around.

You’ll see in various bits of commented out code that I have tried a few things, but no luck so far.

My other challenge is the dragging of the pieces into position and slotting the pieces together. If anybody has any suggestions I would greatly appreciate it. Alternatively, if anyone know’s of a website that achieves something similar I would love to check it out.

I have a public repo accessible here for the code.

2

You have this in your code:

  world.children[5].traverse(function(object) {
      if (object.isMesh) {
        objects.push(object);
      }
    });

Are you aware that Object3D.traverse() is deep? It seems you want to iterate just over the children of world.children[5]. If so, use a simple for loop.

Besides, instead of writing code like world.children[5].children[7], consider to select a 3D object like so:

const roof = world.getObjectByName( 'Roof' );
1 Like
3

Hi There

Thanks for the response.

Yep, I understand the function of traverse. However, if I don’t use it I seem to have quick a hard time getting objects to drag with DragControls.

I’ve been talking to our 3D modeller and we’re going try merging the meshes in blender. I’ll report back if this fixes things.

Thanks for the tip, I agree it makes the code nicer but I’m more of a make it work and clean it later kinda guy :wink:

4

That makes sense. Otherwise you would have to group related elements manually into invisible meshes or bounding volumes. Better to merge them with a DCC tool.