threejs-fundamentals
Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
How to use
Zaimportuj Three.js do swojego projektu:
import * as THREE from "three";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.Dodaj obiekty do sceny, tworząc geometrię, materiał i mesh. Na przykład stwórz sześcian za pomocą
BoxGeometry, przypisz muMeshStandardMateriali dodaj do sceny metodąscene.add().Oświetl scenę, dodając światła takie jak
AmbientLight(światło otoczenia) iDirectionalLight(światło kierunkowe). Ustaw pozycję światła kierunkowego, aby uzyskać realistyczne cienie.Utwórz pętlę animacji za pomocą
requestAnimationFrame(). W każdej klatce modyfikuj rotację obiektu i renderuj scenę metodąrenderer.render(scene, camera).Obsłuż zmianę rozmiaru okna przeglądarki: nasłuchuj zdarzenia
resize, zaktualizuj aspect ratio kamery i rozmiar renderera, aby scena pozostała responsywna.