Animacje

Three.js na stronie WWW — jak wdrożyć przestrzenne tło 3D bez spowalniania strony

Przewodnik po Three.js WebGL dla stron www — wireframe icosahedron, particle systems i optymalizacja wydajności. PageSpeed 95+ mimo animacji 3D.

9 min czytania
🚀

Three.js to biblioteka WebGL która democratyzuje animacje 3D — nie potrzebujesz znać shaderów GLSL żeby stworzyć imponujące efekty przestrzenne.

Kiedy używać Three.js na stronie?

Three.js ma sens tylko gdy jest zintegrowany z designem strony — jako kinetyczne tło, animowany hero lub interaktywna prezentacja produktu. Nie dodawaj go dla samego "wow efektu" — Google penalizuje nadmiarowe skrypty.

Optymalizacja wydajności Three.js

Kluczowe zasady: limituj liczbę polygonów, wyłączaj pętlę render gdy karta jest niewidoczna (visibilityChange API), używaj PixelRatio min(window.devicePixelRatio, 2) i zawsze renderuj na osobnym Canvas.

Particle systems — magia bez przeciążenia

800 cząsteczek to sweet spot — wystarczająco imponujące wizualnie, zbyt mało żeby obciążyć GPU mobilny. Używaj BufferGeometry zamiast Geometry dla maksymalnej wydajności.

Najczęstsze pytania

Prawidłowo zaimplementowany Three.js (oddzielny Canvas, wyłączanie renderingu gdy poza ekranem, limit polygonów) nie wpływa negatywnie na LCP ani CLS — kluczowe metryki PageSpeed.
Tak, ale należy dostosować złożoność sceny. Zalecamy wyłączyć Three.js na urządzeniach < 768px lub użyć drastycznie uproszczonej sceny.

Chcesz osiągnąć podobne wyniki?

Bezpłatna konsultacja i wycena w 24h.

Chcę Three.js na swojej stronie →