10 потрясающих примеров Three.js с открытым исходным кодом в действии

Это может показаться безумием, но вы действительно можете создавать 3D-объекты с помощью JavaScript. Большинство веб-разработчиков используют для этого такие библиотеки, как Three.js.

Но это настолько детальный процесс, что не каждый удосуживается в него вникнуть. Теперь, если вам интересно узнать о 3D JS, лучший способ узнать — это изучить других. Именно поэтому я сделал эту галерею.

Это одни из лучших проектов Three.js, которые я смог найти на CodePen. Они имеют множество различных стилей и черт, которые заставят ваш творческий двигатель работать.

1. Низкополигональная Земля

С одним HTML-элементом и несколькими десятками строк CSS/JS у нас есть низкополигональная Земля от разработчика Сэма Сакконе.

Сначала может показаться, что это не так много. Но это одна из самых выдающихся идей, которые я видел, и в ней даже используется собственный эффект анимации. Массивы суши даже торчат над Землей, что придает ей гораздо более реалистичный вид.

Любой, кто использовал Three.js раньше, должен знать, насколько это круто.

Это, безусловно, шаг вперед по сравнению с аналогичными проектами — в основном из-за меньшей кодовой базы.

2. Сферы

Этот странный проект, похожий на планету, также использует Three.js с довольно аккуратным эффектом. Spheres работает на препроцессоре Stylus, который, как вы видите, импортирован в CSS.

Он также работает без HTML, что действительно делает его зрелищным. Это все JS, все 3D и отлично работает в любом современном браузере.

Меньшие сферы скользят по большему шару, используя геометрические функции из библиотеки JS. Кажется безумием, что это вообще возможно, но это свидетельство того, как далеко мы продвинулись в CSS.

3. Вращение планеты

Переходя к дальнейшим идеям планетоидов, у нас есть эта сумасшедшая вращающаяся галактика, созданная разработчиком Брайаном Джонсом.

Он также не использует ничего, кроме Three.js и некоторого базового CSS для стилизации и организации планет. Я должен сказать, 3D-эффекты удивительны. Я до сих пор не могу понять, что это возможно в обычном веб-браузере!

Но нельзя отрицать, что этот фрагмент CodePen является отличным помощником в учебе, если вы только начинаете осваивать Three.js.

4. Логотип домика на дереве в Three.js

Ресурс онлайн-обучения Treehouse просто феноменален, особенно для новичков. Один из их инструкторов, Ник Петтит, фактически создал полный логотип Treehouse с помощью Three.js.

И позвольте мне сказать, что это удивительная вещь! Я никогда не видел такой установки и редко вижу ручки с такими подробными комментариями. Код Ника значительно упрощает копание, поиск функций, которые вы не понимаете, а затем поиск ответов в Google.

Все в этом 3D-лого должно доказывать, что современный JS далеко не устарел.

Подсказка: попробуйте щелкнуть+перетащить по экрану, чтобы повернуть логотип. Забавный материал!

5. Деревянная бочка

Вот еще один сумасшедший фрагмент, разработанный Ником Петтитом с использованием только чистого кода JS. Никакого HTML, никакого CSS — все отображается на языке JavaScript.

Естественно, это зависит от элемента canvas, который вы можете сгенерировать внутри JavaScript. Я сам немного использовал его, но никогда до такого уровня. Это показывает, как много вы можете сделать с солидной 3D-библиотекой.

И это также доказывает, что Ник действительно умеет учить. Это всего лишь один из многих примеров в его аккаунте на CodePen — все они снабжены легко читаемыми комментариями для изучения в процессе работы.

6. Три.js + ТвинМакс

Разработчик Мартанд Кашьяп объединил скрипт TweenMax с Three.js, чтобы сделать эту сумасшедшую вещь.

Это одна из самых уникальных ручек в этом списке с некоторыми крутыми анимационными эффектами. Панели на самом деле выглядят как плоские 2D-поверхности, но анимация перелистывания создает естественный 3D-эффект. Это становится довольно сумасшедшим, если вы смотрите на это достаточно долго.

На самом деле это было основано на проекте моушн-графики, который Мартанд преобразовал в JavaScript. Я вижу это намного чаще, и это чертовски впечатляет.

7. Звездное поле частиц

Концепция движения на 2D-поверхности напоминает всевозможные схемы параллакса. Вы найдете их по всему Интернету, много раз используя экспериментальные функции в JavaScript.

И этот фрагмент из CodePen превосходно подходит для сбора таких идей. У него довольно сумасшедшая анимация с разной скоростью масштабирования, боковым панорамированием и кучей других связанных функций.

Частицы генерируются динамически, и вы можете щелкнуть в любом месте страницы, чтобы увеличить масштаб. Это похоже на бесконечную пустоту пространства — очень похожую на ту, в которой мы живем. Но эта создана с использованием чистого кода JS.

8. Кубики ветчины

Чтобы узнать больше о вращающейся геометрии, посмотрите эти кубы Three.js. Они работают на языке шаблонов Haml вместе с ~100 строками JavaScript.

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

К счастью, вы можете справиться со всем этим с помощью Three.js — с правильными фрагментами кода. И этот может работать как отличный шаблон для этой цели.

9. Тессеракт

Майк Фей разработал этот невероятно сложный тессеракт, визуализированный в трехмерном пространстве. На самом деле это больше похоже на развернутый куб, организованный в трехмерное пространство — что-то вроде куба внутри куба.

Но обратите внимание, что эта демонстрация требует много библиотек, чтобы заставить ее работать. У Майка есть пять разных JS-скриптов с jQuery, jQuery UI, ThreeJS, TweenJS и CubeJS-скрипт. Последние 3 размещены на его личном сайте и должны быть доступны бесплатно.

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

10. 3D-осколки

Разработчик Тобиас Дур создал эти 3D-осколки как образец того, что возможно в ThreeJS. Они работают так же, как вращающиеся кубы, упомянутые ранее, за исключением того, что формы другие, а затенение тоже исчезло.

Я бы посчитал это более простым введением в изучение ThreeJS, если вы не знаете, с чего начать. Конечно, это не учебник, поэтому он не может научить вас, как другие ресурсы.

Но, просто изучив этот код, вы уйдете с новыми идеями для своей работы.

11. 3D Дерево Пифагора

Это 3D-дерево Пифагора просто потрясающе. Разработчик Хосеп Льодра создал этот проект, используя всего 150 строк JavaScript и библиотеку Three.js.

На самом деле он основан на этом проекте, о котором я упоминал ранее. По сути, он структурирует эти кубы в единую определенную форму, а затем организует их в зависимости от размера и положения.

Если вы не знаете, что можно сделать с Three.js, я надеюсь, что эта галерея предложит вам немного вдохновения. Но вы всегда можете найти больше на CodePen, если хотите осмотреться.