Как получить 3D-модель из браузера

Обновлено: 04.07.2024

Вы креативный веб-дизайнер или ищете способы сделать свой веб-сайт более интерактивным и визуально привлекательным? Хотите интересно рекламировать свою продукцию? Не смотрите дальше. Сегодня мы научимся вставлять 3D-объекты на веб-сайт.

В этом руководстве мы создадим простую веб-страницу с основными компонентами, создадим ее слои, а затем вставим на веб-страницу 3D-объекты.

Ключевые выводы

В конце этого руководства читатель узнает о:

3D-объекты, форматы и некоторые их свойства.
Как создавать или приобретать 3D-объекты для своего веб-сайта.
Вставка 3D-объекта на веб-сайт.
Форматирование 3D-объекта, вставленного на веб-страницу.

Предпосылки

Прежде чем мы начнем, некоторые предварительные условия для этого руководства включают:

Базовые знания и хорошее понимание HTML и веб-разработки.
Основное понимание CSS.
На вашем компьютере установлена базовая среда разработки для веб-разработки или текстовый редактор. В нашем случае мы будем использовать Visual Studio Code.
Стабильное подключение к Интернету.

Что такое 3D-объекты?

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

Как получить 3D-объекты?

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

Создание 3D-объектов с нуля

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

Сканирование с реальных объектов

Вы можете создать его, отсканировав предмет выбранным вами сканером.

Фотограмметрия — это еще один процесс, который можно использовать.

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

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

Изменение существующих шаблонов

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

Онлайн-загрузка

Есть много сайтов с разными 3D-моделями. Примерами бесплатных загрузок являются, в частности, Sketchfab и Google Poly.

Форматы 3D-моделей

Они используются для хранения внешнего вида модели, кодирования анимации модели, кодирования геометрии и сохранения физического вида модели. Они используются в видеоиграх, 3D-печати, технике, фильмах и многом другом.

Доступны некоторые популярные форматы, в том числе FBX , STL , OBJ , glTF и DAE.

В нашем случае мы будем использовать модель glTF.

Формат передачи графического языка (glTF) — это формат 3D-моделей, разработанный для эффективной передачи и загрузки 3D-моделей приложениями.

После посещения указанных выше или любых других сайтов найдите любую предпочтительную модель и загрузите ее. В данном случае мы будем искать, скачивать и использовать модель гарнитуры виртуальной реальности (VR Headset) в формате glTF.

Атрибуты 3D-модели

Это характеристики просматриваемого 3D-объекта на сайте, установленные разработчиками внешнего интерфейса.

Некоторые атрибуты, которые можно установить для 3D-моделей, включают:

Автоповорот
Альтернативный текст (alt)
Видимость модели
Дополненная реальность
Действие касанием
Управление камерой
Источник (источник)
ios-src и многое другое…

Теперь перейдем к руководству.

Сначала давайте настроим нашу среду разработки Visual Studio Code.

На вкладке расширений найдите расширения HTML Boilerplate и Live Server и установите их.
Создайте папку и назовите ее «3D-объекты».
Откройте папку с Visual Studio Code и создайте две папки с именами «assets» и «css».
Создайте файл index.html в главном каталоге и файл style.css в папке CSS.

Создайте структуру веб-страницы

Мы собираемся создать простую структуру HTML.

Мы можем упростить процесс, используя шаблонные генераторы, которые могут быть предустановлены по умолчанию в Visual Studio Code или в качестве загружаемых расширений, введя в индексном файле «html: 5» или «html5-boilerplate».

Поскольку нам не нужны дополнительные элементы в сгенерированном шаблоне, мы удалим лишний код и свяжем его с нашим файлом CSS.

Давайте также свяжем его с некоторыми онлайн-скриптами, которые будут загружать некоторые шрифты и значки «Font Awesome».

Результат будет таким, как показано ниже:

Запустите работающий сервер, щелкнув правой кнопкой мыши файл index.html в проводнике и выбрав «Открыть с помощью Live server», или в строке состояния, нажав «Go live», чтобы запустить сервер.

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

