Embedding 3D on the Web

Google's Model Viewer

The easiest way to embed 3D on web:

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer
  src="your-model.glb"
  alt="3D Model"
  auto-rotate
  camera-controls
></model-viewer>

Features

• Works on all browsers
• AR support on mobile
• No coding required
• Responsive design

Sketchfab

Upload and share platform:

• Export GLB from editor
• Upload to Sketchfab
• Get embed code
• Paste on any website

Advantages

• Social features
• Analytics
• VR support
• Community exposure

Three.js (Advanced)

For full control, use Three.js:

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => {
  scene.add(gltf.scene);
});

When to Use

• Custom interactions
• Animations
• Multiple models
• Complex scenes

Optimization Tips

For web embedding:

• Compress GLB - Use tools like gltf-transform
• Reduce textures - Max 2048px, prefer 1024px
• Draco compression - Smaller file sizes
• Level of Detail - Simpler versions for mobile

Quick Embed Workflow

• Export GLB from our editor
• Upload to your hosting
• Use model-viewer code
• Share the URL!