Мой путь к интерактивным 3D-сайтам

Несколько красивых, сочных вращающихся куч дынь были одной из моих первых попыток создать что-то с помощью three.js.

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

Примечание. Вы также можете посмотреть это как видео.

Почему я использую Three.js

Почему ты спрашиваешь? Я всегда находил это очень интригующим и хотел создать что-то подобное сам. Я давно интересовался 3D-дизайном/моделированием и играл с Blender и другим программным обеспечением, поэтому мне очень хотелось начать создавать что-то с помощью three.js.

Проблемы, с которыми я столкнулся

Самая большая проблема, с которой я столкнулся, заключалась в том, что я переусердствовал со своим техническим стеком. Я не использовал React почти два года и уже хотел попробовать next.js и многие другие библиотеки, но все развалилось. Я получал ошибки за ошибками, и ничего не работало, и моя мотивация исчезла.

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

Мое видение и идея

Прежде всего, я хочу поделиться своим путешествием по созданию этого портфолио. Я хочу поделиться тем, что я узнаю, и с какими проблемами я сталкиваюсь на этом пути, в надежде, что это поддержит мою мотивацию. Когда этот веб-сайт, наконец, будет готов, я хочу сохранить этот канал, завершить все мои заброшенные побочные проекты, которые я собрал за последние годы, и даже начать новые!

Итак… какова была моя идея в первую очередь? Для чего я хотел использовать three.js? Что ж, у меня была и есть довольно четкая картина в голове: я разработчик и фотограф-любитель, и я хотел отобразить и то, и другое соответственно. И поскольку теперь у нас есть все эти причудливые инструменты искусственного интеллекта, я попытался позволить им нарисовать для меня ту картину, которая была у меня в голове в течение прошлого года. Моя идея заключалась в том, чтобы отобразить ноутбук и камеру в виде 3D-моделей, с которыми пользователь мог бы взаимодействовать. ИИ дал мне некоторые интересные результаты, которые я могу использовать для вдохновения, когда буду создавать свой реальный дизайн позже, и я, вероятно, буду возвращаться к ИИ снова и снова, так как это уже оказалось действительно полезным инструментом!

Создание 3D-моделей

Мне нужно создать эти 3D-модели, а это значит, что я должен глубоко погрузиться в Blender, который уже снова вызывает воспоминания о пончиках. Итак, на данный момент все, чего я хочу добиться, — это создать пончик и отобразить его на веб-сайте, что может быть уже достаточно сложно, поскольку у меня также нет большого опыта в three.js. Я буду учиться этому по ходу дела.

Поэтому следующий логический шаг — удалить все, что у меня было раньше, чтобы снова начать этот проект с нуля… и исправить мою конфигурацию git, потому что она почему-то сломалась на этом компьютере. Отлично, уже снова трачу время на самое важное.

До того, как я действительно начал работать с Blender, я пытался использовать ChatGPT, чтобы помочь мне создать некоторые 3D-модели, потому что я видел, как некоторые люди используют его для создания svgs и некоторых сумасшедших скриптов Python, поэтому я подумал, почему бы и нет?

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

После этого небольшого приключения я решил самостоятельно смоделировать вкусные пончики. И примерно через семь часов я создал эту красоту:

Экспорт из Блендера

Закончив работу с пончиком и исправив репозиторий, я успешно создал новый проект React, установил все необходимые мне библиотеки three.js. Теперь мне оставалось только придумать, как экспортировать свои модели из Blender, чтобы использовать их в проекте — но это уже приводило к некоторым проблемам.

После быстрого поиска я прочитал эту документацию. Он рекомендовал использовать этот инструмент для преобразования вашей модели в компонент React, но это казалось слишком хорошим, чтобы быть правдой. Оказывается, половина того, что у меня было в рендере, не работало в three.js.

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

Как я уже говорил, кое-что на рендере не работало, и как видите, брызги на пончике и на фоне не отображаются. Это потому, что я использовал узлы геометрии в Blender для их создания, и я не мог понять, как заставить их работать с экспортом модели. Если это вообще возможно. Так что я переключил свое внимание и просто попытался показать что-то на данный момент, так как пончик не будет моим окончательным рендером — скорее, это будет доказательство концепции. Но было приятно осознавать, что мне действительно приходилось обращать внимание на многие вещи, когда я позже создавал свои настоящие модели.

Как ни странно, моей самой большой проблемой было выяснить, почему пончик всегда отображался в небольшой части экрана. И когда я углубился в 20 строк CSS, которые поставлялись с приложением React по умолчанию, я обнаружил проблему. Я бездумно использовал min-width и min-height, которые почему-то не покрывали всю высоту экрана. Мои потертые знания CSS не могут объяснить, почему это происходит, но после того, как я покопался, я изменил его на ширину и высоту, и все заработало, как и ожидалось. Я люблю CSS.

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

Спасибо за прочтение!