{"product_id":"explodeview","title":"ExplodeView — Interactive Assembly \u0026 Explosion Viewer","description":"\u003cdiv style=\"margin:1em 0;padding:.8em 1em;border:2px solid #c62828;background:#fdecea;border-radius:6px;font-weight:600;\"\u003e⚠️ Digital products cannot be returned once purchased — all sales are final.\u003c\/div\u003e\u003cp\u003e\u003cstrong\u003eExplodeView\u003c\/strong\u003e 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.\u003c\/p\u003e\n\n\u003cp\u003eUsers 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.\u003c\/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eWho it's for:\u003c\/strong\u003e manufacturers, e-commerce product pages, MRO and service teams, technical education, and sales and design teams. Built for manufacturers, loved by engineers.\u003c\/p\u003e\n\n\u003ch3\u003eDisplay \u0026amp; Interaction\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eExploded views:\u003c\/strong\u003e animated, controllable explosions along any axis. Explosion distance configurable per part or per subassembly, smooth easing curves, timeline scrubber and collapse\/expand animations.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAssembly highlighting:\u003c\/strong\u003e 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).\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eFull control:\u003c\/strong\u003e orbit, pan, zoom, section plane, cross-section view, measurement tool and a first-person walkthrough mode for large assemblies.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eRealistic materials (Pro):\u003c\/strong\u003e 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.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eResponsive display:\u003c\/strong\u003e adapts to any container size, from 320px mobile to 4K ultrawide. Touch-optimized controls for tablets and smartphones.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eLocalization \u0026amp; theming:\u003c\/strong\u003e 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.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eMeasurement, Section \u0026amp; Bill of Materials\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eMeasurement:\u003c\/strong\u003e 2-point distance and 3-point angle measurement for dimensional analysis.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSection views:\u003c\/strong\u003e X\/Y\/Z section planes with adjustable position.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eBill of materials (BOM):\u003c\/strong\u003e export as CSV with quantities; the Smart BOM adds AI-identified parts including price estimates.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eQR codes:\u003c\/strong\u003e generate per-part deep links as QR codes for mobile sharing.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAnnotation \u0026amp; markup:\u003c\/strong\u003e annotation pins and comments via drag-and-drop, arrows, circles and freehand drawing; color-coded quick notes with CSV export.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eAnalysis \u0026amp; Standard Parts\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eDIN\/ISO + McMaster-Carr lookup:\u003c\/strong\u003e standard-part and fastener analyzer with torque specifications and 1-click McMaster-Carr shopping links; the Fastener Wizard automatically detects 12 screw patterns.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAnalysis suite (40+ tools):\u003c\/strong\u003e 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.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAI-powered part identification:\u003c\/strong\u003e 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).\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eBranding \u0026amp; Integration\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom branding (Pro):\u003c\/strong\u003e replace the ExplodeView watermark with your own logo, set brand colors for the UI chrome and configure the loading screen.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eIntegration \u0026amp; performance:\u003c\/strong\u003e npm package, CDN \u0026lt;script\u0026gt; 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.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eUse Cases\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eHardware manufacturers:\u003c\/strong\u003e interactive assembly instructions embedded directly on the product page.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMRO \u0026amp; service teams:\u003c\/strong\u003e documentation and service manuals for technicians in the field.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTechnical education:\u003c\/strong\u003e interactive learning of mechanical assemblies.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eE-commerce \u0026amp; sales:\u003c\/strong\u003e interactive product pages that convert, plus compelling quotes and presentations.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDesign agencies:\u003c\/strong\u003e portfolio presentations.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eHardware startups:\u003c\/strong\u003e professional documentation from day one.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eManufacturing platforms:\u003c\/strong\u003e integrate the viewer as a service-tech tool or embed it in your own app.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eEmbed\u003c\/h3\u003e\n\u003cp\u003eEmbedding takes two lines of HTML. There are two documented paths — a CLI build and a direct CDN embed.\u003c\/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eMethod A — CLI build (produces an .evx asset):\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eStep 1: In the project directory, run \u003cstrong\u003enpx explodeview build model.step\u003c\/strong\u003e.\u003c\/li\u003e\n\u003cli\u003eStep 2: A \u003cstrong\u003eviewer\/\u003c\/strong\u003e directory is created next to the model file.\u003c\/li\u003e\n\u003cli\u003eStep 3: Insert the two-line snippet:\u003cbr\u003e\u0026lt;script src=\"viewer\/explodeview.js\"\u0026gt;\u0026lt;\/script\u0026gt;\u003cbr\u003e\u0026lt;div id=\"ev-viewer\" data-model=\"viewer\/model.evx\" style=\"width:100%;height:600px\"\u0026gt;\u0026lt;\/div\u0026gt;\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003cp\u003e\u003cstrong\u003eMethod B — CDN embed (Constructor API):\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u0026lt;div id=\"viewer\" style=\"width:100%; height:600px\"\u0026gt;\u0026lt;\/div\u0026gt;\u003c\/li\u003e\n\u003cli\u003e\u0026lt;script src=\"https:\/\/unpkg.com\/explodeview@1.0.16\/dist\/explodeview.js\"\u0026gt;\u0026lt;\/script\u0026gt;\u003c\/li\u003e\n\u003cli\u003eThen initialize via script with: new ExplodeView({ container: '#viewer', modelUrl: '\/your-assembly.step', theme: 'dark' }).\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003cp\u003e\u003cstrong\u003eMethod B (declarative)\u003c\/strong\u003e — point at a preprocessed asset folder via data attributes: a \u0026lt;div class=\"product-3d\" data-stp-viewer=\"\/assets\/my-machine\/\" data-brand=\"ACME Corp\" data-product-name=\"Widget Pro 3000\"\u0026gt; plus \u0026lt;script src=\"https:\/\/unpkg.com\/explodeview\"\u0026gt;.\u003c\/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eInstallation options:\u003c\/strong\u003e npm install explodeview; CDN \u0026lt;script src=\"https:\/\/unpkg.com\/explodeview\"\u0026gt;; or self-host dist\/explodeview.js.\u003c\/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eJavaScript API:\u003c\/strong\u003e 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 } }).\u003c\/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eServer-side processing (large files):\u003c\/strong\u003e python3 bin\/explodeview-process.py \u0026lt;input.step\u0026gt; \u0026lt;output_dir\u0026gt; [--name --brand --tolerance] (requires Python 3.8+ with cadquery + OCP); or docker-compose up (ExplodeView :8080, STEP Converter :8787, cycleCAD :3000).\u003c\/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eNote for Shopify:\u003c\/strong\u003e 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.\u003c\/p\u003e\n\n\u003ch3\u003eFormats\u003c\/h3\u003e\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eImport\u003c\/strong\u003e\u003c\/td\u003e\n\u003ctd\u003eSTEP, STP (primary); the Pro\/Lifetime desktop app additionally supports IGES, GLB; the viewer also processes STL and other CAD files.\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eExport — 3D geometry\u003c\/strong\u003e\u003c\/td\u003e\n\u003ctd\u003eSTL (ASCII + binary), OBJ, glTF 2.0 (GLTF), PLY.\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eExport — images\u003c\/strong\u003e\u003c\/td\u003e\n\u003ctd\u003ePNG screenshot (2x Retina); the demo app additionally lists JPG, WebP, TIFF in several resolutions.\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eExport — motion\u003c\/strong\u003e\u003c\/td\u003e\n\u003ctd\u003eanimated GIF; the demo app additionally lists video (MP4, WebM). Video \u0026amp; GIF are Pro-tier features.\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eExport — data \u0026amp; documents\u003c\/strong\u003e\u003c\/td\u003e\n\u003ctd\u003ebill of materials as CSV, technical reports \/ assembly instructions (HTML), technical drawings (3-view, section, isometric per the demo).\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eProcessed assets (CLI)\u003c\/strong\u003e\u003c\/td\u003e\n\u003ctd\u003eparts\/ (STL meshes per solid), manifest.json, assemblies.json, config.json.\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003c\/table\u003e\u003ch3\u003eEditions\u003c\/h3\u003e\n\u003ctable style=\"width:100%;border-collapse:collapse;font-size:.92em\"\u003e\n\u003cthead\u003e\u003ctr style=\"border-bottom:2px solid #ccc\"\u003e\n\u003cth style=\"text-align:left;padding:6px\"\u003eFeature\u003c\/th\u003e\n\u003cth style=\"padding:6px\"\u003ePro\u003c\/th\u003e\n\u003cth style=\"padding:6px\"\u003eEnterprise\u003c\/th\u003e\n\u003cth style=\"padding:6px\"\u003eLifetime\u003c\/th\u003e\n\u003c\/tr\u003e\u003c\/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:6px\"\u003eAll features\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e✓\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e✓\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e✓\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:6px\"\u003e3 devices \/ seats\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e✓\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e✓\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e✓\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:6px\"\u003eUpdates included\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e1 year\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e1 year\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003elifetime\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:6px\"\u003eCloud processing, Video \u0026amp; GIF export, no watermark\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e✓\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e✓\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e✓\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:6px\"\u003eWhite-label \/ SSO \/ API \/ priority support\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e—\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e✓\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e—\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:6px\"\u003eOffline · perpetual license\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e—\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e—\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003e✓\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:6px\"\u003eDownload\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003emacOS · Win\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003emacOS · Win\u003c\/td\u003e\n\u003ctd style=\"text-align:center\"\u003emacOS \u003cb\u003eor\u003c\/b\u003e Win\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003c\/tbody\u003e\n\u003c\/table\u003e\n\u003cp style=\"font-size:.85em;color:#666\"\u003eLicense key emailed instantly after payment. Pro \u0026amp; Enterprise: annual license.\u003c\/p\u003e\u003cdiv style=\"margin-top:1.5em;padding:1em;border:1px solid #d4a017;background:#fff8e1;border-radius:4px;font-size:0.95em;\"\u003e\n\u003cp style=\"margin:0;\"\u003e\u003cstrong\u003e⚠ Digital content — withdrawal right waived on access\u003c\/strong\u003e\u003cbr\u003eBy purchasing this software license, you expressly consent that access (license key + download) is provided immediately upon order confirmation, and you acknowledge that your statutory right of withdrawal ceases as soon as access begins (§ 356 (5) BGB i. V. m. § 312g (2) no. 13 BGB). No refunds after access is granted.\u003c\/p\u003e\n\u003c\/div\u003e","brand":"CW Cleaning Solutions GmbH","offers":[{"title":"Pro (1 Jahr)","offer_id":53328430825738,"sku":"EV-PRO","price":49.0,"currency_code":"EUR","in_stock":true},{"title":"Enterprise (1 Jahr)","offer_id":53328430858506,"sku":"EV-ENT","price":299.0,"currency_code":"EUR","in_stock":true},{"title":"Lifetime · macOS","offer_id":53328430891274,"sku":"EV-LT-MAC","price":490.0,"currency_code":"EUR","in_stock":true},{"title":"Lifetime · Windows","offer_id":53328430924042,"sku":"EV-LT-WIN","price":490.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0303\/7075\/8793\/files\/explodeview-pro-hero.png?v=1780924660","url":"https:\/\/cyclecnc.com\/de\/products\/explodeview","provider":"CycleCNC","version":"1.0","type":"link"}