3D Product Customizations

This a basic sample project to build a product demo with ability to customize for users. I use a free 3D model I found on sketchfab.

The original 3D model only comes with one color, but we’re gonna change that:

First I downloaded the 3D model as .blend file and export it to .glb file. (there’s an option to download as .gltf, however it wasn’t bundled in a signle file, it came with .bin file which cannot be convert to jsx component which I need)

I used this tool to convert the gltf file to jsx component. The end result is a jsx component that breaks down elements that I need:

const { nodes, materials } = useGLTF('/car.glb')

In the render function, all meshes references its materials something like this:

<mesh castShadow receiveShadow geometry={nodes.piece_5004.geometry}
material={materials["body.color"]} />

Next, I need a controllers that can gather inputs from user. I used tweakpane for its robust and quick setting up.

const state = useTweaks(
  {
    color: {
      value: '#cc3100',
      label: 'Body',
    },
    accent: {
      value: '#000000',
      label: 'Accent',
    },
    plastic: {
      value: '#242424',
      label: 'Plastic',
    },
    exhaust: {
      value: '#b3b3b3',
      label: 'Exhaust',
    },
  },
  {
    title: 'Car Customizations',
  }
)

Then hooked up the state from inputs into my model component:

materials['body.color'].color.set(props.state.color)

Demo | Source Code

Credits: 3D Model “Lada Niva” by Veisun is licensed under Creative Commons Attribution