3d car model with selectable elements

Questions
, , , ,
1

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

2

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).

3

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?

4

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
5

Excellent, thank you

6

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

7

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:

8

Excellent, thanks @Mugen87

9

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.

10

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
11

Thanks again, I’ll take a look

12

Cool, that makes sense cheers

13

Hi skipper, did you have any luck creating what you intended? I’m currently looking to do the exact same, so any help would be greatly appreciated! Perhaps you have an example code or the likes. Besides what you mentioned, I would like to have an index of the different part, which would correspond to what you select on the 2d model, and vice versa. Preferably with the ability to select multiple at the same time :smiley: Thanks and have a great day!
-Lau