threejs-fundamentals

Umiejętność do szybkiego uruchomienia scen 3D w Three.js. Nauczysz się tworzyć sceny, ustawiać kamery perspektywiczne, konfigurować renderer WebGL, dodawać obiekty 3D i zarządzać hierarchią transformacji. Zawiera gotowe przykłady dla geometrii, materiałów, oświetlenia oraz obsługi zmian rozmiaru okna przeglądarki.

1. Zaimportuj Three.js do swojego projektu: import * as THREE from "three";

2. Utwórz trzy główne komponenty: scenę (new THREE.Scene()), kamerę perspektywiczną (new THREE.PerspectiveCamera()) oraz renderer WebGL (new THREE.WebGLRenderer()). Ustaw rozmiar renderera na wymiary okna i dodaj go do DOM-u.

3. Dodaj obiekty do sceny, tworząc geometrię, materiał i mesh. Na przykład stwórz sześcian za pomocą BoxGeometry, przypisz mu MeshStandardMaterial i dodaj do sceny metodą scene.add().

4. Oświetl scenę, dodając światła takie jak AmbientLight (światło otoczenia) i DirectionalLight (światło kierunkowe). Ustaw pozycję światła kierunkowego, aby uzyskać realistyczne cienie.

5. Utwórz pętlę animacji za pomocą requestAnimationFrame(). W każdej klatce modyfikuj rotację obiektu i renderuj scenę metodą renderer.render(scene, camera).

6. Obsłuż zmianę rozmiaru okna przeglądarki: nasłuchuj zdarzenia resize, zaktualizuj aspect ratio kamery i rozmiar renderera, aby scena pozostała responsywna.