How to use baked textures with gltfjsx loader

[xzilja]

Hey 👋

I am following course over at https://threejs-journey.xyz and one of the chapters showcases how to use baked textures to achieve realistic lighting and shadows.

I went ahead and created my .glb model as per this course, main points here are that it doesn't include any materials, only uv maps. I ran this model through gltfjsx and it generated following output

Generated jsx code and it's preview

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import { useGLTF } from '@react-three/drei'
import { useRef } from 'react'
import type { Group } from 'three'
import type { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'

interface IResult extends GLTF {
  nodes: {
    ['mergedBlocks(Clone)']: THREE.Mesh
  }
  materials: {}
}

export default function Model(props: JSX.IntrinsicElements['group']) {
  const group = useRef<Group>()
  const { nodes } = useGLTF('/level_0.glb') as IResult

  return (
    <group ref={group} {...props} dispose={null}>
      <mesh
        castShadow
        receiveShadow
        geometry={nodes['mergedBlocks(Clone)'].geometry}
        material={nodes['mergedBlocks(Clone)'].material}
      />
    </group>
  )
}

useGLTF.preload('/level_0.glb')

This looks great in my app that has basic canvas setup (ambient light, and point light)

Trying to add baked texture

Now comes the issue, I have my texture as a .jpg file, so I wanted to start simple and instead of using material from gltf loader, define my own one so I can latter apply my texture to it as a map. First I removed material prop from mesh and created basic red color one, I was expecting my model to turn red instead of white like above

<mesh geometry={nodes['mergedBlocks(Clone)'].geometry} />
    <meshBasicMaterial color="red" />
</mesh>

But when I refreshed model was completely black, like its not receiving any light. And this is where I am stuck now and would appreciate some help, mainly on how I can define my own custom meshBasicMaterial in this scenario.

[drcmda]

gltfjsx just extracts structure, it doesn't change the gltf or influence what it contains. the texture is either part of the glb or external. you need to apply it in blender or in threejs via the map property.

you can see a finished version of that particular scene here https://codesandbox.io/s/threejs-journey-ni6v4 (with a external texture)

But when I refreshed model was completely black, like its not receiving any light.

meshbasicmaterial doesnt need light. it must be red. have you refreshed to make sure its not some hot-reload screw-up?

[xzilja]

ty for example, helped to figure it out 👍

[ggomaeng]

could you share the code if you don't mind? I don't understand where the {nodes.baked.geometry} came from :<

[ggomaeng]

I reviewed the lesson and figured out :D thanks

[alxgeoaln]

hey guys, i still don't understand where baked property comes from. in three.js all object are in place but in r3f they are all over the place.

@iljadaderko @ggomaeng