CAD Preview

Appearance

CAD PreviewInteractive 3D CAD and mesh previews in VS Code

Open a STEP, IGES, BREP, STL, OBJ, PLY, glTF, 3MF, Collada, AMF, USD, VRML, or FBX file — CAD Preview renders it instantly inside the editor with full orbit, pan, and zoom.

Get Started
Tutorials
Architecture
GitHub
🏗️

B-rep Tessellation via OpenCascade.js

STEP, IGES, and BREP files are parsed and tessellated by the OCCT kernel (compiled to WebAssembly). The WASM runs in the Node extension host — never in the webview — so there are no CSP issues and pure-mesh files never pay the WASM startup cost. A cancellable progress notification appears for a cold-cache load (initial open, external reload); routine edits stay near-instant thanks to base-shape caching.

🎨

Native Three.js Mesh Loading

STL, OBJ, PLY, and glTF/GLB files are loaded directly by Three.js loaders via a webview URI. No host round-trip, no tessellation — just fast native parsing.

🧭

Orientation Cube & View Controls

A labeled orientation gizmo mirrors the current camera direction. Click any face to snap to that standard view. The collapsible view-controls panel lets you step-rotate, pan, zoom, fit, or reset the view without touching the mouse — plus a live, solid-capped clipping plane along an axis or any face-derived normal, a background/opacity Appearance group, and a perspective/orthographic toggle.

🌲

Component Tree Panel

For multi-solid B-rep assemblies or multi-mesh glTF files, a component tree panel shows the hierarchy. Click any node to highlight that solid in the 3D view.

🏷️

Define Parts (Volumes / Surfaces / Lines / Points)

Click solids, faces, edges, or vertices in the 3D view and assign them to named parts (FEM sub-model-parts). Assignments are colour-highlighted, listed in a panel, and autosaved to a `.parts.json` sidecar, never into the CAD source. Per-part eye-toggles and a panel-level Isolate button (plus a matching filter/eye-toggle on the Components tree) let you focus on just the geometry you're working on, display-only and never persisted.

🔩

Standard Parts Catalog

Search the hosted step.parts catalog (fasteners, bearings, connectors, extrusions, …) from a sidebar panel and insert a result as a new STEP document with one click — checksum-verified against the catalog's own recorded SHA-256 when present.

✏️

Non-destructive Editing

