GLTFJSX

Video Lecture

Section	Video Links
GLTFJSX : Part 1	SBCODE (Pay Per View)
GLTFJSX : Part 2	SBCODE (Pay Per View)

×

 (Pay Per View)

You can use PayPal to purchase a one time viewing of this video for $1.49 USD.

Pay Per View Terms

• One viewing session of this video will cost the equivalent of $1.49 USD in your currency.
• After successful purchase, the video will automatically start playing.
• You can pause, replay and go fullscreen as many times as needed in one single session for up to an hour.
• Do not refresh the browser since it will invalidate the session.
• If you want longer-term access to all videos, consider purchasing full access through Udemy or YouTube Memberships instead.
• This Pay Per View option does not permit downloading this video for later viewing or sharing.
• All videos are Copyright © 2019-2025 Sean Bradley, all rights reserved.

Description

GLTFJSX is a command line tool that will read through a glTF model, and extract its components into a JSX equivalent.

When each of the components of the model are referenced using JSX it makes it easier to turn the different components on or off or add even more interaction to each.

GLTFJSX is beneficial if your model is quite large and contains many child meshes, lights, materials, animations, etc., and you want to access those individual components within your code to add interactivity, or even only use parts of the original file.

GLTFJSX is not the only way to traverse a model and extract its components for individual use, but it does make it quick and easy to have the JSX automatically created for you.

Resources

The shoe model used in the lesson originally came from the pushmatrix glTF-Sample-Models repository at https://github.com/pushmatrix/glTF-Sample-Models/tree/master/2.0/MaterialsVariantsShoe.

Download shoe-draco.zip and save it into your projects ./public/models/ folder.

After downloading the file and saving it to the correct folder, we will create some JSX from it using the command,

npx gltfjsx ./public/models/shoe-draco.glb

Error

When using GLTFJSX, you may see the error,

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11118:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

You may have an older version cached. You can try to run the latest version using this command.

npx gltfjsx@latest ./public/models/shoe-draco.glb

./src/App.jsx

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Environment, ContactShadows } from '@react-three/drei'
import { Model } from './Shoe'

export default function App() {
  return (
    <Canvas shadows camera={{ position: [0, 0, 1.66] }}>
      <Environment preset="forest" />
      <Model />
      <ContactShadows position={[0, -0.8, 0]} color="#ffffff" />
      <OrbitControls autoRotate />
    </Canvas>
  )
}

./src/Shoe.jsx

import { useEffect, useState } from 'react'
import { useGLTF } from '@react-three/drei'
import { useControls } from 'leva'
import { Color } from 'three'

export function Model() {
  const [hovered, setHovered] = useState(false)
  const { nodes, materials } = useGLTF('/models/shoe-draco.glb')

  useEffect(() => {
    document.body.style.cursor = hovered ? 'pointer' : 'auto'
  }, [hovered])

  useControls('Shoe', () => {
    console.log('creating color pickers')

    // using forEach
    // const colorPickers = {}
    // Object.keys(materials).forEach((m) => {
    //   colorPickers[m] = {
    //     value: '#' + ((Math.random() * 0xffffff) << 0).toString(16).padStart(6, '0'),
    //     onChange: (v) => {
    //       materials[m].color = new Color(v)
    //     }
    //   }
    // })
    // return colorPickers

    // using reduce
    return Object.keys(materials).reduce(
      (acc, m) =>
        Object.assign(acc, {
          [m]: {
            value:
              '#' +
              ((Math.random() * 0xffffff) << 0).toString(16).padStart(6, '0'),
            onChange: (v) => {
              materials[m].color = new Color(v)
            },
          },
        }),
      {}
    )
  })

  // JSX of glTF created using the command
  // npx gltfjsx .\public\models\shoe-draco.glb

  return (
    <group
      dispose={null}
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
      onClick={(e) => {
        e.stopPropagation()
        document.getElementById('Shoe.' + e.object.material.name).focus()
      }}
    >
      <mesh geometry={nodes.shoe.geometry} material={materials.laces} />
      <mesh geometry={nodes.shoe_1.geometry} material={materials.mesh} />
      <mesh geometry={nodes.shoe_2.geometry} material={materials.caps} />
      <mesh geometry={nodes.shoe_3.geometry} material={materials.inner} />
      <mesh geometry={nodes.shoe_4.geometry} material={materials.sole} />
      <mesh geometry={nodes.shoe_5.geometry} material={materials.stripes} />
      <mesh geometry={nodes.shoe_6.geometry} material={materials.band} />
      <mesh geometry={nodes.shoe_7.geometry} material={materials.patch} />
    </group>
  )
}

useGLTF.preload('./models/shoe-draco.glb')

Compression

Another benefit of the GLTFJSX tool is that it can compress a large glTF file quickly and effectively. Use the -T option. E.g.,

npx gltfjsx ./my-very-large-gltf-file.glb -T

This will compress the geometry and textures using various algorithms. I used this tool to compress the house model from my House example from 9Mb to 1.5Mb.

Troubleshooting

Error : ENOENT: no such file or directory, lstat

When running npx commands, you may get an error stating that it cannot find lstat.

Open a command/bash/powershell prompt and run

npm install -g npm

Working Example

<>

Useful Links

GLTFJSX (Working Example)	sbedit.net
GLTFJSX	github.com/pmndrs
glTF Sample Models	github.com/pushmatrix
R3F Shoe Configurator	codesandbox.io
Online GLTFJSX Tool	gltf.pmnd.rs

GitHub Branch

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