ThreeJS to create 3D configurators in Realtime


I am a graphic artist and realise 3D models in real time on WebGL basis. Now I would like to program a configurator on my own like on the following website. What is the best way to start?


  1. It is hard.
  2. It is complex.
  3. It takes a lot of time, even for experienced developers.

If you don’t know programming at all - first learn Javascript (well, without using 3D.) If you know Javascript - learn state management (well, using React, frameworks or anything else.) If you know Javascript and state management - learn package bundlers (webpack / rollup.) If you know Javascript, state management, and bundlers - npm install three and it’s time for you to discover three.js.

Developing a product configurator requires a certain amount of user interface logic. However, depending on your requirements it’s not necessary to work with UI libraries like React or Vue. You can implement basic stuff with plain JS and thus avoid over-engineering with all its evil consequences. If you are new to three.js, I suggest to implement the configuration workflow without a 3D engine first and use placeholders for the visualization instead (e.g. images). When the workflow feels good, you can implement a 3D view in the next step.


True, I meant it only as a state-management, React doesn’t necessarily enforce JSX or any specific UI stuff.