Redefining 3D Design in the Browser: Exploring Chili3D’s Full-Stack Web CAD Solution

❝

Imagine performing industrial-grade 3D modeling without installing specialized software – just open your browser. What was once an engineer’s dream is now reality through WebAssembly technology.

❞

When Traditional CAD Meets Modern Web Technology

In mechanical design and product prototyping, Computer-Aided Design (CAD) software remains essential. Yet traditional CAD solutions present two significant challenges: 「prohibitive licensing costs」 and 「complex local installations」. Chili3D revolutionizes this paradigm by bringing full CAD capabilities to browser environments through a groundbreaking technical approach: compiling the OpenCascade (OCCT) engine to WebAssembly and integrating it with Three.js for visualization.

Architectural Breakdown

  • 「OpenCascade Engine」: Industrial-grade geometric modeling kernel (used in FreeCAD and other open-source CAD tools) providing core algorithms for Boolean operations and surface processing
  • 「WebAssembly Conversion」: OCCT’s C++ codebase compiled to .wasm format delivers near-native computational performance in browsers
  • 「Three.js Integration」: Hardware-accelerated 3D rendering via WebGL ensures smooth interaction with complex models
  • 「TypeScript Foundation」: Strong typing ensures maintainability for large-scale engineering projects

Practical Application Scenarios

From Sketch to 3D Model

  1. 「2D Sketching」
    Create flange cross-sections using line/arc tools with automatic geometric constraint detection
  2. 「Revolve Modeling」
    Generate 3D solids instantly by rotating sketches around central axes
  3. 「Boolean Optimization」
    Precisely cut materials using “difference” operations when adding bolt holes

Assembly Design Workflow

graph TD
    A[Create Base Component] --> B[Establish Assembly Coordinate System]
    B --> C[Import Gear Mechanism]
    C --> D[Apply Axle-Hole Constraints]
    D --> E[Kinematic Mechanism Verification]
    E --> F[Exploded View Analysis]

Core Capability Matrix

Modeling Power Comparison

Feature Category Basic Tools Advanced Applications
「Primitive Solids」 Cubes/Spheres/Cones Parametric mechanical part bases
「Sketch Features」 Polygons/Spline Curves Turbine blade surface design
「Topology Operations」 Boolean Operations (Union/Subtract/Intersect) Complex cavity structures
「Advanced Generation」 Sweep/Loft Special-shaped pipeline systems

Precision Design Assistance System

  • 「Dynamic Workplanes」: Instantly transform any surface into a sketching plane
  • 「Smart Snapping System」:

    • Automatic endpoint/midpoint/centerpoint alignment
    • Virtual intersection prediction for extension lines
    • Surface normal alignment guides
  • 「Measurement Toolkit」:

    // Typical measurement logic
const edgeLength = model.getEdgeLength(selectedEdge);
const faceArea = model.calculateSurfaceArea(selectedFace);

Engineering Implementation Guide

Development Environment Setup

# 1. Clone repository
git clone https://github.com/xiangechen/chili3d.git
cd chili3d

# 2. Install Node dependencies (Requires Node.js v16+)
npm install

# 3. Compile WebAssembly core
npm run setup:wasm  # Takes 5-10 minutes

# 4. Launch development server
npm run dev  # Access at localhost:3000

Production Deployment

# Complete build process
npm run build:wasm  # Compile OCCT engine separately
npm run build       # Build frontend application

# Output directory: /dist
# Deployable to Cloudflare Pages etc.

Industry Application Prospects

Current Implementation Domains

  • 「Educational Labs」: Real-time demonstrations for mechanical drafting courses
  • 「Design Reviews」: Collaborative model annotation through online sharing
  • 「Rapid Prototyping」: Instant visualization for conceptual design validation

Technical Evolution Roadmap

  1. 「Assembly Constraint Systems」: Mechanical relationships like gear meshing
  2. 「Parametric Driving」: Intelligent model updates through dimension associations
  3. 「PLM Integration」: Connection with Product Lifecycle Management systems

Open-Source Community Participation

Contributor Growth Path

pie
    title Community Contribution Distribution
    “Bug Reports” : 35
    “Document Translation” : 25
    “Feature Development” : 20
    “Test Cases” : 15
    “Performance Optimization” : 5

Collaboration Standards

  • 「Code Submission Process」:

    1. Fork main repository and create feature branch
    2. Submit Pull Request to dev branch
    3. Validate through Jest test suite
  • 「Localization Support」:

    // Language pack extension example
"de": {
  "command.extrude": "Extrudieren",
  "tooltip.fillet": "Kanten abrunden"
}

Licensing Model Analysis

AGPLv3 licensing ensures community rights:

  • 「Open-Source Requirements」: Derivative projects must disclose modified code
  • 「Commercial Licensing」: Contact xiangetg@msn.cn for proprietary applications
  • 「Cloud Exception」: SaaS services exempt from copyleft provisions

「Project Status Notice」: Current Alpha version (0.8.x) has unstable APIs. For production use, lock version numbers:

// Recommended package.json configuration
"dependencies": {
  "chili3d-engine": "~0.8.6"
}

「Resource Navigation」:

❝

The browser-based CAD revolution isn’t about replacing professional tools—it’s about creating new design paradigms. When engineers modify models on tablets at airports, when teachers guide students through capstone projects online, when maker communities collaboratively refine open-source hardware in real-time… Chili3D is quietly redefining the spatial and temporal boundaries of 3D design.

❞