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 modeltj.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.