Skip to content
šŸŽ® Turns GLTF's into JSX components
JavaScript Other
Branch: master
Clone or download
Latest commit 08ff20c Feb 11, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin fix draco node bug Feb 10, 2020
example update example Feb 9, 2020
.gitignore first draft Sep 24, 2019
.npmignore new options Feb 3, 2020
LICENSE first draft Sep 24, 2019
Scene.js fix buffer bug Dec 12, 2019
gltfjsx.js better logs Feb 11, 2020
index.js better logs Feb 11, 2020
package.json 1.0.10 Feb 11, 2020
readme.md Update readme.md Feb 10, 2020
whatsnew.md Update whatsnew.md Feb 6, 2020
yarn.lock use shorter var names, add extras Feb 9, 2020

readme.md

This is an experimental tool that turns GLTF files into re-usable react-three-fiber (>=4.0.13) JSX components.

The usual GLTF workflow yields a static blob that you drop into the scene, this makes dynamic modifications cumbersome since objects can only be found back by traversal. With gltfjsx the full graph is under your control, you can add shadows, events, bind materials to state, make contents conditional, remove or swap out parts, change parent-child relations, etc.

See it in action here: https://twitter.com/0xca0a/status/1224335000755146753

npx gltfjsx model.gltf [Model.js] [options]

Options:
  --draco, -d         Adds draco-Loader                   [boolean]
  --animation, -a     Extracts animation clips            [boolean]
  --compress, -c      Removes names and empty groups      [boolean]
  --precision, -p     Number of fractional digits         [number ] [default: 2]
  --help              Show help                           [boolean]
  --version           Show version number                 [boolean]

You need to be set up for asset loading and the GLTF has to be present in your /public folder. This tools loads it, creates look-up tables of all the objects and materials inside, and writes out a JSX graph, which you can now alter comfortably.

A typical result will look like this:

/*
auto-generated by: https://github.com/react-spring/gltfjsx
author: abcdef (https://sketchfab.com/abcdef)
license: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
source: https://sketchfab.com/models/...
title: Model
*/

import React  from 'react'
import { useLoader } from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
  
function Model(props) {
  const { nodes, materials } = useLoader(GLTFLoader, '/model.gltf')
  return (
    <group {...props} dispose={null}>
      <group name="Camera" position={[10, 0, 50]} rotation={[Math.PI / 2, 0, 0]} >
        <primitive object={nodes.Camera_Orientation} />
      </group>
      <group name="Sun" position={[100, 50, 100]} rotation={[-Math.PI / 2, 0, 0]} >
        <primitive object={nodes.Sun_Orientation} />
      </group>
      <group name="Cube" >
        <mesh material={materials.base} geometry={nodes.Cube_003_0.geometry} />
        <mesh material={materials.inner} geometry={nodes.Cube_003_1.geometry} />
      </group>
    </group>
  )
}

This component is async and must be wrapped into <Suspense> for fallbacks:

import React, { Suspense } from 'react'

<Suspense fallback={null}>
  <Model />
</Suspense>

--draco

Adds a DRACOLoader, for which you need to be set up. The necessary files have to exist in your /public folder. It defaults to /draco-gltf/ which should contain dracos gltf decoder.

It will then extend the loader-section:

const gltf = useLoader(GLTFLoader, '/stork.glb', loader => {
  const dracoLoader = new DRACOLoader()
  dracoLoader.setDecoderPath('/draco-gltf/')
  loader.setDRACOLoader(dracoLoader)
})

--animation

If your GLTF contains animations it will add a THREE.AnimationMixer to your component and extract the clips:

const actions = useRef()
const [mixer] = useState(() => new THREE.AnimationMixer())
useFrame((state, delta) => mixer.update(delta))
useEffect(() => {
  actions.current = { storkFly_B_: mixer.clipAction(gltf.animations[0]) }
  return () => gltf.animations.forEach(clip => mixer.uncacheClip(clip))
}, [])

If you want to play an animation you can do so at any time:

<mesh onClick={e => actions.current.storkFly_B_.play()} />

1.x release notes and breaking changes

https://github.com/react-spring/gltfjsx/blob/master/whatsnew.md

You canā€™t perform that action at this time.