<model-viewer>

How to use <model-viewer>

To use <model-viewer>, you need to follow these steps:

1. First, include the <model-viewer> component script in your HTML file by adding the following line to your HTML header:

<script type="module" src="https://cdn.jsdelivr.net/npm/@google/model[email protected]/dist/model-viewer.min.js"></script>

1. Next, add the <model-viewer> tag to your HTML code and define the source of the 3D model you want to display, for example:

<model-viewer src="path/to/your/model.glb"></model-viewer>

You can also specify some additional attributes such as the camera position, background color or lighting conditions.

1. Once you have added the <model-viewer> element to your HTML, you can customize it with CSS styles to adjust its appearance, size, and layout as needed.

2. Finally, test your <model-viewer> component in a browser that supports WebGL, such as Chrome or Firefox. You should be able to interact with the 3D model using mouse or touch gestures, zooming in or out, and even viewing the model in AR mode on mobile devices that support it.

Note that <model-viewer> is a powerful web component that allows you to do more than just display static 3D models. You can also create animations, set up hotspots that trigger events, and integrate with other web technologies such as WebXR or A-Frame. Check out the official <model-viewer> documentation and examples for more details and inspiration.