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!
Source: stackoverflow.com
Related Query
- Webpack error while loading module DomUtils after import enzyme
- Create React App Error - Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'node:vm'
- Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in the package.json of a module in node_modules
- Service mocked with Jest causes "The module factory of jest.mock() is not allowed to reference any out-of-scope variables" error
- ERROR in Cannot find module 'babel-core'. using react.js, webpack, and express server
- How to fix error "Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)"
- How to fix this error : " Module not found :can't resolve popper.js "
- A module cannot have multiple default exports
- create-react-app starting error - Error: No valid exports main found for '\node_modules\colorette'
- Loading font native-base error
- Bundle error using webpack for Electron application `Cannot resolve module 'electron'`
- React Native Error Cannot find module 'metro-config/src/defaults/blacklist'
- How to fix Next.js Vercel deployment module not found error
- Dealing with "Failed to load plugin 'react' declared in '.eslintrc': Cannot find module 'eslint-plugin-react'" ESLint error
- Tailwind in React project - getting "Cannot find module 'autoprefixer'" error during setup
- Module not found Error when deployed on Heroku
- Error after update: Cannot resolve module 'react/lib/ReactMount'
- Cannot find module '../request' error using mock in Jest
- React-native bundling failure. ERROR MESSAGE: "While trying to resolve module 'idb'..... Indeed none of these files exist":
- React build issue, ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js):
- Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function
- React 16.14.0: Error was not caught ReferenceError: exports is not defined
- Webpack 5 module federation missing chunk when dynamically loading remote module
- React components and module exports
- How to fix React Native error "jest-haste-map: Haste module naming collision"?
- Requiring unknown module "498" error in ReactNative getting started example
- Firebase-Admin, importing it to react application throws Module not found error
- react-scripts start error (Cannot find module '../scripts/start') - how can i fix this?
- react native sudden Unable to resolve module `fs` error
- ERROR in ./index.js Module build failed: SyntaxError: Unexpected token
More Query from same tag
- How to mock a function with .then from a hook
- How to use routes in React?
- Cannot read property 'Tile' of undefined in ReactJS
- (React and Django) I am unable to delete an user from my userlist. (HTTP Status Code 404)
- Pushing data from React in array in MongoDB
- Can't using ReferenceInput in admin-on-rest
- Javascript event.target does not output as expected in ReactJs component
- TypeError: this.state.patients.map is not a function
- lodash remove method from an array React
- using react lazy in CRA with cssmodules causes chunks to have duplicate css in production
- How to get the new child element reactjs
- How to set object type props value in an enzyme for a react component?
- What is the correct pattern in React JS to invoke a component method on specific props change?
- React hooks in dynamic lists - more hooks than previous render
- Merging/grouping objects in ReactJS
- React - fetched data isn't displayed
- Why is my data that is coming from apollo server not showing up when I refresh the page?
- How to translate the following jQuery code to React?
- What is the smallest building block of ReactJS - Elements or Components?
- How to loop try data in JSX
- Limiting number of inputs
- Use props inside event handler
- Update State with record returned from API, after being updated
- Save images in S3 from React SPA with express backend
- How to play an uploaded video in django rest framework
- React Toggle Hook State
- React-Select Remove focus border
- Can't call setState inside socket.io callback React.js
- Setting state results in TypeError: this is undefined
- How to bind onchange event to a particular row's element?