Can not load GLTFLoader in nextjs application!

This is a bit more than a CodeSandbox, but feel free to take a look at a public repo I have…


A couple source files to pay particular attention to are:
ModelViewer.js - a component that displays the model
tj.js - several utility / convenience functions for Three.js

The ModelViewer component is loaded from pages/index.js.

Note, any next.js setup you see in _app.js or _document.js is not necessary for Three.js or model viewing. The setup in those files is for theming and snackbar user feedback.

In this project Three.js is included as an npm package.

By default, the app will display a model from a hardcoded url of a model I have stored in AWS S3. You can provide a URL to view other models using query params, e.g.: http://localhost:3000/?modelUrl=https://some_other_url/model.glb. Or you could also add a model to the project public folder, and load it from there.