3d car model with selectable elements

Hi, I’m looking to create a 3d 5 door car model that the user can select in the browser and rotate and select areas of the car individually like the door, wheel etc. I was wondering where best to start. I’m looking at the threejs editor at the moment. Many thanks for any comments

Are you going to design the car from scratch? If so, a DCC tool like Blender is the better choice than the three.js editor (which is in essence a scene editor and not a modeling tool).

Thanks Mugen. Yes, I’m aiming to make the car myself, fairly basic. If that fails then possibly buy a model. I’m assuming to export as an obj from Blender to three.js at this stage?

I’m assuming to export as an obj from Blender to three.js at this stage?

We actually do not recommend using OBJ. Instead, please focus on glTF. Blender 2.8 has a built-in glTF importer/exporter. More information about loading 3D models in three.js right here:

https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models

1 Like

Excellent, thank you

Taking a step back, I need to do a test with a basic cube. If I export a cube as a glTF, how would I then import this into a web page and then allow the user to rotate and select the faces individually? Thank you for any tips

You would do this similar to the official glTF example. Meaning you use GLTFLoader in order to load the model and OrbitControls for the camera controls.

This will be a bit more complicated since you need raycasting for this. You can use the following example as a code template.

https://threejs.org/examples/webgl_interactive_cubes

However, it highlights the entire mesh. Check out this thread at stackoverflow for face selection:

Excellent, thanks @Mugen87

I have a mockup model of a car which I have exported to a glTF. How can I group elements in Blender like the wheels so they appear separately in the JSON code? I have created Vertex Groups but they don’t seem to appear named in the code.

TBH, I’m not very good at modeling^^. But I would just treat them as separate meshes and group them via a child/parent relationship.

https://docs.blender.org/manual/en/latest/scene_layout/object/properties/relations/parents.html

When modeling a complex object, such as a watch, you may choose to model the different parts as separate objects. However, all of the parts may be attached to each other. In these cases, you want to designate one object as the parent of all the children. Movement, rotation or scaling of the parent also affects the children.

2 Likes

Thanks again, I’ll take a look

Cool, that makes sense cheers