Я рекомендую вам использовать браузер Google Chrome, так как он поддерживает большинство 3D-объектов. Вы можете изменить браузер по умолчанию в настройках.

Если предварительный просмотр веб-страницы не открывается автоматически в браузере, проверьте номер порта, который использует сервер, в строке состояния Visual Studio Code, а затем добавьте доступ к нему в браузере, введя URL-адрес, например:

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

В разделе заголовка добавьте ссылку для импорта кода JavaScript средства просмотра моделей. Это позволяет импортировать компонент на веб-страницу.

Скопируйте изображение логотипа в папку с ресурсами.

Когда закончите, добавьте элемент div id в качестве контейнера для хранения всего нашего контента в тегах body, а также еще один элемент для нашей панели навигации.

Давайте также добавим элементы div со следующими идентификаторами:

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

Добавьте простой логотип и несколько ссылок на веб-страницу и некоторые их свойства в CSS, как показано ниже:

Теперь используйте CSS для оформления страницы и элементов div:

Результаты следующие:

Вставьте 3D-объект

Теперь добавим 3D-модель на веб-страницу. Во-первых, если файлы 3D-моделей находятся в формате ZIP, извлеките загруженный ZIP-файл модели в такие файлы, как .bin и .gltf .

Данные из файла «.bin» используются для буферизации в буферах, которые затем используются BufferViews, аксессорами и примитивами сетки

Скопируйте файлы в папку с ресурсами в главном каталоге. При копировании файлов убедитесь, что в архиве нет дополнительных файлов или изображений.

Имена файлов не должны конфликтовать с именами изображений в папке ресурсов. Если они конфликтуют, перед вставкой переименуйте изображения в папке ресурсов.

В элемент div с идентификатором aside давайте импортируем 3D-объект и некоторые его атрибуты.

Для этого случая мы собираемся использовать тип, источник(src), альтернативный текст (в случае каких-либо ошибок загрузки), автоматический поворот (для непрерывного вращения объекта), элементы управления камерой (чтобы разрешить один для просмотра объекта под предпочтительным углом обзора), ar (для поддержки дополненной реальности, дополненной реальности и устройств) и ios-src (для использования на поддерживаемых устройствах iOS 12+).

Напишите приведенный ниже код, чтобы импортировать 3D-модель на веб-страницу:

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

В режиме предварительного просмотра будет выведено следующее:

Следующий шаг – изменение внешнего вида с помощью CSS.

Давайте сделаем это, добавив приведенный ниже код в наш файл CSS:

Окончательные результаты:

Вы можете найти приведенный выше код в этом репозитории.

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

Заключение

3D-объекты могут быть очень полезны, чтобы помочь клиенту увидеть свои продукты в полном размере и относительном размере. Они более интересны и интерактивны по сравнению с 2D-изображениями.

Подводя итог, читатель узнал о:

Что такое 3D-объекты.
Форматы и атрибуты 3D-объектов.
Как получить 3D-объекты.
Как вставить 3D-объекты на веб-страницу с помощью HTML и CSS.

Вы можете узнать больше о 3D-объектах и о том, как создать их с помощью JavaScript, по приведенным ниже ссылкам.

Управляйте своими 3D-объектами. Распространяйте опыт 3D и AR. Сотрудничайте с другими. Продемонстрируйте свою работу. Покупайте и продавайте 3D-модели.

Присоединяйтесь к миллионам создателей 3D и продемонстрируйте свою работу

Покупка и продажа 3D-моделей в магазине Sketchfab

Делитесь 3D-моделями и встраивайте их в любое место в Интернете

Лучшее на рынке 3D-проигрыватель для Интернета.

Интерактивный и настраиваемый, готовый к VR и AR.

Работает со всеми операционными системами, браузерами и устройствами.

Можно встроить везде, для электронной коммерции, рекламы и социальных сетей.

Нам доверяют ведущие бренды

Присоединяйтесь к миллионам создателей 3D

