Three.js прочно вошёл в арсенал веб-разработчиков, открывая двери в мир интерактивной 3D-графики прямо в браузере. В этой подборке я собрал самые впечатляющие проекты, которые демонстрируют, на что способен этот фреймворк. От логистических платформ до креативных портфолио – каждый сайт рассказывает свою историю с помощью WebGL.

Лучшие проекты на Three.js

Ниже представлены сайты, которые вдохновляют и показывают новые грани веб-разработки. Все ссылки ведут на оригинальные ресурсы, авторство и технологии указаны согласно открытым данным.

United Carriers
unitedcarriers.com
Логистический сайт с 3D-историей: грузовики, корабли, самолёты – всё в едином скролл-повествовании.
Barba.jsGSAPThree.jsWebflow
Bearplus
Composites.archi
composites.archi
Архитектурный сайт с использованием Three.js для визуализации композитных материалов.
Three.jsGSAP
Автор не указан
Experience The Best You
experiencethebestyou.com
Иммерсивный сайт с акцентом на личный брендинг и 3D-анимации.
Three.jsGSAP
Автор не указан
Stripe Press
press.stripe.com
Издательский сайт с минималистичным 3D-оформлением и плавными переходами.
Three.jsGSAP
Stripe
Artpill Studio
artpill.studio
Креативное портфолио с глубокой интеграцией 3D-сцен и интерактива.
Three.jsGSAP
Artpill Studio
Blueyard
blueyard.com
Консалтинговый сайт с уникальной 3D-визуализацией и анимацией.
Three.jsGSAP
Blueyard
Peter Csipkay
petercsipkay.com
Портфолио креативного разработчика с впечатляющими 3D-эффектами.
Astro.jsThree.js
Peter Csipkay
Ricardo Chance
ricardochance.com
Портфолио с кастомным шейдерным морфингом, 3D-каруселью и скролл-анимацией.
GSAPR3FThree.jsTypescript
Ricardo Chance
GalTech Vision
galtechvision.com
Синхронизированный с прокруткой WebGL с PBR, шейдерами и адаптивным качеством.
Three.jsVue.jsGSAP
GalTech Vision
WebGL Gallery
experiments.ricardochance.com
Эксперимент с кастомными шейдерами: бесконечная сетка, карусель, листание и физика.
Three.jsVite.jsGLSL
Ricardo Chance
Fredric Hegland
fredrichegland.no
Портфолио с исследованием Солнечной системы: летайте между планет!
React.jsThree.jsVite.js
Fredric Hegland
Framemode
framemode.com
Кинематографичное портфолио с лунной средой, орбитой Земли и интерактивным исследованием.
Three.jsVue.jsTypescript
Daniel Hendricks
Kumar Abhishek
kabhishek18.com
Портфолио фрилансера с акцентом на 3D-истории и анимацию.
Three.js
Kumar Abhishek
OceanX 2025
2025.oceanx.org
Эксплорация океана с помощью 3D-карт и интерактивных сцен.
Three.jsGSAP
OceanX
Studio Dialect
studiodialect.com
Агентство с мощным 3D-портфолио и плавными переходами.
R3FThree.jsGSAP
studiodialect
Alche.studio
alche.studio
Креативная студия с экспериментальным 3D-дизайном.
Three.js
Alche.studio
Timekadel
timekadel.com
Сайт с нестандартной 3D-визуализацией времени и пространства.
Three.js
Автор не указан
Continuous.vc
continuous.vc
Венчурный сайт с минималистичным 3D-интерфейсом.
Three.js
Continuous.vc
Topology.vc
topology.vc
Сайт венчурной фирмы с уникальной 3D-графикой.
Three.js
Topology.vc
Источник: Все проекты собраны с threejsresources.com/showcase. Авторские права принадлежат их создателям. Ссылки на оригиналы указаны в карточках.

Технологии и тренды

Анализ представленных проектов показывает, что современный стек Three.js-разработки включает:

  • GSAP – для плавных скролл-анимаций и таймлайнов.
  • React Three Fiber – декларативный подход к 3D в React-приложениях.
  • Кастомные шейдеры (GLSL) – для уникальных визуальных эффектов.
  • Vite.js / Astro.js – для быстрой сборки и оптимизации.
Мой совет: Изучайте код этих проектов, экспериментируйте с шейдерами и не бойтесь комбинировать Three.js с GSAP – это даёт потрясающий результат.

Следующий пост будет о GSAP более подробно и детально.
Следите за обновлениями!