3D-projektion

3 min read

Gör 3D-objekt direkt på PinePaper-duken. 3D-projektionssystemet stöder fem projektionstyper, fem primitiva former, GPU-accelererad rendering och en orbitalkamera.

Översikt

PinePaper 3D-projektionssystem är ett fristående nollberoende bibliotek (~ 18KB minifierad) som gör 3D-primitiva som 2D-polygoner på duken. Objekt kan väljas, dras och animeras tillsammans med vanliga 2D-objekt.

Projektionstyper

Välj hur 3D-objekt projiceras på 2D-duken:

Projektion Beskrivning
Perspektiv Realistiskt djup med förmaning. Objekt längre bort verkar mindre. Konfigurerbart synfält (FOV).
Ortografisk Inget djup förvrängning. Parallella linjer förblir parallella. Gemensamt i tekniska / tekniska ritningar.
Isometric Lika vinkel axonometrisk vy (30 ° axlar). Populär i spelkonst och arkitektoniska diagram.
Kabinett Oblique projektion där djupaxeln dras i halv skala och 45°.
Cavalier Oblique projektion där djupaxeln dras i full skala och 45°.

Primitiva

Fem inbyggda 3D-former:

Primitiva Beskrivning
Kuba Konfigurerbar storlek
Sfären Konfigurerbar radie och segment räknas
Cylinder Konfigurerbar radie och höjd
Torus Konfigurerbar större/mindre radii
Cone Konfigurerbar radie och höjd

Varje primitiv stöder anpassade färger och rotation på alla axlar.

GPU Acceleration

Rendering väljer automatiskt den bästa tillgängliga backend:

  1. WebGPU compute – snabbast, används när det är tillgängligt
  2. WebGL2 omvandla feedback - snabb nedgång
  3. *CPU - universell nedgång

GPU-acceleration aktiveras automatiskt när en scen överstiger 150 ansikten.

Kamera

Orbitalkameran låter dig styra visningsvinkeln:

  • *Position – där kameran är i 3D-utrymme
  • Target – där kameran tittar på (omloppscentrum)

Välja och rita 3D-objekt

3D-objekt är valbara och släpbara på duken, precis som 2D-objekt:

  • Klicka på ett 3D-objekt för att välja det
  • Drag att ompositionera den
  • Animationer pausar automatiskt under drag och återupptas när de släpps
  • Den dragna positionen kvarstår över animationsramar

3D Projection Showcase Mallen

En förbyggd mall visar 3D-projektionssystemet med flera primitiva, rotationsanimationer och olika projektionstyper. Hitta den i mallbiblioteket.

Begränsningar

  • Standard animation presets (fader, studsa, rulla, puls etc.) stöds inte på 3D-objekt. 3D-objekt använder sitt eget rotationsanimationssystem genom ThreeD-rendering pipeline. Att tillämpa en standardanimering på ett 3D-objekt kommer inte att ha någon effekt.
  • 3D-objekt gör som platt polygon fyller - ingen texturkartläggning, belysning eller skuggor.
  • Kollisionsdetektering mellan 3D-objekt är ännu inte tillgänglig.

Tips

  1. ** Börja med isometrisk* - det är det mest visuellt tilltalande för diagram och illustrationer
  2. Använd rotationsanimationer - roterande 3D-objekt ger en stark känsla av djup
  3. Kombinera med 2D-objekt - blanda 3D-primitiv med text och former för infographic-stil kompositioner
  4. Justera kameraavstånd** – flytta kameran ytterligare för smickerperspektiv, närmare för dramatiskt djup

*Related: Animations | Keyframe Editor | Mallar