3D Projection

3 min read

Render 3D objects directly on the PinePaper canvas. The 3D projection system supports five projection types, five primitive shapes, GPU-accelerated rendering, and an orbital camera.

Overview

PinePaper’s 3D projection system is a standalone zero-dependency library (~18KB minified) that renders 3D primitives as 2D polygons on the canvas. Objects can be selected, dragged, and animated alongside regular 2D items.

Projection Types

Choose how 3D objects are projected onto the 2D canvas:

Projection Description
Perspective Realistic depth with foreshortening. Objects farther away appear smaller. Configurable field of view (FOV).
Orthographic No depth distortion. Parallel lines remain parallel. Common in technical/engineering drawings.
Isometric Equal-angle axonometric view (30° axes). Popular in game art and architectural diagrams.
Cabinet Oblique projection where depth axis is drawn at half scale and 45°.
Cavalier Oblique projection where depth axis is drawn at full scale and 45°.

Primitives

Five built-in 3D shapes:

Primitive Description
Cube Configurable size
Sphere Configurable radius and segment count
Cylinder Configurable radius and height
Torus Configurable major/minor radii
Cone Configurable radius and height

Each primitive supports custom colors and rotation on all axes.

GPU Acceleration

Rendering automatically selects the best available backend:

  1. WebGPU compute — fastest, used when available
  2. WebGL2 transform feedback — fast fallback
  3. CPU — universal fallback

GPU acceleration activates automatically when a scene exceeds 150 faces.

Camera

The orbital camera lets you control the viewing angle:

  • Position — where the camera is in 3D space
  • Target — where the camera looks at (orbit center)
  • Field of view — perspective distortion amount (perspective mode only)

Selecting & Dragging 3D Objects

3D objects are selectable and draggable on the canvas, just like 2D items:

  • Click a 3D object to select it
  • Drag to reposition it
  • Animations pause automatically during drag and resume when released
  • The dragged position persists across animation frames

3D Projection Showcase Template

A pre-built template demonstrates the 3D projection system with multiple primitives, rotation animations, and different projection types. Find it in the template library.

Limitations

  • Standard animation presets (fade, bounce, scroll, pulse, etc.) are not supported on 3D objects. 3D objects use their own rotation animation system through the ThreeD rendering pipeline. Applying a standard animation to a 3D object will have no effect.
  • 3D objects render as flat polygon fills — no texture mapping, lighting, or shadows.
  • Collision detection between 3D objects is not yet available.

Tips

  1. Start with isometric — it’s the most visually appealing for diagrams and illustrations
  2. Use rotation animations — rotating 3D objects gives a strong sense of depth
  3. Combine with 2D items — mix 3D primitives with text and shapes for infographic-style compositions
  4. Adjust camera distance — move the camera further for flatter perspective, closer for dramatic depth

Related: Animations | Keyframe Editor | Templates