3D-projectie

3 min read

Render 3D objecten direct op het PinePaper canvas. Het 3D projectiesysteem ondersteunt vijf projectietypes, vijf primitieve vormen, GPU-versnelde rendering en een orbitale camera.

Overzicht

PinePaper’s 3D projectie systeem is een standalone zero-dependentie bibliotheek (~18KB verminkt) die 3D primitieven als 2D polygons op het canvas maakt. Objecten kunnen worden geselecteerd, gesleept en geanimeerd naast gewone 2D-items.

Projectietypes

Kies hoe 3D objecten worden geprojecteerd op het 2D canvas:

Projectie Omschrijving
Perspectief Realistische diepte met voorverkorting. Objecten verder weg lijken kleiner. Configureerbaar gezichtsveld (FOV).
Orthografische Geen dieptevervorming. Parallelle lijnen blijven parallel. Gemeenschappelijk in technische/technische tekeningen.
Isometrisch Gelijkhoekig axonometrische weergave (30° assen). Populair in game art en architectonische diagrammen.
Kabinet Oblique projectie waarbij de diepteas op halve schaal en 45° wordt getekend.
Cavalier Oblique projectie waarbij de diepteas op volle schaal en 45° wordt getekend.

Primitieven

Vijf ingebouwde 3D-vormen:

Primitief Omschrijving
Kubus Configureerbare grootte
Bol Configureerbare radius en segmenttelling
Cilinder Configureerbare straal en hoogte
Torus Configureerbare major/minor radii
Cone Configureerbare straal en hoogte

Elk primitief ondersteunt aangepaste kleuren en rotatie op alle assen.

GPU-versnelling

Het renderen selecteert automatisch de beste beschikbare backend:

  1. WebGPU-berekenen Sneller, gebruikt indien beschikbaar
  2. WebGL2 transformeert feedback snelle terugval
  3. CPU

GPU acceleratie activeert automatisch wanneer een scène groter is dan 150 gezichten.

Camera

Met de orbitale camera kunt u de kijkhoek controleren:

  • Position
  • Target
  • Beeldveld

3D-objecten selecteren

3D objecten zijn selecteerbaar en sleepbaar op het canvas, net als 2D items:

  • Klik op een 3D object om het te selecteren
  • Sleep om het te verplaatsen
  • Animaties pauzeren automatisch tijdens slepen en hervatten wanneer vrijgegeven
  • De gesleepte positie houdt aan over animatieframes

3D Projectie Showcase-sjabloon

Een voorgebouwde sjabloon demonstreert het 3D projectiesysteem met meerdere primitieven, rotatie animaties en verschillende projectietypes. Vind het in de sjabloon bibliotheek.

Beperkingen

  • Standaard animatie presets (fade, bounce, scroll, pulse, etc.) worden niet ondersteund op 3D objecten. 3D objecten gebruiken hun eigen rotatie-animatiesysteem via de ThreeD rendering pijplijn. Een standaardanimatie toepassen op een 3D-object heeft geen effect.
  • 3D-objecten renderen als platte veelhoek vult .
  • Botsingsdetectie tussen 3D-objecten is nog niet beschikbaar.

Tips

  1. Begin met isometrische
  2. Gebruik rotatie animaties
  3. Combineer met 2D items
  4. Adjust cameraafstand

Gerelateerd: Animatie