Getting Issues with GLB model loading on Nextjs 13 app #6451
Replies: 1 comment
-
I wanted to share the solution to the issue I previously posted about loading a GLB model in a Next.js 13 TypeScript React Three Fiber app deployed on Netlify. The problem was related to the Solution:
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Summary
Hello everyone,
I'm encountering an issue with loading a GLB model in my Next.js 13 TypeScript React Three Fiber app deployed on Netlify. I've tried various approaches, but I haven't been able to resolve the problem. I would greatly appreciate any insights or suggestions from the community.
Problem Description:
After a successful build on Netlify, I'm getting the following error:
Application error: a client-side exception has occurred (see the browser console for more information).
In the browser console, I see this error message:
Error: Could not load /model/Puzzle2.glb: Unexpected token 'v', "version ht"... is not valid JSON
The error suggests that there is an issue with loading the
Puzzle2.glb
model file.Project Setup:
Folder Structure:
components
├── 3D
│ └── Environment.tsx
public
└── model
└── Puzzle2.glb
Relevant Code:
Attempted Solutions:
Updated the next.config.js file to handle GLB files using file-loader and url-loader.
Ensured the file path is correct and the Puzzle2.glb file exists in the public/model/ directory.
Tried using the useGLTF hook from @react-three/drei instead of useLoader and GLTFLoader.
Unfortunately, none of these approaches have resolved the issue. The error persists, and I'm unable to load the GLB model successfully.
I would greatly appreciate any suggestions, workarounds, or insights into what might be causing this issue and how to resolve it. If you need any additional information or code snippets, please let me know.
Thank you in advance for your help!
Example
https://legalizart-bzy5pp2qu-gmls-projects-c72abf6c.vercel.app/
Steps to Reproduce
https://legalizart-bzy5pp2qu-gmls-projects-c72abf6c.vercel.app/
Beta Was this translation helpful? Give feedback.
All reactions