Skip to main content

3D in Web Showcase using Google Model Viewer

Google's Model Viewer is a web component that lets you embed interactive 3D models directly into any webpage — no complex code or 3D expertise required. It supports augmented reality, camera controls, animations, model variants, and annotations out of the box.

Key Features
  • Simple Embedding — Model Viewer works like an HTML tag. With a few lines of code you get a fully interactive 3D experience.
  • Augmented Reality (AR) — Users can view 3D models in their real-world environment through supported devices, perfect for e-commerce product previews.
  • Interactive & Responsive — Built-in camera controls (zoom, rotate, pan) that work across all modern devices and browsers.
  • Customization — Add auto-rotation, custom camera angles, annotations, and material/variant switching to tailor the experience.
Shopify Integration

Shopify uses Google Model Viewer by default to display 3D models on product pages. This allows merchants to provide an immersive shopping experience where customers can explore products in 3D directly in their browser, or place them in their own space via AR.

Shopify's built-in support makes it easy for store owners to upload and showcase 3D models, enhancing product visualization and customer engagement without any custom development.

Interaction via Annotations

Annotations are clickable. Click "Open" to animate the pods, then explore left and right views.

Model Description with Annotations

Click an annotation to zoom in and read a description of that part of the guitar.

Interaction via Buttons

Use the buttons to animate the drone folding and unfolding its arms.

Model Configuration

Switch color variants, change camera views, and toggle laces visibility.

Variants

View

Configuration

Augmented Reality (AR)

View 3D models placed in your real-world environment. Works on mobile devices with ARCore or ARKit support.

Wall Placement

Attach a 3D model to a wall surface in AR. Useful for artwork, signage, or wall decor.

Floor Placement

Place a 3D model on the floor in AR. Useful for furniture, sculptures, or any floor-standing item.