glTF Model (.glb) loaded has no colour

[sumanthyedoti]

The way I loaded the .glb file is:

const model = gltf.scene.children[0] || gltf.scene || gltf.scenes[0]
scene.current.add(model)

Is this the problem with the way it is loaded or with the model itself? Am I missing textures? But I had loaded Littlest Tokyo model perfectly, this way.

Also, I had seen models loaded as JSX (children/objects in a scene). But how is it possible to construct a huge dynamic scene again with JSX.

Thanks.

Extended:

import model from '../../resources/gltf/sample.glb'

function Model(props) {
  const scene = useRef()
  const gltf = useLoader(GLTFLoader, model, (loader) => {
    const dracoLoader = new DRACOLoader()
    dracoLoader.decoderPath = '/draco-gltf/'
    loader.setDRACOLoader(dracoLoader)
  })
  useEffect(() => {
    const model = gltf.scene.children[0] || gltf.scene || gltf.scenes[0]
    scene.current.add(model)
  }, [gltf])

  return (
    <group ref={group} {...props}>
      <scene name="AuxScene" ref={scene} />
    </group>
  )
}

[drcmda]

function Model(props) {
  const { scene } = useLoader(GLTFLoader, model, ...)
  return <primitive object={scene} dispose={null} />
}

that's all you need @sumanthyedoti , you never should have to add/remove stuff imperatively, this is against react. useloader uses suspense, by the time you fetch the result it's guaranteed to be there. how your gltf looks has to do with materials, this is not related to r3f or the gltfloader (useloader is a simple wrap for new GLTFLoader().load(url, ...).

looks like your lights are either too bright, or missing, or you dont have colors in the gltf.

[drcmda]

btw check out https://github.com/react-spring/gltfjsx it lets you lay out gltfs declaratively

[sumanthyedoti]

Thanks for suggesting an easier, better way @drcmda. As you said, the lights we too bright.

[krjk333]

can it make for mobile application using react native? @sumanthyedoti @drcmda

[drcmda]

yes, but loaders in that case have to come from expo, they publish their own because threes are bound to the web (using xhrrequests and things like that).