Matematyczne efekty w Three.js

Grafika komputerowa i matematyka są ze sobą ściśle powiązane. W tym artykule poznasz cztery ciekawe efekty wizualne oparte na matematyce. Każdy z nich pokazuje inne podejście do tworzenia grafiki w czasie rzeczywistym przy użyciu biblioteki Three.js.

Wspólny setup

Poniższy kod tworzy scenę 3D, kamerę oraz renderer. To absolutna podstawa każdego projektu w Three.js. 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({antialias:true});

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.z = 50;

Kwiat Fibonacciego - matematyka w naturze

Kwiat Fibonacciego to wizualizacja inspirowana naturą. W wielu roślinach (np. słonecznikach) nasiona układają się w spiralny wzór zgodny z ciągiem Fibonacciego. Kluczową rolę odgrywa tzw. złoty kąt (~137.5°), który zapewnia równomierne rozmieszczenie punktów. 
const goldenAngle = Math.PI * (3 - Math.sqrt(5));
W pętli generujemy kolejne punkty: 
const r = Math.sqrt(i) * 0.7;
const theta = i * goldenAngle;
  • r - odległość od środka (rośnie powoli)
  • theta - kąt obrotu
vertices.push(r * Math.cos(theta), r * Math.sin(theta), 0);
Przeliczamy współrzędne biegunowe na kartezjańskie.

Jak działa algorytm?

  • każdy punkt obracamy o stały kąt
  • zwiększamy jego odległość od środka
  • rysujemy punkt
Efekt końcowy to naturalnie wyglądający wzór spiralny. Fibonacciego kwiat w three.js przykład

System cząsteczek

Ten przykład pokazuje prostą symulację cząsteczek poruszających się w przestrzeni 3D. Systemy cząsteczek są szeroko stosowane w grach i symulacjach np. do tworzenia ognia, dymu czy deszczu.

Jak to działa?

  • tworzymy wiele punktów
  • każdy ma swoją prędkość
  • w każdej klatce zmieniamy jego pozycję
positions.push((Math.random()-0.5)*100,...);
velocities.push((Math.random()-0.5)*0.3,...);
Każda cząsteczka ma pozycję i prędkość. 
pos[i*3] += velocities[i*3];
W każdej klatce aktualizujemy położenie cząstek. 
geometry.attributes.position.needsUpdate = true;
Ta linia informuje Three.js, że dane się zmieniły. System cząsteczek przykład

Wzór rekurencyjny

W tym przykładzie tworzymy fraktal przypominający drzewo. Jest to tzw. drzewo binarne - każda gałąź dzieli się na dwie kolejne. Fraktale to struktury samopodobne - każda część wygląda podobnie do całości. 
function branch(x,y,len,angle,depth)
Piszemy funkcję tworzącą gałąź. Parametr depth kontroluje "głębokość" drzewa. 
branch(x2,y2,len*0.7,angle+0.5,depth-1);
branch(x2,y2,len*0.7,angle-0.5,depth-1);
Następnie każda gałąź tworzy dwie nowe. To właśnie rekurencja - funkcja wywołuje samą siebie. Efekt przypomina drzewo. Drzewo binarne przykład

Fala sinusoidalna - trygonometria w akcji

Przykład pokazuje, jak wykorzystać funkcje trygonometryczne do animacji. Funkcja sinus jest jedną z podstawowych funkcji trygonometrycznych i opisuje wiele zjawisk fizycznych np. fale dźwiękowe, światło czy ruch wahadła. 
pos[i*3+1] = Math.sin(i*0.2 + t) * 5;
Funkcja sinus generuje falę. Zmienna t odpowiada za animację w czasie: 
t += 0.05;
Efekt to płynnie poruszająca się fala. Fala sinusoidalna przykład