Projekcja 3D

3 min read

Render obiekty 3D bezpośrednio na płótnie PinePaper. System projekcji 3D obsługuje pięć typów projekcji, pięć prymitywnych kształtów, GPU- przyspieszone renderowanie i aparat orbitalny.

Przegląd

System projekcji 3D PinePaper jest samodzielną biblioteką zależności zerowej (~ 18KB minified), która sprawia, że prymitywy 3D jako wielokąty 2D na płótnie. Obiekty mogą być wybierane, przeciągane i animowane obok zwykłych elementów 2D.

Rodzaje projekcji

Wybierz sposób wyświetlania obiektów 3D na płótnie 2D:

Projekcja Opis
Perspektywy Realistyczna głębokość z prekursorem. Przedmioty dalej wydają się mniejsze. Konfiguracyjne pole widzenia (FOV).
Ortograficzne Brak zakłóceń głębokości. Równoległe linie pozostają równoległe. Wspólne w rysunkach technicznych / inżynieryjnych.
Izometryczny Equal- angle aksonometric view (30 ° axes). Popularny w sztuce gry i diagramy architektoniczne.
Gabinet Oblique projection, gdzie oś głębokości jest rysowana w połowie skali i 45 °.
Cavalier Przewodniczący Oblique projection, gdzie oś głębokości jest rysowana w pełnej skali i 45 °.

Prymitywne

Five built- w kształtach 3D:

Prymitywne Opis
Cube Konfigurable size
Kula Promień konfiguracji i liczba segmentów
Cylinder Promień i wysokość konfiguracji
Torus Przewodniczący Konfigurable major / minor radii
Łożysko Promień i wysokość konfiguracji

Każdy prymitywny obsługuje niestandardowe kolory i rotacja na wszystkich osiach.

Przyspieszenie GPU

Renderowanie automatycznie wybiera najlepsze dostępne backend:

      • WebGPU compute * * - najszybszy, używany, gdy jest dostępny
      • WebGL2 transformuje sprzężenie zwrotne * * - szybki upadek
      • CPU * * - uniwersalny zapas

Przyspieszenie GPU włącza się automatycznie, gdy scena przekracza 150 twarzy.

Kamera

Kamera orbitalna pozwala kontrolować kąt widzenia:

      • Pozycja * * - gdzie kamera jest w przestrzeni 3D
      • Target * * - gdzie kamera patrzy na (centrum orbity)
      • Pole widzenia * * - ilość zniekształceń perspektywa (tylko tryb perspektywa)

Wybór & Przeciąganie obiektów 3D

Obiekty 3D są wybieralne i rysowane na płótnie, podobnie jak elementy 2D:

  • Kliknij obiekt 3D, aby go wybrać
  • Przeciągnij do zmiany pozycji
  • Animacje zatrzymują się automatycznie podczas przeciągnij i wznowić po wydaniu
  • Pozycja ciągnięta utrzymuje się między ramami animacji

3D Projekcja Showcase szablon

Przygotowany szablon pokazuje system projekcji 3D z wieloma pierwotnymi, rotacyjnymi animacjami i różnymi typami projekcji. Znajdź to w bibliotece szablonów.

Ograniczenia

      • Standardowe ustawienia animacji * * (blaknięcie, odbicie, przewijanie, puls itp.) nie są obsługiwane na obiektach 3D. Obiekty 3D używają własnego systemu animacji rotacyjnej poprzez rurociąg renderujący ThreeD. Zastosowanie standardowej animacji do obiektu 3D nie przyniesie efektu.
  • Obiekty 3D renderują jako płaski wielokąt wypełnia - bez mapowania tekstury, oświetlenia lub cieni.
  • Wykrywanie zderzenia pomiędzy obiektami 3D nie jest jeszcze dostępne.

Wskazówki

      • Zacznij od izometrycznego * * - to najbardziej atrakcyjne wizualnie diagramy i ilustracje
      • Użyj animacji rotacyjnych * * - wirujące obiekty 3D daje silne poczucie głębokości
      • Połącz z elementami 2D * * - zmix pierwotne 3D z tekstem i kształtami dla kompozycji w stylu infographic
      • Dostosuj odległość kamery * * - przesuń kamerę dalej dla perspektywy flatter, bliżej dla dramatycznej głębi
    • Powiązane: * * [Animacje] (/features/animations) 124; [Edytor klawiszy] (/features/keyframes) 124; [Szablony] (/panels/templates)