Introduction: Why Put Your SketchUp Models on the Web?
You have spent hours refining your SketchUp model — textures, geometry, lighting — and now you want to share it. A static PDF or JPEG no longer cuts it. Your clients, collaborators, and portfolio deserve an immersive experience: zoom in, orbit around the building, explore details in real time, directly in a web browser.
The solution is called glTF / GLB, the standard 3D format of the modern web. In this guide, we will walk through how to properly export your SketchUp models to the web, step by step, without losing quality.
What Is the GLB / glTF Format?
Before exporting, let us understand what we are creating.
- glTF (GL Transmission Format) is often called the “JPEG of 3D.” It is an open, lightweight, and universal format supported by Unity, Unreal, Blender, Three.js, and all modern browsers.
- GLB (GL Binary) is the self-contained binary version of glTF: a single file that embeds geometry, textures, and animations. It is the most practical format for the web.
Why choose GLB over Collada (DAE), FBX, or OBJ for the web?
- Smaller file size: 2 to 5 times lighter than FBX
- Instant loading: optimized for browser streaming
- Total interoperability: works with Three.js, Babylon.js, or directly with the HTML <model-viewer> tag
- PBR materials: faithful reproduction of textures and reflections
Step 1: Export Natively from SketchUp
For SketchUp Pro (Desktop)
- Prepare your model
- Clean up unnecessary geometry (hidden windows, duplicates)
- Apply native SketchUp materials — avoid external rendering plugins
- Reduce complexity: an ideal web model stays under 100,000 polygons
- Native glTF export
- Go to File → Export → 3D Model…
- In the format dropdown, select glTF or GLB (available since SketchUp 2019+)
- Choose GLB if you want a single, ready-to-use file
- Click Export
- Recommended export options
- ✅ Include textures
- ✅ Export materials (not flat colors)
- ❌ Disable hidden components to keep the file light
Pro tip: If you do not see the glTF/GLB option in your SketchUp version, install the free “glTF Export” extension from the Extension Warehouse, or use the online tool we cover in Step 3.
Step 2: Verify Your Export Quality
Before going further, open your GLB file in a web viewer to check:
- Are textures properly embedded?
- Is the scale correct?
- Are there missing or inverted faces?
You can use:
- The official Khronos glTF Viewer
- Google’s <model-viewer> tag in a local HTML file
- Blender (import GLB → inspection → re-export if needed)
Step 3: Optimize the File for the Web (Size Reduction)
This is the critical step. A raw SketchUp export can easily reach 50 to 200 MB — unthinkable for a website. Load times would be slow and visitors would leave before even seeing your project.
Common post-export issues:
- 4K textures that are overkill for a web viewer
- Over-detailed geometry (piping, vegetation, furniture)
- Embedded SketchUp data (scenes, layers, metadata)
Solution: Draco Compression + Optimization
The glTF/GLB format supports Draco compression, which reduces geometric file size by 70–90% with no perceptible visual loss. It is the industry standard for web 3D models.
Rather than installing technical tools like glTF-Pipeline or Node.js, you can use an online converter and optimizer:
➡️ Running your GLB through an online optimizer like GLB to GLTF Online Converter allows you to:
- Automatically compress with Draco
- Convert between glTF and GLB formats as needed
- Drastically reduce file weight for smooth loading
Typical result: an 80 MB SketchUp export → 6 to 12 MB after Draco optimization. Your model remains visually identical, but loads in seconds even on mobile.
Step 4: Embed the Model on Your Website
Once your GLB file is optimized, web integration is surprisingly simple.
Option A: Model-Viewer (Recommended, Zero Code)
Google provides <model-viewer>, a native HTML tag that displays GLB without writing a single line of JavaScript:
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<<model-viewer
src="your-optimized-model.glb"
alt="SketchUp 3D Model"
auto-rotate
camera-controls
style="width: 100%; height: 500px;">
</model-viewer>Result: a responsive, touch-friendly 3D viewer with zoom, auto-rotate, and AR on mobile.
Option B: Three.js (Advanced Customization)
For full control (custom lighting, annotations, transitions):
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load('your-optimized-model.glb', (gltf) => {
scene.add(gltf.scene);
});Step 5: Complete Workflow Recap
| Step | Action | Tool |
|---|---|---|
| 1 | Model & clean in SketchUp | SketchUp Pro |
| 2 | Export to GLB natively | File → Export → GLB |
| 3 | Optimize & compress | GLB to GLTF Online Converter |
| 4 | Verify the render | Khronos glTF Viewer |
| 5 | Embed on your website | <model-viewer> or Three.js |
Conclusion
Exporting a SketchUp model to the web is no longer reserved for developers. With SketchUp’s native glTF export, a quick optimization pass through an online converter, and a simple HTML tag, you get a professional 3D presentation directly inside your client’s browser.
The final advice: never skip the optimization step. A web model must be lightweight. Always apply Draco compression before publishing — your visitors (and your hosting provider) will thank you.
