3D Model configurator using ThreeJS with Typescript over React
Budget: $30 – $250 USD
Our project will use GLTF format 3D models to be customized and saved/exported in GLTF but with the personalization done in this page.
This job is to create a “builder/configurator” that allows user to select a portion of the 3D that is being presented and customize colors and elements within the 3D as well as speed of animations.
It needs to be able to “select” an area in the wireframe and color it like this example (https://60bce1be4d9b8cf97364d5ff--elastic-visvesvaraya-271c29.netlify.app/) and for each frame, there’s this example (https://official-osorina.medium.com/creating-a-3d-configurator-with-nuxt-and-three-js-part-1-6d40da0209e0), this second example, they have a way of navigating the 3D’s elements but doesnt present all of them in a list.
We could add a “carrousel” under the 3D model (like below), where each blue box would represent the model to be changed. In the arrows, when clicking on it, it marks as selected (highlights it) and we can modify the color (with a colorpicker).
Here are some models we will use to test your application, we should be able to change the animation speed as well (see in the sketchfab.com they have the “Model inspector” where we can do some changes).
https://sketchfab.com/3d-models/great-white-shark-b67415aaa0bd450d865f9604dcdac244
https://sketchfab.com/3d-models/model-54a-caribbean-reef-shark-210302e0e0e74c36834fb00aaa14c7c2
https://sketchfab.com/3d-models/shiny-fish-e0bddbcafc5e48c097b40b4bada3811a
https://sketchfab.com/3d-models/tosakin-goldfish-b2f0681c1e2145bcb0289f03ed75ea37
Here are some open source projects you can use to build your work. We do require you build this project in TypeScript with React (https://blog.logrocket.com/using-typescript-with-react-tutorial-examples/), use “React.Component” as much as possible, your configurator will be copied in our Application as is and has to work (you must help us to plug your component in our app). Also, you must use Three.JS (https://threejs.org/examples/#webgl_animation_cloth) for your 3D code.
If the user closes the browser by mistake, his work has to be “recoverable”, perhaps use a browser caching to store their work.
When user is done, we need to export their work in GLTF format, generate a JPEG image from the GLTF
Configurator Ideas:
https://github.com/michaelgudzevskyi/3d-react-model-configurator
https://osorina.github.io/3d-headphones/
https://official-osorina.medium.com/building-a-3d-product-configurator-using-nuxt-and-three-js-part-2-fc960e19aa18
https://official-osorina.medium.com/creating-a-3d-configurator-with-nuxt-and-three-js-part-1-6d40da0209e0
https://codepen.io/Ni55aN/pen/QOPKVM
https://github.com/osorina/cup-demo
Summary of the work:
Create a configurator for 3D models
3D models will be loaded in the GLTF format
Customized 3D models need to be exported in the GLTF format
And can be re-loaded as a new model to be customized again with the new colors.
Select elements by either click on them or selecting from a carousel of pre-loaded elements
Update animation speed
Create component in Typescript with React and ThreeJS
Work performed by the user must be saved
==================
Refer to Word document attached, as you can see there's a lot of material and many open source apps out there, all we need is few tweaks
This job is to create a “builder/configurator” that allows user to select a portion of the 3D that is being presented and customize colors and elements within the 3D as well as speed of animations.
It needs to be able to “select” an area in the wireframe and color it like this example (https://60bce1be4d9b8cf97364d5ff--elastic-visvesvaraya-271c29.netlify.app/) and for each frame, there’s this example (https://official-osorina.medium.com/creating-a-3d-configurator-with-nuxt-and-three-js-part-1-6d40da0209e0), this second example, they have a way of navigating the 3D’s elements but doesnt present all of them in a list.
We could add a “carrousel” under the 3D model (like below), where each blue box would represent the model to be changed. In the arrows, when clicking on it, it marks as selected (highlights it) and we can modify the color (with a colorpicker).
Here are some models we will use to test your application, we should be able to change the animation speed as well (see in the sketchfab.com they have the “Model inspector” where we can do some changes).
https://sketchfab.com/3d-models/great-white-shark-b67415aaa0bd450d865f9604dcdac244
https://sketchfab.com/3d-models/model-54a-caribbean-reef-shark-210302e0e0e74c36834fb00aaa14c7c2
https://sketchfab.com/3d-models/shiny-fish-e0bddbcafc5e48c097b40b4bada3811a
https://sketchfab.com/3d-models/tosakin-goldfish-b2f0681c1e2145bcb0289f03ed75ea37
Here are some open source projects you can use to build your work. We do require you build this project in TypeScript with React (https://blog.logrocket.com/using-typescript-with-react-tutorial-examples/), use “React.Component” as much as possible, your configurator will be copied in our Application as is and has to work (you must help us to plug your component in our app). Also, you must use Three.JS (https://threejs.org/examples/#webgl_animation_cloth) for your 3D code.
If the user closes the browser by mistake, his work has to be “recoverable”, perhaps use a browser caching to store their work.
When user is done, we need to export their work in GLTF format, generate a JPEG image from the GLTF
Configurator Ideas:
https://github.com/michaelgudzevskyi/3d-react-model-configurator
https://osorina.github.io/3d-headphones/
https://official-osorina.medium.com/building-a-3d-product-configurator-using-nuxt-and-three-js-part-2-fc960e19aa18
https://official-osorina.medium.com/creating-a-3d-configurator-with-nuxt-and-three-js-part-1-6d40da0209e0
https://codepen.io/Ni55aN/pen/QOPKVM
https://github.com/osorina/cup-demo
Summary of the work:
Create a configurator for 3D models
3D models will be loaded in the GLTF format
Customized 3D models need to be exported in the GLTF format
And can be re-loaded as a new model to be customized again with the new colors.
Select elements by either click on them or selecting from a carousel of pre-loaded elements
Update animation speed
Create component in Typescript with React and ThreeJS
Work performed by the user must be saved
==================
Refer to Word document attached, as you can see there's a lot of material and many open source apps out there, all we need is few tweaks