Вдохновляйтесь. Продемонстрируйте свои навыки. Учитесь у миллионов участников сообщества.

Покупка и продажа 3D-моделей в магазине Sketchfab

Найдите все, от низкополигональных объектов до анимированных установок и цифровых сканов для ваших проектов 3D, виртуальной и дополненной реальности.

Что видите, то и получаете

Просмотрите топологию модели, UV-развертку и текстуры с помощью нашего средства 3D-просмотра и инспектора моделей перед покупкой.

Все, что вы ищете

От низкополигональных 3D-объектов видеоигр до фотограмметрии реального мира, 3D-моделей всех мыслимых категорий.

Хунор Мартон Борбели

Если вы когда-нибудь хотели создать игру с помощью JavaScript, возможно, вы сталкивались с Three.js.

Three.js — это библиотека, которую мы можем использовать для визуализации 3D-графики в браузере. Все это в JavaScript, так что с некоторой логикой вы можете добавить анимацию, взаимодействие или даже превратить это в игру.

В этом уроке мы рассмотрим очень простой пример. Мы создадим 3D-коробку и при этом изучим основы Three.js.

Three.js использует WebGL для визуализации 3D-графики. Мы могли бы использовать обычный WebGL, но он очень сложный и низкоуровневый. С другой стороны, Three.js похож на игру с конструктором Lego.

В этой статье мы рассмотрим, как разместить 3D-объект в сцене, настроить освещение и камеру, а также визуализировать сцену на холсте. Итак, давайте посмотрим, как мы можем все это сделать.

Определить объект сцены

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

Геометрия + Материал = Сетка

Затем мы добавляем наш 3D-бокс в сцену в виде сетки. Сетка — это комбинация геометрии и материала.

Что такое геометрия?

Геометрия – это визуализированная форма, которую мы создаем, например, коробку.Геометрию можно построить из вершин или использовать предопределенную.

BoxGeometry — это самый простой предопределенный параметр. Нам нужно только установить ширину, высоту и глубину окна, и все.

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

Есть и другие предопределенные геометрии. Мы можем легко определить плоскость, цилиндр, сферу или даже икосаэдр.

Как работать с материалом

Затем мы определяем материал. Материал описывает внешний вид объекта. Здесь мы можем определить такие вещи, как текстура, цвет или непрозрачность.

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

Простейшим из них является MeshBasicMaterial. Этот материал вообще не заботится о свете, и каждая сторона будет иметь одинаковый цвет. Однако это может быть не лучший вариант, так как вы не можете видеть края коробки.

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

Если вам нужна большая точность, есть более совершенные материалы. MeshPhongMaterial вычисляет цвет не только по вершине, но и по каждому пикселю. Цвет может меняться в пределах одной стороны. Это может повысить реалистичность, но снижает производительность.

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

Как разместить сетку

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

Для позиционирования мы используем те же единицы измерения, что и для установки размера. Неважно, используете ли вы маленькие или большие числа, вам просто нужно быть последовательным в своем собственном мире.

Для поворота мы устанавливаем значения в радианах. Поэтому, если у вас есть значения в градусах, вы должны разделить их на 180°, а затем умножить на PI.

Как добавить света

Затем добавим свет. Меш с базовым материалом не нуждается в освещении, так как меш будет иметь заданный цвет независимо от настроек освещения.

Но материал Ламберта и материал Фонга требуют света. Если света нет, сетка останется в темноте.

Мы добавим два источника света: общий и направленный.

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

Чтобы установить окружающий свет, мы устанавливаем цвет и интенсивность. Цвет обычно белый, но можно установить любой цвет. Интенсивность — это число от 0 до 1. Два источника света, которые мы определяем, работают накопительным образом, поэтому в этом случае мы хотим, чтобы интенсивность каждого из них составляла около 0,5.

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

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

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

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

Вот что делает направленный свет. Он освещает все параллельными световыми лучами издалека.

