The goal of this API is to make it easy to add 3D models to your webpages. The 3D Model Viewer is a web component that allows you to host the model on your site and provide an interactive way for users to explore the 3D model.
This “How-To” will demonstrate how to get started with the 3D model viewer as well as implement a few features including staging/environment configurations, CAD model interactivity, and AR support.
- Web Browser
- Node Package Manager (npm)
- HTML, CSS, JavaScript
You can use your own local web server or install Node.js.. If you install Node, run the following command to install serve:
npm install -g serve
Now you can clone this sample project.
git clone https://github.com/KiraCorbett/3d-model-viewer.git
End with an example of getting some data out of the system or using it for a little demo
"cd" to your project directory (or where you cloned this project.) Inside the cloned directory, run the serve command to start a local web server. You may have to run npx serve or npm run serve. You should get an indication that your server is running and you can now copy the link provided by your server to access your project.
Create a static webpage or open the existing example index.html file provided in this project. To support all browsers, you will need to add the following set of JavaScript files in order to use the in your .
<!-- Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>
Note: You may see some errors in your DevTools web console through your browser. Google notes this is expected until the API is fully released.
You can add more compatibility by pasting the following code into
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
<!-- REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js"></script>
<!-- OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/[email protected]/intersection-observer.js"></script>
<!-- OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/[email protected]/dist/ResizeObserver.js"></script>
<!-- OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/[email protected]/dist/fullscreen.polyfill.js"></script>-->
<!-- OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/[email protected]/prismatic.min.js"></script>-->
The 3D model viewer is similar to an html or
Let's take a look at our first CAD model in this project (the badger in the snowy scene.)
<model-viewer
src="/assets/badger/Badger.gltf"
alt="Badger">
</model-viewer>
All you need to do to display the badger is identify the source directory. Now, if you run your server with npm, you should see the badger display in your webpage.
Note about CAD models - The models utilize either a .gltf or .glb file. These files can usually be used interchangeably but they are required for the model viewer as it provides compatibility across devices and browsers.
- Camera control
- Background colors and environments
- Lighting effects
<model-viewer id="camera-orbit" camera-controls autoplay
src="/assets/badger/Badger.gltf"
background-color="#080808"
background-image="snowy_park.hdr"
shadow-intensity="1"
camera-orbit="-75deg 75deg 25m"
alt="Badger">
</model-viewer>
On supported devices, the arm ios-src, and other platform attributes can provide AR support.
<model-viewer id="camera-orbit" camera-controls autoplay
src="/assets/badger/Badger.gltf"
ar
ios-src
background-color="#080808"
background-image="snowy_park.hdr"
shadow-intensity="1"
camera-orbit="-75deg 75deg 25m"
alt="Badger">
</model-viewer>
Project adapted from Google's API 3D Model Viewer.