score:3

well, i'm about 3 months late, but i hope this will solve any doubts in case anyone finds this question.

first of all you will need to import the glb render, your app doesn't currently know which glb file you're trying to render. something like this should do:

import mycustomrender from 'src/static/glb/an_awesome_bird.glb'

then, each time you instantiate the bird component, you will be able to pass it as a prop, as in

<bird
    key={i}
    position={[x, y, z]}
    rotation={[0, x > 0 ? math.pi : 0, 0]}
    speed={speed}
    factor={factor}
    url={mycustomrender}
/>

now, since you're using nextjs, that means you're currently using webpack to bundle your application.

the thing is, webpack doesn't know right from the start what a glb or gltf file is, you have to let this little module know how to behave when importing a file with said extension.

you can do that by updating the next.config.js file like this:

module.exports = withcss(withsass({
  webpack (config, options) {
    config.module.rules.push({
      test: /\.(glb|gltf)$/,
      use: {
        loader: 'file-loader',
      }
    })
    return config
  }
}))

this essentially means you're telling webpack "hey, if you see me importing any .gltf or .glb files, it means i want their path, so give me their url".

in case you don't have the file-loader for webpack installed, you can always do

npm install file-loader --save-dev

a few days ago i made this repo using the exact same stack:

https://github.com/franco-roura/react-game

(except i didn't use nextjs, so my next.config.js is actually webpack.config.js)

hope it helps you clearing any doubts!


Related Query

More Query from same tag