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.

Podaj dalej

Artykuł był pomocny? Udostępnij.

FAQ

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.
Zaczynamy

Wynieś swój biznes wyżej.

Bezpłatna wycena w 24h. Bez zobowiązań.

Chcę Three.js na swojej stronie →