Proiezione 3D

3 min read

Render oggetti 3D direttamente sulla tela PinePaper. Il sistema di proiezione 3D supporta cinque tipi di proiezione, cinque forme primitive, rendering accelerato dalla GPU e una fotocamera orbitale.

Panoramica

Il sistema di proiezione 3D di PinePaper è una libreria indipendente a zero-dipendenza (~18KB minified) che rende i primitivi 3D come poligoni 2D sulla tela. Gli oggetti possono essere selezionati, trascinati e animati insieme a oggetti 2D regolari.

Tipi di proiezione

Scegliere come gli oggetti 3D vengono proiettati sulla tela 2D:

Proiezione Descrizione
Prospettive Profondità realistica con avanzi. Gli oggetti più lontani appaiono più piccoli. Campo visivo configurabile (FOV).
Ortografico Nessuna distorsione di profondità. Le linee parallele rimangono parallele. Comune nei disegni tecnici/ingegneria.
Isometrica Vista assonometrica dell’angolo uguale (30° assi). Popolari nell’arte del gioco e diagrammi architettonici.
Governo Proiezione obliqua in cui l’asse di profondità è disegnato a metà scala e 45°.
Cavalier Proiezione obliqua dove l’asse di profondità è disegnato a scala piena e 45°.

Primitivi

Cinque forme 3D integrate:

Primitivo Descrizione
Cubo Dimensioni configurabili
Sfera Conto di raggio e segmenti configurabili
Cilindro Raggio e altezza configurabili
Torus Configurabile maggiore/minor radii
Cone Raggio e altezza configurabili

Ogni primitivo supporta colori personalizzati e rotazione su tutti gli assi.

Accelerazione GPU

Rendering seleziona automaticamente il miglior backend disponibile:

  1. WebGPU compute — più veloce, usato quando disponibile
  2. WebGL2 trasformare il feedback—il ritorno veloce
  3. CPU — Fallback universale

L’accelerazione GPU si attiva automaticamente quando una scena supera i 150 volti.

Macchina fotografica

La fotocamera orbitale consente di controllare l’angolo di visualizzazione:

  • Posizione — dove la fotocamera è nello spazio 3D
  • Target — dove la fotocamera guarda (centro orbitale)
  • Field of view — quantità di distorsione della prospettiva (solo modalità di prospettiva)

Selezione & Dragging oggetti 3D

Gli oggetti 3D sono selezionabili e trascinabili sulla tela, proprio come gli elementi 2D:

  • Fare clic su un oggetto 3D per selezionarlo
  • Trascinare per riposizionarlo
  • Le animazioni si interrompono automaticamente durante il drag and riprendere quando vengono rilasciate
  • La posizione trascinata persiste tra i frame di animazione

Modello della vetrina della proiezione 3D

Un modello pre-costruito dimostra il sistema di proiezione 3D con più primitivi, animazioni di rotazione e diversi tipi di proiezione. Trovalo nella libreria dei modelli.

Limitazioni

  • Preimpostazioni di animazione standard (fade, rimbalzo, scorrimento, impulso, ecc) non sono supportate su oggetti 3D. Gli oggetti 3D utilizzano il proprio sistema di animazione di rotazione attraverso la pipeline di rendering ThreeD. L’applicazione di un’animazione standard a un oggetto 3D non avrà effetto.
  • Oggetti 3D rendono come riempimenti poligonali piatti — nessuna mappatura della texture, illuminazione, o ombre.
  • Il rilevamento delle collisioni tra oggetti 3D non è ancora disponibile.

Consigli

  1. Start with isometric — è il più visivamente attraente per diagrammi e illustrazioni
  2. Utilizzare le animazioni di rotazione — gli oggetti 3D rotanti danno un forte senso di profondità
  3. Combinare con oggetti 2D — mescolare primitivi 3D con testo e forme per composizioni in stile infografico
  4. Adjust distanza della fotocamera — spostare la fotocamera più ulteriormente per la prospettiva più piatta, più vicino per profondità drammatica

Relato: Animations | Keyframe Editor | Template