Здесь мы устанавливаем положение источника света сверху (со значением Y) и также немного смещаем его по оси X. Ось Y имеет наибольшее значение.Это означает, что верхняя часть коробки получает больше всего света, и это будет самая блестящая сторона коробки.

Свет также немного смещается по оси X, поэтому правая сторона коробки также будет получать немного света, но меньше.

И поскольку мы не перемещаем положение источника света по оси Z, передняя сторона коробки не будет получать свет от этого источника. Если бы не было окружающего света, лицевая сторона оставалась бы в темноте.

Есть и другие типы освещения. Например, PointLight можно использовать для имитации электрических лампочек. Он имеет фиксированное положение и излучает свет во всех направлениях. А SpotLight можно использовать для имитации прожектора автомобиля. Он излучает свет из одной точки в направлении конуса.

Как настроить камеру

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

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

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

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

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

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

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

Тогда есть орфографическая камера. Здесь мы проецируем вещи не в одну точку, а на поверхность. Каждая линия проекции параллельна. Вот почему не имеет значения, насколько далеко объекты находятся от камеры, и поэтому она не искажает геометрию.

Для ортогональных камер мы должны определить, насколько далеко каждая плоскость находится от точки обзора. Таким образом, левая плоскость на пять единиц левее, правая плоскость — на пять единиц вправо и т. д.

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

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

Как визуализировать сцену

Итак, нам удалось собрать сцену и камеру. Теперь не хватает только последней части, которая отображает изображение в нашем браузере.

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

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

Если вы хотите продолжить работу над этим проектом, посмотрите мое видео на YouTube о том, как превратить его в простую игру. В видео мы создаем игру по сборке стека.Мы добавляем игровую логику, обработчики событий и анимацию и даже немного физики с помощью Cannon.js.

Если у вас есть какие-либо отзывы или вопросы по этому руководству, не стесняйтесь написать мне в Твиттере @HunorBorbely или оставить комментарий на YouTube.

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

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

Что такое веб-компонент?

Веб-компонент – это настраиваемый элемент HTML, созданный на основе стандартных функций веб-платформы. Веб-компонент ведет себя во всех смыслах и целях как стандартный элемент. У него есть уникальный тег, он может иметь свойства и методы, а также может запускаться и реагировать на события. Короче говоря, вам не нужно знать ничего особенного, чтобы использовать его. В этой статье я покажу вам некоторые вещи, характерные для .

Что можно сделать?

В частности, что он может сделать сейчас? Я покажу вам его текущие возможности. Вы получите отличный опыт сегодня, и со временем он станет лучше, поскольку мы добавляем новые функции и улучшаем качество рендеринга. Примеры, которые я привел, даны только для того, чтобы дать вам представление о том, что он делает. Если вы хотите попробовать их, в репозитории GitHub есть инструкции по установке и использованию.

Базовые 3D-модели

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

Чтобы увидеть в действии, посмотрите нашу демонстрацию, размещенную на Glitch. Код, который у нас есть, выглядит примерно так:

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

Изображение постера/отложенная загрузка

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

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

Адаптивный дизайн

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

Заглядывая вперед

Установите и попробуйте. Мы хотим быть полезными для вас и хотим, чтобы вы внесли свой вклад в его будущее. Это не значит, что у нас нет идей, которые есть в дорожной карте нашего проекта. Так что попробуйте и дайте нам знать, что вы думаете, отправив сообщение о проблеме на GitHub.

Отзыв

Спасибо за отзыв. Если у вас есть конкретные идеи по улучшению этой страницы, создайте вопрос.

Спасибо за отзыв.Если у вас есть конкретные идеи по улучшению этой страницы, создайте вопрос.

Спасибо за отзыв. Если у вас есть конкретные идеи по улучшению этой страницы, создайте вопрос.

Если не указано иное, содержимое этой страницы предоставляется по лицензии Creative Commons Attribution 4.0, а образцы кода — по лицензии Apache 2.0. Подробнее см. в Правилах сайта Google Developers. Java является зарегистрированным товарным знаком Oracle и/или ее дочерних компаний.

Читайте также: