Integrating a 3D model into a website using Quick View for Android and iOS
Try it out: Rotate the 3D object below, or look at it in AR using your phone or even VR if a VR-glass is connected to your computer.
Augmented Reality became easier now, due to the release of a feature called ar webview (Quick View in iOS).
With just some lines of code it is possible to integrate 3D Objects into your websites, ready to interact in the website, mobile device with AR support (meaning you are able to place the objects into your room) and even Virtual Reality support. If you load this website on a computer with a VR-headset attached to it, it should show you an option to view this object in VR.
It even supports Magic Leap!
To load the necessary scripts just load the following Code into your section of the website:
<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> <!-- 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/@firstname.lastname@example.org/webcomponents-loader.js"></script> <!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 --> <script src="https://email@example.com/intersection-observer.js"></script> <!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers --> <script src="https://firstname.lastname@example.org/dist/ResizeObserver.js"></script> <!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary --> <!--<script src="https://email@example.com/dist/fullscreen.polyfill.js"></script>--> <!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support --> <!--<script src="https://unpkg.com/@firstname.lastname@example.org/prismatic.min.js"></script>-->
view raw3D Content with Webview hosted with ❤ by GitHub
After that, all you have to do is load the model with the following snippet and change the model to yours.
For demonstration purposes “Rocket Ship” by Google Poly is included.
Code was taken and altered from https://github.com/Kristina-Simakova/ar-webview
<model-viewer src="assets/RocketShip_1393.gltf" ios-src="assets/RocketShip_1393.usdz" ar auto-rotate camera-controls shadow-intensity="1" alt="A 3D model of a rocket" background-color="#70BCD1"> </model-viewer>
view raw3D Content with Webview - modelload hosted with ❤ by GitHub