3D-Projektion

Rendern Sie 3D-Objekte direkt auf der PinePaper-Canvas. Das 3D-Projektionssystem unterstützt fünf Projektionstypen, fünf primitive Formen, GPU-beschleunigtes Rendern und eine Orbitalkamera.

Übersicht

Das 3D-Projektionssystem von PinePaper ist eine eigenständige Null-Abhängigkeitsbibliothek (~18KB verkleinert), die 3D-Primitive als 2D-Polygone auf der Leinwand darstellt. Objekte können neben normalen 2D-Objekten ausgewählt, gezogen und animiert werden.

Projektionsarten

Wählen Sie aus, wie 3D-Objekte auf die 2D-Canvas projiziert werden:

Projektion Beschreibung
Perspektive Realistische Tiefe mit Verkürzung. Objekte weiter weg erscheinen kleiner. Konfigurierbares Sichtfeld (FOV).
Orthographie Keine Tiefenverzerrung. Parallele Linien bleiben parallel. Häufig in technischen / technischen Zeichnungen.
Isometrisch Winkelgleiche axonometrische Ansicht (30°-Achsen). Beliebt in der Spielkunst und architektonische Diagramme.
Kabinett Schräge Projektion, bei der die Tiefenachse halbskalig und 45° gezeichnet ist.
Kavalier Schräge Projektion, bei der die Tiefenachse in vollem Maßstab und 45° gezeichnet ist.

Primitiven

Fünf eingebaute 3D-Formen:

Primitiv Beschreibung
Würfel Konfigurierbare Größe
Kugel Konfigurierbarer Radius und Segmentanzahl
Zylinder Konfigurierbarer Radius und Höhe
Torus Konfigurierbare Haupt-/Minderradien
Zapfen Konfigurierbarer Radius und Höhe

Jedes Primitive unterstützt benutzerdefinierte Farben und Rotation auf allen Achsen.

GPU Beschleunigung

Rendering wählt automatisch das beste verfügbare Backend aus:

  1. WebGPU compute – am schnellsten, wenn verfügbar
  2. WebGL2 transformieren Feedback – schnelles Fallback
  3. CPU — universeller Fallback

Die GPU-Beschleunigung wird automatisch aktiviert, wenn eine Szene 150 Gesichter überschreitet.

Kamera

Mit der Orbitalkamera können Sie den Blickwinkel steuern:

  • Position – wo sich die Kamera im 3D-Raum befindet
  • Ziel — wo die Kamera schaut (Orbit-Center)
  • Sichtfeld – Perspektivische Verzerrung (nur perspektivischer Modus)

3D-Objekte auswählen und ziehen

3D-Objekte sind wählbar und schleppbar auf der Leinwand, genau wie 2D-Objekte:

  • Klicken Sie auf ein 3D-Objekt, um es auszuwählen
  • Drag zum Repositionieren
  • Animationen pausieren automatisch während Drag & Resume, wenn sie veröffentlicht werden
  • Die gezogene Position bleibt über Animationsrahmen bestehen

3D Projection Showcase Vorlage

Eine vorgefertigte Vorlage demonstriert das 3D-Projektionssystem mit mehreren Primitiven, Rotationsanimationen und verschiedenen Projektionstypen. Finden Sie es in der Template Library.

Beschränkungen

  • Standardanimations-Presets (fade, bounce, scroll, pulse, etc.) werden bei 3D-Objekten nicht unterstützt. 3D-Objekte verwenden ihr eigenes Rotationsanimationssystem über die ThreeD-Rendering-Pipeline. Das Anwenden einer Standardanimation auf ein 3D-Objekt hat keine Wirkung.
  • 3D-Objekte werden als flache Polygonfüllungen dargestellt - keine Texturkartierung, Beleuchtung oder Schatten.
  • Kollisionserkennung zwischen 3D-Objekten ist noch nicht verfügbar.

Tipps

  1. Beginnen Sie mit isometrischen — es ist die visuell attraktivste für Diagramme und Illustrationen
  2. Verwenden Sie Rotationsanimationen - rotierende 3D-Objekte vermitteln ein starkes Gefühl der Tiefe
  3. Kombinieren Sie mit 2D-Artikeln - mischen Sie 3D-Primitive mit Text und Formen für Kompositionen im Infografikstil
  4. Kameraabstand anpassen - Bewegen Sie die Kamera weiter für eine flachere Perspektive, näher für dramatische Tiefe

Related: Animationen | Keyframe Editor | Vorlagen