Working with GLTF models in React.js: Build a product customizer with react-three-fiber
Import GLTF model into React.js to build a product customizer with react-three-fiber. GLTF files can be exported from blender.
Intro (00:0:00)
Project setup (00:3:04)
Test react-three-fiber by rendering simple cube (00:7:39)
Add CSS and HTML markup (00:10:33)
Load GLTF format file and generate React code using gltfjsx (00:16:11)
Render shoe model with orbital controls and lighting, change color manually (00:25:23)
Wire up color picker to dynamically change color (00:34:25)
Use GLTF model for shoe from here : https://github.com/ui-code-tv/3d-shoe...
(original model was from repo https://github.com/drcmda/floating-sh...)
CSS and Markup : https://codepen.io/ui-code-tv/pen/PoO...
Code : https://github.com/ui-code-tv/3d-shoe...