Как делать сайты с 3D — Дизайн на vc.ru
В этот раз расскажем, как можно использовать 3D для сайтов. Как создавать трехмерные объекты, на что смотреть при разработке дизайна с 3D, как оптимизировать работу таких сайтов и пару слов о WebGL. Статья поможет более корректно ставить задачи 3D-шникам.
7487 просмотров
Для начала объясним, зачем вообще так заморачиваться:
Текст — это когда ты заставляешь человека строить образ в своей голове, опираясь на груду букв, которую ты ему любезно предоставил. Гораздо более гуманно этот образ дать готовым. Для этого мы используем в создании дизайна медиа: 3D, видео, фото, иллюстрации и тд. Заботливый и удобный интерфейс помогает пользователю и не принуждает его работать.
3D — это не про промо, а про смысл
3D как и текст — сугубо сервисная вещь. Как его использовать и применять ли вообще — вопрос UX. Например в этом сайте трехмерные модели нужны для того, чтобы показать конкретные объекты-триггеры и удовлетворить информационный запрос ЦА.
Подготовка
Концепт нужно довести до состояния, когда там есть все, кроме 3D;
Подготовить макеты страниц, на которые нужно 3D;
- Подготовить файлы с пустым альфа-каналом, чтобы можно было сделать видеорендер и примерить его;
Создать среду и ограничения. Определяемся, какой объект должен быть, его вид и характеристики. С участием фронтендеров определяем максимум, который вывезет будущий сайт;
Отдаем 3D-шнику, он готовит модели. Только получив их, можно переходить к обсуждению анимаций.
По большому счету есть два ключевых ограничения, о которых надо думать на этапе подготовки:
- Коммуникационная задача сайта вообще и 3D в частности;
- Техническая реализация.
Также на этапе подготовки нужно будет решить, будут ли в интерфейсе реальные модели или нет. Ведь…
есть два стула:
— на одном реальные модели
— на другом фейки: видео- и фоторендеры
У фейкового 3D есть плюсы: не нужно решать вопрос с экспортом реальных моделей в интерфейс. Но есть и минусы. Например весьма ограниченная интерактивность у видеорендеров — их можно проиграть только вперед. И неприемлемый размер страниц, содержащих секвенции. Весят секвенции очень много.
Давайте сразу разберемся с тем, что делать, если вы будете встраивать фейковые модели. Если коротко, то эта работа аналогична встраиванию видео. Специалист по 3D готовит модели и сцены с ними, рендерит это в видео и уже его вы и встраиваете. Как это делать, напомню, подробно расписано в другой нашей статье на VC.
Однако добавим: чем меньше цветов и перерисовок экрана, тем лучше можно будет оптимизировать видеорендер для встраивания.
Такие рендеры очень любят кодеки, и замечательно сжимают. Сравните с видеосъёмкой. Несмотря на то, что это таймлапс имеет большое количество статичных пикселей (синяя линия а графике), разница в оптимизации огромна — 3D выигрывает с отрывом (оранжевая линия). Снова покажем скрины с графиками оптимизации видеороликов и 3D-рендеров с помощью кодеков.
Реальные 3D-модели в интерфейсе
Реальные модели в интерфейсе сайта — это технология WebGL. С ее помощью можно по-настоящему встроить 3D-модель в сайт и делать с ней что угодно. Для работы вам понадобятся библиотеки:
three.js — большая, красивая, сочная, но может показаться сложной для начинающих. regl — поменьше, чем three.js, но проще для освоения.
Сочетание WebGL и указанных выше библиотек позволяют получить в интерфейсе настоящую интерактивность, дают множество визуальных эффектов, позволяют формировать впечатляющий пользовательский опыт.
Пример интерактивного повествования — сайт НИИ ТП Роскосмоса. С помощью ряда сцен рассказываем об услугах компании, ее якорных проектах и принципах работы некоторых систем. Никаких текстов, минимум напряжения для юзера
У WebGL есть особенности:
- Модели не будут выглядеть как на рендере. Хайполи поместить в интерфейс будет сложно;
- Чтобы применять настоящие модели, нужно правильно их проектировать с оглядкой на интерфейс, правильно моделить и анимировать. И дизайнер, и моделлер должны понимать, что далеко не все 3D-модели будут работать в вебе;
- С помощью WebGL можно не только работать с 3D-моделями, но и делать реалистичную физику и наделять ею например курсор или другие элементы сайта;
- WebGL позволяет создавать 3D эффекты: шейдерные переходы и искажения, эффекты глубины и много что еще.
Чтобы избежать проблем нужно получить решения от фронтендеров еще до того, как дизайнер загрузил всех и презентовал концепт заказчику.
Оптимизируем 3D-модели
Для понимания: в WebGL все изменения происходят с помощью JavaScript. А он исполняется на устройстве пользователя, да еще и в браузере. Разные браузеры работают по-разному. И если речь идет о сложной трехмерной модели: органика с анимациями, скелетная анимация, механизмы/оборудование, то оптимизировать следует на этапе дизайна. Дизайнеру нужно учитывать возможный объем файла, количество сцен, насколько сложное освещение в сцене потребуется. Когда сцена и объект хорошо продуманы, то технически всё можно сделать проще, ведь не во всех ракурсах нужна 100% детализация, не все элементы нужно прорабатывать и анимировать.
При анимации надо стремиться к наименьшему числу перерисовок. Масштаб перерисовки — количество пикселей, которые сменяются на мониторе. Чем меньше операций перерисовки, тем лучше.
Это можно закладывать на этапе проектирования модели и сцены. Например показывать объект не с четырёх сторон, а с двух. Или срезать все полигоны, которые юзер не видит. Тогда они не будут обсчитываться на видеокарте. Так получится выиграть в весе модели.
Изначально подробная модель карьерного самосвала была радикально упрощена. Правда, в итоговый сайт эта сцена не попала
Работая над оптимизацией 3D, приходится бороться за каждый килобайт. 2 мб — это уже очень много. А ведь моделей может быть несколько на одной странице.
Что еще влияет на вес модели в интерфейсе:
Чем меньше площадь модели на экране, тем лучше. Если площадь велика, то на слабых машинах такой сайт будет заметно тормозить;
Экранное сглаживание (anti-aliasing). На некоторых браузерах для сглаживания используется неоптимальные алгоритмы. Поэтому браузер увеличивает изображение: он отрисовывает больший, чем надо слой и таким образом тратит ресурсы процессора на антиалиасинг.
Работа с заказчиком
Все, что связано с 3D чрезвычайно больно и дорого править. Поэтому следует придерживаться нескольких простых правил:
— Использовать кастомные референсы
— Не показывать графику отдельно от дизайна сайта
— Всё примерять на дизайне сайта
Каждый свой шаг нужно утверждать с заказчиком. Чтобы потом после массы затраченных ресурсов не сидеть и не портить свою работу. Пример такого подхода — концепт ниже. Первая его часть это очень схематичные, не проработанные визуализации, которые позволили при небольших затратах дать клиенту максимум понимания, как всё будет выглядеть и работать. Во второй части ролика видны уже чистовые модели и анимации.
Концепт для компании Сибирский антрацит. Презентует проект строительства Северомуйского тоннеля-2
Кейс с «мясом» и подводными камнями
Это сайт мы уже показывали в статье про создание интерфейсных видео.
Теперь расскажем про него чуть подробнее.
Сначала хотели ставить 3D. После того, как разработали модели, стало ясно, что они велики по объему. Но мы этот нюанс проигнорировали, понадеявшись на то, что все проблемы решит WebGL. Не решил, и в ходе работы мы от него отказались, заменив реальные 3D-модели видеорендерами.
Видео тоже были очень большим. Активировались они при наведении, назад не проигрывались. То есть часть интерактивности мы принесли в жертву оптимизации. В конечном счете на каждую сцену требовалось два видео и по одному — на анимацию появления. На шесть сцен получилось 18 роликов. Это много, и далее встал вопрос, как это всё сжать.
Использовали кодеки H.264-265 и Vp9. Оказалось, что Vp9 врёт цвета, но ролики получались маленькими. А H.264-265 давали верные цвета, но видео получались тяжелыми. Перешли к сокращению количества кадров, и всё равно пришлось заниматься ручной подгонкой битрейта и кодеков. В итоге мы просто колоссально намаялись. Да, сайт получился и красивым, и быстрым, и всех устроил, но этого вала работы можно было избежать, спроектировав его иначе.
Если интересно узнать про WebGL подробнее, то есть вот такая лекция. Но она уже больше для программистов
REC Wiki » Десять лучших сайтов с 3D-моделями для 3D-печати
Если вы уже обзавелись 3D-принтером и пластиком для 3D-печати, осталось только найти цифровые модели. Самостоятельное 3D-моделирование — дело интересное, но освоение этого навыка потребует немало времени. Пока же предлагаем поискать что-нибудь интересное на сайтах в нашей подборке.
1. Thingiverse
Крупнейшая и наиболее известная площадка, Thingiverse — проект американской компании MakerBot, сделавшей огромный вклад в развитие любительских 3D-принтеров. Последние годы MakerBot работает под крылом корпорации Stratasys и ориентируется больше на профессиональный сегмент аддитивного рынка, но на работе Thingiverse это никак не сказалось. Название платформы — игра слов, означающая «Вселенная вещей» (Thing + Universe). Площадка остается самым большим репозиторием исключительно бесплатных 3D-моделей с ориентировкой на 3D-печать и продолжает расти.
На текущий момент Thingiverse предлагает свыше полутора миллионов 3D-моделей.
Сайт Thingiverse: www.thingiverse.com/
2. Instructables
Instructables — нечто большее, чем просто интернет-склад 3D-моделей. Эта платформа ориентирована в первую очередь на самодельщиков, а потому на Instructables размещаются не просто 3D-модели, а комплексные проекты — зачастую с использованием электроники, в основном хоббийные, но нередко и вполне серьезные. Ученые тоже пользуются этим сайтом, публикуя полезные опенсорсные проекты вроде 3D-печатных микроскопов на основе смартфонов. Главная особенность сайта в том, что проекты сопровождаются подробными, пошаговыми инструкциями — отсюда и название. Само собой, аддитивные технологии играют важную роль во многих из опубликованных проектов, а сами проекты предлагаются на бесплатной основе.
Сайт Instructables: www.instructables.com
3. Cults
Популярная площадка, базирующаяся во Франции.
Платформа работает по смешанной схеме, предлагая как бесплатные, так и платные модели. Платный раздел в немалой степени повлиял на богатый ассортимент, так как заработать на своих творениях может любой желающий пользователь. Сайт берет комиссию, но примерно 80% от стоимости каждой проданной 3D-модели уходят в карман авторов. Если вы не готовы платить за цифровые модели, все равно загляните на Cults и полистайте бесплатные предложения — там их немало. И пусть вас не смущает название, никакими культистами там и не пахнет. Cults — это всего лишь St. Luc наоборот, а Святой Лука считается покровителем художников.
Сайт: cults3d.com
4. MyMiniFactory
Лондонская платформа, тоже предлагающая смесь бесплатных и платных 3D-моделей. Многие из платных работ выкладываются профессиональными дизайнерами, а администрация нередко проводит конкурсы среди авторов. Особенность MyMiniFactory в том, что эта площадка гарантирует качество: публикуемые 3D-модели сначала проходят проверку на совместимость с 3D-принтерами, затем осуществляется пробная 3D-печать и только потом модель размещается в публичном доступе.
Джонатан Бек
Одно из наиболее известных начинаний, связанных с MyMiniFactory — проект Scan the World. Автором этой инициативы выступил британский энтузиаст Джонатан Бек, в 2014 году совершивший крупное «ограбление» лондонского музея. Правда, вынес Джонатан не настоящие экспонаты, а около десяти тысяч фотографий, на основе которых потом воссоздал облик экспонатов в цифровой форме с помощью фотограмметрии. С тех пор у Бека появилось немало сподвижников, вооруженных фотоаппаратами и 3D-сканерами и регулярно пополняющих коллекцию 3D-моделями предметов искусства и исторических артефактов со всего мира, в том числе из некоторых российских музеев. Все модели в коллекции Scan the World предлагаются совершенно бесплатно.
Сайт MyMiniFactory: www.myminifactory.com
5. Prusa Printers
Строго говоря, это не репозиторий 3D-моделей как таковой, а домашний сайт компании Prusa Research — предприятия чешского инженера Йозефа Пруши, чье имя знакомо всем энтузиастам аддитивных технологий.
Правда, на этой площадке Йозеф и его команда предлагают не только 3D-принтеры и расходные материалы собственного производства, но и 3D-модели, причем совершенно бесплатно. Так как эта компания занимается только аддитивными технологиями, все модели в каталоге оптимизированы под 3D-печать. Основная доля публикуемых моделей приходится на пользователей сайта, а команда Пруши регулярно стимулирует авторов различными конкурсами. Интересная особенность этой площадки в том, что она позволяет публиковать не только 3D-модели, но и готовый машинный код. С одной стороны, это хорошо, ибо пользователи могут сразу отправлять модель на 3D-печать без возни со слайсером. С другой стороны, всегда есть шанс несовместимости или откровенного саботажа, так что будьте осторожны, а если будут сомнения, просто скачивайте STL-файлы и готовьте код самостоятельно.
Сайт Prusa Printers: www.prusa3d.com
6. Pinshape
Еще одна копилка 3D-моделей, на этот раз канадского происхождения.
Первый вариант площадки просуществовал недолго, всего пару лет, но сразу после закрытия ресурс выкупил известный американский производитель стереолитографических 3D-принтеров Formlabs. Площадка продолжает работать по сей день и содержит десятки тысяч проектов. Как и большинство подобных платформ, Pinshape предлагает и платные, и бесплатные 3D-модели, а разместить работы может любой желающий.
Сайт Pinshape: pinshape.com
7. YouMagine
Еще один проект под корпоративным «зонтиком». Эта площадка основана одним из соучредителей нидерландской компании Ultimaker, в свою очередь хорошо известной целой чередой удачных FDM 3D-принтеров. Хотя это не самый большой ресурс (всего около двадцати тысяч проектов), у него есть два плюса. Во-первых, здесь предлагаются только бесплатные 3D-модели. Во-вторых, сайт структурирован таким образом, что дизайнерам проще совершенствовать свои и чужие работы, сотрудничать и получать отзывы. В результате здесь можно найти немало серьезных проектов, таких как 3D-печатные протезы OpenBionics, но и развлекательного контента тоже хватает.
Сайт YouMagine: www.youmagine.com
8. CGTrader
Этот литовский сайт изначально никакого отношения к 3D-печати не имел, будучи площадкой для обмена графическими моделями для компьютерных игр, виртуальной реальности и тому подобного. Однако, с ростом популярности аддитивных технологий на CGTrader появился специализированный раздел для публикации 3D-моделей с оптимизированными под 3D-печать полигональными сетками. Моделей для 3D-печати не так уж и много, всего около тринадцати тысяч, к тому же этот ресурс ориентирован на платный контент, хотя есть и бесплатные предложения. С другой стороны, этот сайт популярен среди профессиональных дизайнеров, так что здесь можно найти очень интересные и качественные работы.
Сайт CGTrader: www.cgtrader.com
9. Sketchfab
Франко-американская площадка Sketchfab похожа на CGTrader в том смысле, что здесь публикуются модели для компьютерных игр, виртуальной реальности и 3D-печати, а также в плане изобилия профессиональных работ.
С 3D-моделями для печати все немного сложнее: хотя на сайте множество бесплатных моделей, оптимизированные под 3D-печать находятся в платной секции. С другой стороны, ничто не мешает скачивать бесплатные варианты и пользоваться сторонними программами для ремонта мешей под 3D-печать, такими как Meshmixer или Netfabb.
Сайт Sketchfab: sketchfab.com
10. 3Dtoday
Российский сайт и основной портал для русскоговорящих энтузиастов 3D-печати. 3Dtoday создан как универсальная платформа с пользовательскими блогами, каталогами и торговой площадкой, а заодно имеет и коллекцию 3D-моделей, распределенных по разным категориям. Большая часть 3D-моделей предлагается на бесплатной основе, однако есть и платный раздел, пополняемый пользователями портала.
Сайт 3Dtoday: 3dtoday.ru
Лучшее средство просмотра 3D в Интернете
Управляйте своими 3D-ресурсами. Распространяйте опыт 3D и AR. Сотрудничайте с другими.
Продемонстрируйте свою работу. Покупайте и продавайте 3D модели.
посмотреть планы
Присоединяйтесь к миллионам создателей 3D и продемонстрируйте свою работу
присоединиться к скетчфабу
Покупайте и продавайте 3D-модели в магазине Sketchfab.
Купить 3D модели
Делитесь и встраивайте 3D-модели где угодно в Интернете
откройте для себя наши бизнес-решения
Делитесь и встраивайте 3D-модели где угодно в Интернете
Ведущий на рынке 3D-плеер для Интернета.
Интерактивный и настраиваемый, готовый к VR и AR.
Работает со всеми операционными системами, браузерами и устройствами.
Встраивается везде, для электронной коммерции, рекламы и социальных сетей.
Нам доверяют ведущие бренды
Откройте для себя наши бизнес-решения
Покупайте и продавайте 3D-модели в магазине Sketchfab.
Найдите все, от низкополигональных активов до анимированных установок и цифровых сканов для ваших проектов 3D, виртуальной реальности и дополненной реальности.
Что видишь, то и получаешь
Предварительный просмотр топологии, UV-развертки и текстур модели с помощью нашего средства 3D-просмотра и инспектора моделей перед покупкой.
См.
пример
Все, что вы ищете
От низкополигональных 3D-ресурсов видеоигр до фотограмметрии реального мира, 3D-моделей всех мыслимых категорий.
Просмотреть все категории 3D-моделей
Современные технические стандарты
PBR-материалов, анимированные риги и многое другое в универсальном формате.
Узнать больше
- Highlights
- Best selling
- Animated
- PBR
- Low poly
- High poly
- 3D Printable
- 3D Scan
Best sellingAnimatedPBRLow polyHigh poly3D Printable3D ScanAnimals & PetsArchitectureArt & AbstractCars & VehiclesCharacters & СуществаКультурное наследие и историяЭлектроника и гаджетыМода и стильЕда и напиткиМебель и домМузыкаПрирода и растенияНовости и политикаЛюдиМеста и путешествияНаука и технологииСпорт и фитнесОружие и военные
Просмотрите магазин Sketchfab
Самый мощный 3D-редактор онлайн
Внутренний доступ к мощному набору инструментов физического рендеринга для каждой отдельной модели.
Настройте освещение, материалы, анимацию, звук, аннотации, позиционирование в виртуальной реальности и многое другое.
10 ярких примеров 3D-сайтов (и как они создаются)
Ваш браузер не поддерживает это видеоИдеи
13 июля 2022 г.
Слова Джеффа Карделло
Независимо от того, пишете вы код или нет, сейчас существует так много способов начать работу с 3D в веб-дизайне.
Плоский дизайн когда-то доминировал в Интернете. Его стандартные сетки текста и визуальных элементов, безусловно, делают его практичным и удобным для пользователя подходом, но веб-дизайн может быть намного больше, чем продуманное расположение столбцов и строк.
Добавление 3D-элементов к вашему веб-дизайну — отличный способ создать незабываемый интерактивный опыт, а современные инструменты веб-дизайна без кода теперь доступны как никогда раньше. Мы собрали несколько интересных примеров 3D-сайтов, чтобы показать, как применять эффект, а также различные инструменты и методы, которые можно использовать для его воссоздания.
Использование 3D на вашем веб-сайте
Трехмерная анимация и другие трехмерные изображения могут многое добавить. Помимо создания мгновенной интерактивности и интриги в вашем дизайне, они помогают привлечь внимание к визуальным элементам и тексту, на которых вы хотите, чтобы посетители сосредоточились. Важные части веб-сайта, такие как обмен сообщениями, сведения о продукте и другая информация, могут быть развернуты в трехмерном виде, который гораздо интереснее и увлекательнее, чем стандартный плоский веб-дизайн.
Тем не менее, стоит отметить, что, хотя 3D-сайты хорошо работают при высоких скоростях Интернета на современных ноутбуках и мобильных устройствах, они могут немного глючить на более медленных и старых устройствах. Веб-сайт не обязательно должен быть полностью трехмерным — вместо того, чтобы создавать полностью захватывающий трехмерный мир, вы все равно можете экономно использовать трехмерные элементы для достижения большого эффекта.
[изображение/графика, относящиеся к вышеприведенному]
Хотя большая часть Интернета укладывается в аккуратные рамки двух измерений, трехмерные веб-сайты выходят за рамки сетки, создавая захватывающий опыт, который кажется захватывающим и новым.
Essential 3D Website Tools and Resources
Независимо от того, являетесь ли вы экспертом по анимационному дизайну, хорошо разбирающимся в JavaScript и React, или кем-то, кто более комфортно работает в пространстве без кода, существует множество различных приложений, которые вы можете использовать для создания трех -размерные веб-дизайны. Вот несколько наиболее популярных приложений для трехмерного моделирования, которые стоит изучить:
- AutoCAD
- Blender
- SketchUp
Vectary
Многие дизайнеры также считают, что библиотеки моделирования необходимы для создания многомерных веб-сайтов. Некоторые из достойных 3D-библиотек, которые стоит проверить, включают cgTrader, SketchFab, 3DExport и Vue.js. Вы можете просматривать некоторые из них непосредственно внутри Vev или загружать свои собственные файлы . файлы glb – легко создают 3D-веб-интерфейс .
Конечно, есть способы создать иллюзию объемности без создания сложной графики.
Компенсация скорости прокрутки элементов, добавление теней и работа со светом — все это способы создания 3D-визуализации. С помощью этих методов можно подделать размерность:
- Parallax Scrolling
- Анимированные визуальные эффекты
- Skeuomorphism
- Faux Dimensional Scrolling
- Glassmorphism
. несколько примеров 3D-сайтов.
[изображение/графика, относящиеся к вышеизложенному]
Chirpley
Chirpley связывает бренды с микроинфлюенсерами через свою торговую площадку на базе искусственного интеллекта. Они предлагают нетрадиционный способ маркетинга, и этот веб-сайт компании освобождается от условностей благодаря дизайну, полному трехмерных мультяшных изображений.
На этом сайте появляется красная птица. Этот причудливый пернатый талисман находится в центре их фирменного стиля, и его внешний вид повсюду уравновешивает более техническую информацию, объясняющую, как работает их продукт.
Благодаря красочному дизайну, наполненному игривыми визуальными эффектами, Chirpley рассказывает о сложностях того, что они делают, весело. Если вы ищете примеры 3D-сайтов, в которых много брендинга, вам следует отправиться на Chirpley.
Восхищайтесь, удивляйтесь
Это путешествие по веб-сайту электронной коммерции De Bijenkorf начинается с пчелы. Искры мерцают, когда он парит и мчится через густой лес, достигая спрятанных сокровищ, которые являются их продуктами. За большей частью этого дизайна стоит WebGL, библиотека веб-графики Javascript, предназначенная для интерактивных трехмерных изображений в Интернете.
Ваш браузер не поддерживает это видео.Это всеохватывающий опыт, основанный не только на трехмерных изображениях, которые уводят вас все глубже и глубже в лес и к предметам, которые они продают, но и на звуке. Звук кваканья лягушек, щебетания насекомых и журчания воды дополняет атмосферу леса.
De Bijenkorf представляет собой не просто веб-сайт розничной торговли, но предлагает захватывающий пользовательский опыт.
Это был один из самых сюрреалистичных 3D-сайтов, которые мы нашли, и мы надеемся, что у вас также будет возможность испытать его магию.
Uplinq.ai
Uplinq модернизирует бухгалтерский учет за счет автоматизации. По всему этому пространству изображения машин меняются местами при прокрутке. Благодаря блестящему металлу, трубам, шестерням, роботизированным рукам и другим движущимся частям эти анимации напоминают о технологиях и механизации, что идеально вписывается в то, что делает Uplinq.
Нередко веб-сайты компаний SaaS имеют стандартную сетку с несколькими разбросанными кнопками призыва к действию. Использование Uplinq трехмерных изображений придает этому дизайну футуристический пользовательский интерфейс, который отличает его от других.
Peter Tarka
Peter Tarka специализируется на трехмерных иллюстрациях, полных сложных деталей, приятных глазу цветов и форм. Он работал с некоторыми крупными клиентами, включая Spotify и Electronic Arts, а также делал анимацию для Uplinq.
ai в нашем последнем примере. Это витрина, полная замечательных цифровых изображений и иллюстраций, демонстрирующая возможности использования фреймворков веб-разработки, таких как Next.js, и программного обеспечения для анимации Cinema 4D.
Замечательно то, что Питер не обрушивает на вас весь свой художественный талант сразу. При наведении курсора на каждый квадрат проекта материализуется предварительный просмотр. Эти проблески демонстрируют его работу быстро и непосредственно.
Имея портфолио, важно демонстрировать свои лучшие работы и чтобы они были постоянными. Питер приходит с фантастической галереей проектов, каждый из которых отражает его таланты и чувство воображения. Если вы иллюстратор, UX-дизайнер или работаете в какой-либо другой визуальной области, портфолио Питера — один из самых художественных примеров 3D-сайтов, которые мы видели, и вам стоит их проверить.
Enric Moreu
Голубое небо с угловатыми облаками и одинокая фигура, стоящая на парящем участке земли, открывает это цифровое резюме для Eric Moreu .
Прокрутка вниз вращает этот парящий остров, приводя вас к следующей красочной сцене, подвешенной в воздухе. Там не так много текста или объяснений, но каждый раздел сообщает что-то о его прошлом и технических навыках с помощью умных иллюстраций. Если вы ищете примеры 3D-сайтов, использующих Blender, это отличный пример визуальных элементов, которые вы можете создать с его помощью.
Clou
Архитектура объединяет физические формы с пространством. Этот веб-сайт для китайской архитектурной фирмы Clou Architects работает с формой и пространством в цифровом мире с этой вращающейся каруселью проектов. Микровзаимодействия идут впереди, и при наведении курсора на каждый слайд он смещается, и в центре появляется увеличенная фотография.
Clou Architects не так полностью иммерсивны, как другие примеры 3D-сайтов, которые мы обсуждали. Хотя этот дизайн предлагает только трехмерные визуальные эффекты на первом экране, это введение позволяет раскрыть их архитектурную работу изобретательным и привлекающим внимание способом.
Портфолио Kamboko
Благодаря облегченной цветовой палитре, сглаженным краям и плавной анимации, это портфолио дизайна от Kamaboko мягко направляет вас в трехмерное представление студенческого жилого пространства. Опыт Камабоко в таких приложениях, как WebGL, анимация GSAP и Blender, ярко проявляется в этом иммерсивном портфолио. Нам нравится видеть примеры 3D-сайтов, которые отправляют вас в путешествие, и Kamaboko преуспевает в этом дизайне, богатом деталями.
Все начинается с широкоугольного снимка, а прокрутка приближает вас. Здесь приятно использовать перспективу, поскольку ваш взгляд меняется, когда вы исследуете это пространство и узнаете больше о том, кто такой Камабоко как человек и дизайнер.
Ваш браузер не поддерживает это видео Если вы визуальный дизайнер, то, как вы создаете свой собственный веб-сайт, должно свидетельствовать о ваших навыках и талантах. Одного этого портфолио достаточно, чтобы продемонстрировать суперспособности Камабоко как дизайнера.
Cat Genius
Это определенно один из самых творческих и забавных примеров 3D-сайтов, с которыми мы сталкивались. Cat Genius Вдохновленная дополненной реальностью игра от компании по производству кормов для домашних животных Opti Life, в которой вы управляете котом Симбой и ищете миску с едой. По пути вам будут задавать вопросы о кошках, и каждый правильный ответ приближает вас к обеду. Если вы дойдете до конца, вы получите код скидки.
Мы поклонники брендов, которые находят творческий подход, предлагая своим клиентам такие вещи, как коды скидок. Opti Life превращает получение одного из них в образовательный и развлекательный опыт.
SBS
Этот захватывающий интерактивный дизайн для Sopra Banking Software с изображением города, сияющего фиолетовым, желтым и синим, напоминает начало научно-фантастического фильма. Эта визуальная эстетика так хорошо отражает сферу финансов и высоких технологий, в которой они работают.
Ваш браузер не поддерживает это видео Пролетая над зданиями, вы попадаете на разные ориентиры.
Каждый из этих пунктов объясняет что-то, связанное с банковским делом и программным обеспечением Sopra. Существует множество контента, и это анимированное путешествие разделено таким образом, чтобы его было легко исследовать и испытать.
D2’s 30 До 30 лет
Как уже упоминалось, использование функций 3D-дизайна на вашем веб-сайте не должно быть всеобъемлющим. Тонкие трехмерные элементы могут создать не меньшее впечатление. Этот пример сделан в Веве D2 для их 2022 30 Отчет «До 30 лет» открывается анимированным 3D-глобусом с изображениями, демонстрирующими номинантов.
Помимо одной из самых оригинальных каруселей 3D-изображений, которые мы когда-либо видели, включение интерактивных точек на фотографии привлекает внимание пользователей с самого начала. Этот интерактивный подход позволяет вам раскрывать больше информации о номинантах, нажимая на горячие точки, создавая ощущение волнения, а также избегая слишком большого количества текста.
Интегрируйте трехмерные изображения в свои веб-проекты
Внедрение 3D-визуализации в ваш веб-дизайн теперь проще, чем когда-либо.
