Google releases tool to easily insert 3D models into webpages
News / Software
26. January 2023
News / Software
26. January 2023
Google released a Javascript library called <model-viewer> that allows you to easily include 3d models into webpages. It’s as simple as adding an include to the library to the head of the page and then you can use it like any html element. You can even add hdri environments to light you model.
This works with glTF/GLB models, and there are even AR capabilities, If you open this page not in a desktop browser but on your phone you can put the suit in your environment (see phone screenshot). Only Webkit browsers are supported, Firefox does not work.
You can find all details on the project page.
It is actually dead easy, I included the model below using the example code in under a minute (the model ist 8 MB it may take some time to load for you depending on your online speed). Of course as with all Google projects you have to be careful considering that they may end it any day, like they did with other projects. So you maybe want to download the library instead of linking to the script.
The example code looks like this:
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" src="shared-assets/models/NeilArmstrong.glb" ar environment-image="shared-assets/environments/moon_1k.hdr" poster="shared-assets/models/NeilArmstrong.webp" shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>
By continuing to use the site, you agree to the use of cookies. more information
The cookie settings on this website are set to "allow" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this. If you allow it, cookies from third party pages as Google or Amazon may be set. If you do not want that, don't click on "allow" and stop using the page, switch your browser to incognito mode or use anti-tracking extensions in your browser
When and if clicking on "allow" you also consent to the activation of external hosted javascripts that may transmit further information about you (for example the IP address) to third parties. Details about those informations can only be acquired from those third parties (jQuery, Google, Youtube, Twitter if applicable). If you do not want that, please do not click on "allow" and stop using this site.
If you want to protect your identity online, use browser plugins as uBlock Origin, AdBlock or ScriptBlock, so you can allow or disallow scripting and tracking on a more granular basis.