Back to Documentation
Try STL.Show

Introduction to JSCAD

Learn about JSCAD, the JavaScript-based CAD system that powers parametric 3D design in STL.Show.

What is JSCAD?

JSCAD is a modern, JavaScript-based computer-aided design (CAD) system that allows you to create 3D models using code. Unlike traditional CAD software that relies on graphical interfaces, JSCAD uses programming to define geometry, making it perfect for parametric design, automation, and precise control.

Code-Based Design

Create 3D models using JavaScript programming instead of graphical tools

Parametric

Easily modify designs by changing parameters without recreating geometry

Web-Native

Runs in web browsers, making it accessible and platform-independent

JSCAD vs OpenSCAD

JSCAD is often compared to OpenSCAD, another popular code-based CAD system. Here's how they differ:

JSCAD

Advantages

  • • JavaScript Syntax - Familiar to web developers
  • • Web-Native - Runs in browsers without installation
  • • Modern Ecosystem - NPM packages and modern tooling
  • • Real-time Preview - Instant updates as you code
  • • Better Performance - Optimized for web environments

Use Cases

  • • Web-based CAD applications
  • • Rapid prototyping
  • • Educational projects
  • • Custom design tools

OpenSCAD

Advantages

  • • Mature Ecosystem - Large community and libraries
  • • Desktop Application - Full-featured standalone app
  • • Extensive Libraries - Many pre-built components
  • • Proven Track Record - Used in production for years
  • • Offline Capability - Works without internet

Use Cases

  • • Professional CAD work
  • • Complex mechanical designs
  • • Offline design work
  • • Legacy system integration

Why Use JSCAD in STL.Show?

STL.Show integrates JSCAD seamlessly to provide a powerful, web-based 3D design experience.

Seamless Integration

  • • Built-in Editor - Monaco code editor with syntax highlighting
  • • Real-time Compilation - See changes instantly
  • • Parameter UI - Automatic parameter controls
  • • Error Detection - Immediate feedback on code issues

Collaborative Features

  • • Team Workspaces - Share designs with your team
  • • Version Control - Track changes and iterations
  • • Real-time Collaboration - Work together simultaneously
  • • Cloud Storage - Access designs from anywhere

Advanced Capabilities

  • • AI Integration - Get help and suggestions from AI
  • • Child Imports - Reference other objects in your code
  • • Boolean Operations - Combine and modify geometries
  • • Export Options - Save as STL, code, or other formats

Workflow Benefits

  • • Rapid Prototyping - Quick iteration and testing
  • • Design Automation - Generate variations automatically
  • • Precision Control - Exact measurements and relationships
  • • Reusable Components - Build libraries of parts

Basic JSCAD Concepts

Primitives

Basic geometric shapes that form the building blocks of your 3D models.

Basic Primitives

  • • cube() - Rectangular box
  • • sphere() - Perfect sphere
  • • cylinder() - Circular cylinder
  • • torus() - Donut shape

Advanced Primitives

  • • polyhedron() - Custom 3D shape
  • • poly3() - Custom polygon
  • • path2() - 2D path
  • • geom2() - 2D geometry

Transformations

Operations that modify the position, orientation, and size of geometric objects.

Position & Orientation

  • • translate() - Move objects
  • • rotate() - Rotate objects
  • • mirror() - Reflect objects
  • • transform() - Custom transformations

Size & Shape

  • • scale() - Resize objects
  • • center() - Center objects
  • • align() - Align objects
  • • offset() - Expand/shrink

Boolean Operations

Combine multiple objects using mathematical set operations to create complex shapes.

Union

  • • union() - Combine objects
  • • Merges multiple shapes
  • • Removes overlaps
  • • Creates single object

Difference

  • • subtract() - Remove from object
  • • Creates cutouts
  • • Removes intersections
  • • Common for holes

Intersection

  • • intersect() - Keep overlaps only
  • • Keeps common volume
  • • Creates complex cuts
  • • Minimal result

JSCAD Workflow in STL.Show

Understanding the typical workflow for creating JSCAD designs in STL.Show.

1. Create or Open Code

Start with a new code object, open an example, or import existing JSCAD code.

1

New Code Object

2

Open Examples

3

Import Code File

2. Write and Edit Code

Use the integrated code editor to write JSCAD code with syntax highlighting and real-time error detection. 

function main() {
  return cube({size: 10})
}

Editor Features

  • • Syntax Highlighting - JavaScript/JSCAD syntax support
  • • Auto-completion - Intelligent code suggestions
  • • Error Detection - Real-time error highlighting
  • • Code Formatting - Automatic code formatting

3. Configure Parameters

If your code includes parameters, configure them using the automatic parameter UI. 

function getParameterDefinitions() {
  return [
    {name: 'size', type: 'number', initial: 10, caption: 'Size'},
    {name: 'segments', type: 'number', initial: 16, caption: 'Segments'}
  ]
}

Parameter Features

  • • Automatic UI - Generated from parameter definitions
  • • Real-time Updates - See changes instantly
  • • Validation - Input validation and constraints
  • • Persistence - Parameter values are saved

4. Compile and View

Compile your JSCAD code to generate 3D geometry and view it in the scene.

Compilation Process

  • • Web Worker - Compilation runs in background
  • • Geometry Generation - Creates Three.js meshes
  • • Error Handling - Clear error messages
  • • Performance - Optimized for web environment

Result Handling

  • • Scene Integration - Added to 3D scene
  • • Object Management - Selectable and transformable
  • • Export Ready - Can be exported as STL
  • • Persistence - Saved with your project

Ready to Start Coding?

Now that you understand JSCAD basics, explore these areas to build your skills:

JSCAD Basics

Learn about primitives, transformations, and Boolean operations.

Parameter System

Master parametric design with dynamic parameters.