An easy to use viewer to display 3D models in the browser.
npm install js-3d-model-viewerA web viewer to display 3D models in the browser.
Get this library as a dependency:
``bash`
npm install js-3d-model-viewer
Then run this snippet after the HTML of your page is loaded:
`javascript`
import modelPlayer from 'js-3d-model-viewer'
const viewerElement = document.getElementById('viewer')
const opts = {
grid: true,
trackball: false,
background: 'rgb(100, 100, 100)'
}
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:
`javascript`
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()
* Currently the viewer supports only .obj and .glb files.
* Unit tests are missing
This viewer is based on Three.js
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 build
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.
* 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
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.
