Javascript 3D Model Viewer
A web viewer to display 3D models in the browser.
How to run
Get this library as a dependency:
npm install js-3d-model-viewerThen run this snippet after the HTML of your page is loaded:
import modelPlayer from 'js-3d-model-viewer'
const viewerElement = document.getElementById('viewer')
const opts = {
grid: true,
trackball: false
}
const scene = modelPlayer.prepareScene(viewerElement, opts)
modelPlayer.loadObject(scene, './assets/sample.obj') // Urls are fine here.
// Alternatively you can load a .glb file
modelPlayer.loadGlb(scene, './assets/sample.glb') // Urls are fine here.You're done!
If you want to go fullscreen, you can do it like this:
const viewerElement = document.getElementById('viewer')
const fullScreenButton = document.getElementById('fullscreen-button')
fullScreenButton.addEventListener('click', () => {
modelPlayer.goFullScreen(viewerElement)
})If you want to enable the underlying Thee.js cache:
modelPlayer.enableCache()
// modelPlayer.disableCache()
Development status
- Currently the viewer supports only
.objand.glbfiles. - Unit tests are missing
Technologies
This viewer is based on Three.js
Development environment
First install dependencies:
npm i
All the code is in the src/index.js file. Once you did your changes you have to run the dev build:
npm run dev
Then you can test it with the demo page by starting a static webserver:
npm run serve
You can see the result in the browser by connecting to http://localhost:9080.
To build the projects for production you have to run the following command:
npm run build
You will obtained a minified version of the sources in the dist folder.
Resources
- Tutorial: https://manu.ninja/webgl-3d-model-viewer-using-three-js/
- Obj loader: https://threejs.org/docs/#examples/loaders/OBJLoader
- Sketchfab viewer: https://sketchfab.com/developers/viewer
About authors
This viewer is written by CG Wire, a company based in France. We help animations studios to manage their production and build pipeline efficiently.
We apply software craftmanship principles as much as possible. We love coding and consider that strong quality and good developer experience matter a lot. Our extensive experience allows studios to get better at doing software and focus more on the artistic work.
Visit cg-wire.com for more information.
