Interface Guide

Learn about all the interface elements in STL.Show and how to use them effectively for 3D modeling and visualization.

Interface Overview

Main Interface Layout

Toolbar (Top)

File, Mesh, and Code menus with action buttons

3D Viewport (Center)

Main 3D scene where you view and interact with objects

Side Panels (Right)

Collapsible panels for Objects, Tools, Code, and Terminal

Interface Layout Preview

Toolbar

3D Viewport

Side Panels

Toolbar Overview

File Menu

Manage file operations including import, export, and scene management.

Import Options

• Import STL - Load STL files (binary/ASCII)
• Import SVG - Load SVG files for 2D geometry
• Import Code - Load JSCAD/JavaScript files
• Drag & Drop - Direct file import

Export Options

• Export STL - Save as STL file
• Export Code - Save JSCAD code
• Scene Export - Save entire scene (future)

Mesh Menu

Transform and manipulate 3D objects with precision controls.

Transform Operations

• Translate - Move objects in 3D space
• Rotate - Rotate objects around axes
• Scale - Resize objects uniformly or per-axis
• Transform Controls - Visual gizmo for manipulation

Boolean Operations

• Union - Combine two objects
• Subtract - Remove one object from another
• Intersect - Keep only overlapping parts
• Group - Organize objects hierarchically

Code Menu

Create and edit JSCAD code objects for parametric 3D design.

Code Creation

• New Code Object - Create blank JSCAD script
• Open Examples - Load predefined examples
• Import Code File - Load external JSCAD files
• Code Editor - Full-screen code editing

Code Management

• Save Code - Save current code object
• Apply Parameters - Compile with parameters
• Export Code - Save code to file
• Child Imports - Import objects into code

Side Panels

Objects Panel

Manage scene hierarchy, object selection, and visibility.

Scene Hierarchy

• Tree view of all objects
• Parent-child relationships
• Object types (mesh, code, group, svg)
• Drag and drop reordering

Selection Controls

• Select All / None
• Multi-selection support
• Visual selection feedback
• Context menu actions

Tools Panel

Precise numeric controls for transformations and operations.

Transform Controls

• X, Y, Z coordinate inputs
• Rotation angle controls
• Scale factor inputs
• Apply / Reset buttons

Boolean Presets

• Quick union operations
• Subtraction presets
• Intersection tools
• Result handling options

Code Panel

Embedded code editor for quick JSCAD modifications.

Editor Features

• Syntax highlighting
• Auto-completion
• Error detection
• Real-time compilation

Parameter Controls

• Dynamic parameter UI
• Real-time updates
• Parameter validation
• Apply button controls

Terminal Panel

AI-powered chat terminal for assistance and commands.

AI Assistant

• JSCAD code help
• Design suggestions
• Code optimization
• Problem solving

Command Line

• Quick commands
• Scene operations
• File management
• System information

Modal Windows

Transform Controls Panel

Fine-grained control panel for precise object transformations with visual feedback and numeric inputs.

Translation

• X, Y, Z position inputs
• Relative/absolute modes
• Snap to grid options

Rotation

• Euler angle inputs
• Axis-specific rotation
• Degree/radian options

Scaling

• Uniform scaling
• Per-axis scaling
• Scale factor inputs

Boolean Operation Modal

Interface for performing constructive solid geometry (CSG) operations between selected objects.

Operation Types

• Union - Combine objects
• Subtract - Remove from target
• Intersect - Keep overlap only

Result Handling

• Replace original objects
• Create new object
• Keep originals

Code Editor Window

Full-screen code editor with advanced features for JSCAD development and debugging.

Editor Features

• Monaco editor integration
• JavaScript syntax highlighting
• Auto-completion
• Error detection

Workflow

• Save vs. Apply buttons
• Parameter modal integration
• Child imports system
• Version history (future)

Runtime Modes

STL.Show operates in different modes depending on the current state of your scene and selections. Understanding these modes helps you know what actions are available.

EMPTY Mode

No objects are loaded in the scene.

Available Actions

• Import files (STL, SVG, JSCAD)
• Create new code objects
• Open code examples
• Camera controls

Disabled Actions

• Transform operations
• Boolean operations
• Export functions
• Object selection

VIEWER Mode

Objects are present but none are selected.

Available Actions

• Select objects
• Import additional files
• Camera controls
• Export objects
• Create new objects

Disabled Actions

• Transform operations
• Boolean operations
• Object editing

VALID_SELECTION Mode

One or more objects are selected and ready for operations.

Available Actions

• Transform operations
• Boolean operations
• Object editing
• Grouping operations
• Export selected

Selection Features

• Visual highlighting
• Transform gizmo
• Multi-selection support
• Context menus

PENDING_CHANGE Mode

An operation is in progress (compilation, Boolean operation, etc.).

What Happens

• UI shows loading states
• Destructive actions blocked
• Progress indicators
• Cancel options available

Blocked Actions

• Object deletion
• Boolean operations
• Scene modifications
• File operations

Ready to Explore?

Now that you understand the interface, learn how to use these features effectively:

File Management

Learn about importing, exporting, and organizing files.

Object Manipulation

Master selection, transformation, and Boolean operations.

Camera Controls

Learn navigation, view options, and camera presets.