Apply transforms (move / rotate / scale / mirror — with a draggable 3D Transform Gizmo live-previewing the drag, plus optional grid/entity-point snapping), booleans (unite / subtract / intersect), fillet/chamfer, feature modeling (extrude / revolve / sweep / loft), assembly ops (explode / mate / align / linear & circular pattern), primitive creation (box/cube, sphere, cylinder, cone, torus, prism, wedge, holes/counterbore/countersink), 2D profile sketches and curves (circle, rectangle, polygon, ellipse, rounded rectangle, slot, trapezoid, spline, Bézier, helix, …) for use as extrude/revolve/sweep/loft profiles, modify ops (shell, draft, split, section), construction geometry (guide-marked reference-only sketches), edge slots, SVG import (trace a `.svg`'s paths into sketch polylines), and bottom-up wireframe modeling (points, lines, arcs → surfaces from lines → volumes from surfaces). Edits are undoable, replayable, and autosaved to a `.edits.json` sidecar — the CAD file is otherwise untouched, and edits are baked in on Export or a confirmed same-format save in place.

🔬

Display Modes & Grid Helpers

Six rendering modes — Shaded, Wireframe, X-Ray, Hidden Lines, Flat/unlit, and a GiD-style Geometry structure view — plus world-space axes and a reference grid, all from the view-controls panel and toolbar.

🚀

Lazy WASM, Fast Activation

The OpenCascade.js kernel is initialized only on the first B-rep open and then memoized. Opening STL or glTF files never loads the WASM at all. Extension activation is instant.

💾

Export to a Compatible Format

Convert the open model and save it via a native dialog. B-rep files (STEP/IGES/BREP/CSG/SCAD) can export to each other (true OCCT writers) or to any mesh format; mesh files can export to other mesh formats.

📐

Silhouette SVG/DXF Export

Write a 2D outline of the model as a self-contained SVG or a minimal DXF — pick the current view or a standard one (Front/Back/Top/Bottom/Left/Right/Iso), pick a unit, save. Works for STEP/IGES/BREP/CSG/SCAD (edits baked in) and STL/OBJ/PLY/glTF, and prints 1:1 at 1 unit per model unit. An outline, not a dimensioned technical drawing — there is no hidden-line removal.

📄

Multi-View Drawing Sheets

Export a technical drawing sheet with several views (front/top/right/iso by default) laid out at one shared scale, orthographically aligned per first- or third-angle projection, inside a frame with a title block. "Fit" sizes the sheet to the views at 1:1; a named ISO paper size (A4–A0) picks the largest standard scale that fits. A pinned measurement is drawn once, in whichever view shows it at true length.

🧮

FE Mesh Generation and Remeshing

Generate a finite-element mesh of the open model with Gmsh compiled to WebAssembly, shown as an overlay on top of the existing geometry, alongside a quality summary (min/mean element quality plus a histogram). Options autosave to a `.mesh.json` sidecar plus a generated `.geo` script; export the result as hand-written Kratos MDPA (the default, preserving named Parts as SubModelParts) or any Gmsh format the panel offers (.msh, .msh2, .geo_unrolled, VTK, I-DEAS Universal, Abaqus, Nastran, SU2, INRIA Medit, STL, Diffpack, OFF). For a dirty mesh-format source Gmsh's own meshing rejects, an Engine choice switches to fTetWild, a tetrahedralizer built to survive holes/self-intersections/non-manifold edges. The CAD file stays read-only.

🔁

MMG Remeshing

Refine/coarsen linear triangle or tetrahedral FE meshes with MMG, from an original meshio-readable file or freshly generated edited geometry. Writes a new MED mesh with named cell regions and rebound Parts. Result fields are dropped with warnings; hex/quad/quadratic input is refused. Not an automatic quality optimiser.

🤖

MCP Server for AI Agents

A standalone Model Context Protocol stdio server (`dist/mcp-server.js`) exposes the same load/edit/mesh/export pipeline headless — no VS Code required. Agents like Claude Code can apply edit operations, manage parts and parametric variables, generate/export FE meshes, and query mass properties, persisting to the same sidecar files the extension reads. See the MCP Server reference page.

📏

Measurement & Mass Properties

Measure distance, edge length, angle, and circle/arc radius directly in the 3D view — a display-only overlay, never persisted. The Mass Properties panel computes volume, area, length, center of mass, and moments of inertia for the whole model or a single selected entity, via OpenCascade.js's BRepGProp for B-rep sources or client-side triangle math for mesh sources.

📷

Screenshot & Settings

Save the current view as a PNG via the toolbar or Command Palette. A handful of cadPreview.* VS Code settings (background colour, mesh-size preset, grid/axes visibility, up-axis) set cross-document defaults for newly opened files.

See It in Action ​

The CAD Preview editor — 3D viewer, orientation cube, Components/Parts/Edits/FE Mesh sidebar, toolbar, and view controls.

Previewing a STEP model with colour-coded parts, parametric variables, and every panel live. The tutorials build a real part start to finish; Getting Started is the panel-by-panel reference.

Geometry creation opsNamed colour-coded partsGenerated FE mesh overlay

Supported Formats ​

FormatExtensionsPipeline
STEP.step, .stpOpenCascade.js → BRepMesh tessellation
IGES.iges, .igsOpenCascade.js → BRepMesh tessellation
BREP.brepOpenCascade.js → BRepMesh tessellation
OpenSCAD CSG.csgCSG parse → OCCT build → BRepMesh
OpenSCAD Src.scadopenscad binary → .csg → same as above
STL.stlThree.js STLLoader
OBJ.objThree.js OBJLoader
PLY.plyThree.js PLYLoader
glTF.gltf, .glbThree.js GLTFLoader
3MF.3mfThree.js 3MFLoader (display-only on the host)
Collada.daeThree.js ColladaLoader (import-only; display-only on the host)
AMF.amfThree.js AMFLoader (import-only; display-only on the host)
USD.usd .usda .usdc .usdzThree.js USDLoader (import-only; display-only on the host)
VRML.wrlThree.js VRMLLoader (import-only; display-only on the host)
FBX.fbxThree.js FBXLoader (import-only; display-only on the host)

Plus VTK (.vtk), VTU (.vtu), MED (.med), CGNS (.cgns), Exodus (.exo, .e), XDMF (.xdmf), Kratos MDPA (.mdpa), OpenFOAM (.foam), Gmsh Mesh (.msh, .msh2), Abaqus (.inp), I-DEAS Universal (.unv), SU2 (.su2), INRIA Medit (.mesh), GiD Postprocess (.post.msh), libMesh (.xda, .xdr and their .gz/.bz2 pairings), Kratos CAD JSON (.cad.json — an exact NURBS B-rep the iga_sample/iga_refine/iga_evaluate tools read), Nastran Bulk Data (.bdf), and the meshio++ 17.3.0 binary writers Tecplot (.plt), FEBio plot (.xplt), Medit binary (.meshb), MSC Marc post (.t19), Abaqus results (.fil), Ansys MAPDL results (.rst), LS-DYNA d3plot (.d3plot), plus 17.4.0's Nastran OP2 results (.op2) via the host-side meshio++ bridge — Gmsh Mesh, Abaqus, I-DEAS Universal, SU2, INRIA Medit and Nastran close a real export/import asymmetry (this codebase's own FE Meshing panel wrote them but couldn't reopen them). SVG and DXF are not rendering formats but appear at both ends of the pipeline: Import SVG…/Import DXF… trace a 2D drawing's geometry into sketch polylines/profile ops, and Export Silhouette SVG…/…DXF… write a 2D outline of the model back out.

Badges ​

CI Docs VS Code Engine Three.js OpenCascade.js License TypeScript

Released under the GPL-3.0-or-later License.

Copyright © CAD-Preview contributors