ExplodeView — Interactive Assembly & Explosion Viewer

ExplodeView turns any CAD file into an interactive 3D exploded view. Drop in a STEP/STP assembly and get a fully interactive assembly viewer that embeds into any website with two lines of HTML. The viewer runs in the browser on Three.js (r170) with zero runtime dependencies — no elaborate setup, no proprietary tools, no framework lock-in.

Users rotate with the mouse, zoom with the scroll wheel and explode the assembly with a click. Under the hood there is far more than a viewer: according to the documentation, ExplodeView includes over 63 features and more than 40 manufacturing and analysis tools — from measurement, section planes and bills of materials to standard-part detection, engineering analyses and AI-powered part identification. The public demo model is the cycleWASH bicycle wash station with 399 stainless-steel components across 6 subassemblies. ExplodeView is source-available under BSL 1.1 and ships as an npm package as well as a CDN script.

Who it's for: manufacturers, e-commerce product pages, MRO and service teams, technical education, and sales and design teams. Built for manufacturers, loved by engineers.

Display & Interaction

• Exploded views: animated, controllable explosions along any axis. Explosion distance configurable per part or per subassembly, smooth easing curves, timeline scrubber and collapse/expand animations.
• Assembly highlighting: click a part to highlight it, isolate it or display its name and part number from the STEP assembly tree. Includes a BOM panel (bill-of-materials view).
• Full control: orbit, pan, zoom, section plane, cross-section view, measurement tool and a first-person walkthrough mode for large assemblies.
• Realistic materials (Pro): PBR material system with metal, plastic and glass presets. Material assignment per part via a JSON configuration — 150+ PBR materials and an 8-material selector.
• Responsive display: adapts to any container size, from 320px mobile to 4K ultrawide. Touch-optimized controls for tablets and smartphones.
• Localization & theming: 6 languages (EN, DE, FR, ES, IT, NL); dark, light and blueprint themes (white background + blue wireframe); custom color schemes and automatic color coding by part type.

Measurement, Section & Bill of Materials

• Measurement: 2-point distance and 3-point angle measurement for dimensional analysis.
• Section views: X/Y/Z section planes with adjustable position.
• Bill of materials (BOM): export as CSV with quantities; the Smart BOM adds AI-identified parts including price estimates.
• QR codes: generate per-part deep links as QR codes for mobile sharing.
• Annotation & markup: annotation pins and comments via drag-and-drop, arrows, circles and freehand drawing; color-coded quick notes with CSV export.

Analysis & Standard Parts

• DIN/ISO + McMaster-Carr lookup: standard-part and fastener analyzer with torque specifications and 1-click McMaster-Carr shopping links; the Fastener Wizard automatically detects 12 screw patterns.
• Analysis suite (40+ tools): weight estimator (15 materials), part comparison, clearance/collision check, assembly validation (A–F rating), maintenance heatmap, 5-year wear timeline, thermal heatmap and animated vibration analysis.
• AI-powered part identification: AI vision part recognition (Gemini Vision), batch AI scan of all parts, AI-generated assembly and service instructions, and a 3-stage chatbot (Gemini Flash + Groq Llama 3.1 8B + offline NLP fallback).

Branding & Integration

• Custom branding (Pro): replace the ExplodeView watermark with your own logo, set brand colors for the UI chrome and configure the loading screen.
• Integration & performance: npm package, CDN <script> embed, Docker stack with 3 services, server-side FastAPI STEP converter, Agent API (55 commands across 10 namespaces), WebWorker parsing, Service Worker offline mode, COOP/COEP headers and 100+ automated visual tests.

Use Cases

• Hardware manufacturers: interactive assembly instructions embedded directly on the product page.
• MRO & service teams: documentation and service manuals for technicians in the field.
• Technical education: interactive learning of mechanical assemblies.
• E-commerce & sales: interactive product pages that convert, plus compelling quotes and presentations.
• Design agencies: portfolio presentations.
• Hardware startups: professional documentation from day one.
• Manufacturing platforms: integrate the viewer as a service-tech tool or embed it in your own app.

Embed

Embedding takes two lines of HTML. There are two documented paths — a CLI build and a direct CDN embed.

Method A — CLI build (produces an .evx asset):

• Step 1: In the project directory, run npx explodeview build model.step.
• Step 2: A viewer/ directory is created next to the model file.
• Step 3: Insert the two-line snippet:
  <script src="viewer/explodeview.js"></script>
  <div id="ev-viewer" data-model="viewer/model.evx" style="width:100%;height:600px"></div>

Method B — CDN embed (Constructor API):

• <div id="viewer" style="width:100%; height:600px"></div>
• <script src="https://unpkg.com/explodeview@1.0.16/dist/explodeview.js"></script>
• Then initialize via script with: new ExplodeView({ container: '#viewer', modelUrl: '/your-assembly.step', theme: 'dark' }).

Method B (declarative) — point at a preprocessed asset folder via data attributes: a <div class="product-3d" data-stp-viewer="/assets/my-machine/" data-brand="ACME Corp" data-product-name="Widget Pro 3000"> plus <script src="https://unpkg.com/explodeview">.

Installation options: npm install explodeview; CDN <script src="https://unpkg.com/explodeview">; or self-host dist/explodeview.js.

JavaScript API: await STPViewer.init({ container, src, brand, productName, assemblies, captions }). Assemblies are detected automatically or overridden via custom grouping objects ({ key, name, subtitle, detail, color, indices:[start,end], material:{ metalness, roughness } }).

Server-side processing (large files): python3 bin/explodeview-process.py <input.step> <output_dir> [--name --brand --tolerance] (requires Python 3.8+ with cadquery + OCP); or docker-compose up (ExplodeView :8080, STEP Converter :8787, cycleCAD :3000).

Note for Shopify: On a Shopify product page, use Method B (CDN script + container div) in the product template/section or in a custom HTML block, since Shopify cannot run the npx build step. Preprocess the STEP file into hosted assets and point data-stp-viewer or modelUrl at them.

Formats

Editions

License key emailed instantly after payment. Pro & Enterprise: annual license.