Scene Viewer is an immersive viewer that enables AR experiences from your website. It lets Android mobile device users easily place, view, and interact with web-hosted 3D models in their environment.
To do this, all a user needs is an Android device that has ARCore 1.9 or later. Most Android browsers are supported, and no programmatic integration with a browser is necessary -- only properly-formatted links on a web page.
<model-viewer> to launch Scene Viewer
You can enable Scene Viewer from your website by including the
<model-viewer> web component with the
<model-viewer ar alt="A 3D model of an astronaut." src="Astronaut.gltf"></model-viewer>
File requirements for models
Scene Viewer has the following support and limitations for models.
|File format support||
|Shadow support||Hard shadows are automatically rendered by Scene Viewer when placing an object, so we recommend against baking shadows into your model.|
How do users experience Scene Viewer?
When viewed an ARCore-supported Android device, a website that includes the
<model-viewer> component with the
ar attribute looks like this example:
The user would follow these steps to insert and interact with the web-based 3D model in their environment.
The user taps the View in AR button. This opens Scene Viewer, with the model centered on the screen and slowly turning in place.
The user can drag around the model to rotate it, or pinch and spread it to resize it.
The user taps View in your space. This switches the view to the live camera feed. The UI asks the user to move the device around to detect feature points and planes.
After determining a horizontal surface in the user's space, ARCore places the model on that surface. The size of the model is determined by the glTF file, and is clamped to a range between 0.25 and 6 meters, inclusive. In other words, if the value falls outside the required range, it will snap to the closest minimum or maximum value within that range.
Just as the user could do in the
<model-viewer>and Scene Viewer views, they can rotate, reposition, and resize the model.
As the user resizes the model, the percentage of its size relative to the actual size is displayed.
If the user wants to exit fullscreen, they can tap the X in the top left of the live camera view.