Skip to content

Material Picker

Working Example

<>

Description

Selecting between different embedded materials of a loaded GLTF.

  1. Created a small room model using Sweet Home 3D.
  2. Exported as OBJ
  3. Imported into Blender, scaled to .01, exported as glTF (.glb)
  4. Used GLTFJSX with the transform option to compress, optimize and create initial JSX to work from.
  5. Exported the Armchair from Sweet Home 3D (Selection Only) as OBJ
  6. Imported into Blender.
  7. Created 5 different materials using some Poly haven textures.
  8. Created some swatches of the materials so that materials are exported. Swatches are not loaded into the final scene, but the materials will be loaded into memory so that they can be swapped using the UI. See armchair.blend in GitHub repo.
  9. In Blender, created a UV map, using Cube Projection, to apply one of the textures. See armchair.blend in GitHub repo.
  10. Exported as glTF (.glb)
  11. Used GLTFJSX with the transform option to compress, optimize and create initial JSX to work from.
  12. Imported both Room and Armchair into scene. See code in Working Example.

Note that this example requires a good understanding of Blender to reproduce a similar model containing multiple usable embedded materials.

This example also uses a Drei HUD with an Orthographic camera for the Material Picker UI Overlay.
Sweet Home 3D sweethome3d.com
Poly Haven polyhaven.com/
Drei Hud github.com/pmndrs/drei
Drei OrthographicCamera github.com/pmndrs/drei

GitHub Branch

git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout materialPicker
npm install
npm start

Comments