Вебмастерам: 3D-веб тремя способами
В этой статье мы рассмотрим несколько способов размещения 3D контента, созданного с помощью Blend4Web, на веб-сайтах.
Способ 1: вставка HTML-файла
Одной из интересных особенностей Blend4Web является возможность экспортировать целые сцены из Blender’а в единственный HTML-файл, не имеющий внешних зависимостей. Такой файл представляет собой самодостаточную веб-страницу, открывающуюся стандартным браузером, которую можно распространять различными способами. В частности, ее можно разместить на веб-сайте внутри контейнера iframe , указав для него размеры и другие поддерживаемые свойства.
Основное преимущество этого способа заключается в его простоте. Пользователи, не имеющие опыта работы с Blend4Web, могут придерживаться следующего порядка действий:
-
и установить аддон для программы Blender (см. видео или раздел руководства пользователя);
- экспортировать предварительно созданную сцену File > Export > Blend4Web (.html) ;
- разместить полученный HTML-файл на сайте внутри контейнера iframe .
Способ 2: веб-плеер
Второй способ является вариантом первого — в результате на странице появляется вставка 3D контента с элементами управления.
Тем не менее, реализация вставки этим способом существенно отличается от предыдущего — вместо единственного HTML-файла здесь используется комбинация веб-плеера и загружаемого JSON-файла сцены.
Директорию с файлами веб-плеера blend4web/deploy/apps/webplayer/ можно скопировать из дистрибутива Blend4Web SDK и разместить на сайте.
JSON-файлы сцены можно экспортировать аналогично HTML-файлам с помощью опции File > Export > Blend4Web (.json) . Полученные файлы можно разместить на сайте и указать путь к ним (абсолютный или относительный) с помощью параметра веб-плеера load .
В этом примере помимо обязательного параметра load мы использовали необязательный — show_fps — для отображения счетчика кадров в секунду.
Подробнее с веб-плеером можно ознакомиться в соответствующем разделе руководства пользователя.
Чтобы запускать веб-плеер из локальной файловой системы (т.е. без веб-сервера) необходимо настроить браузер для загрузки локальных ресурсов.
Хотя этот способ выглядит более сложным, чем предыдущий, он имеет ряд преимуществ:
- компактный формат файлов сцены — загрузка происходит быстрее;
- сцена загружается асинхронно, без блокировки загрузки всей страницы;
- данные сцены хранятся отдельно от самого веб-плеера, что позволяет использовать их в других приложениях.
Способ 3: веб-приложение
Наконец, мы можем превратить саму веб-страницу в интерактивное 3D приложение! Продемонстрируем это на простом примере: разместим на странице кнопку, при нажатии на которую будет вопроизводиться интересный анимационный эффект.
В состав бесплатного дистрибутива также входит отдельное приложение, упрощающее изучение и отладку.
Обратите внимание: содержимое страницы просматривается не только сквозь невидимый элемент canvas , но и за полупрозрачными трехмерными объектами, которые, в свою очередь, корректно отображают блики во время движения.
О том, как был создан сам анимационный эффект, будет рассказано в следующей статье, а сейчас посмотрим, как подключить его к странице. Как мы увидим, сделать это не сложнее, чем реализовать какой-нибудь эффект на jQuery или Flash.
Для начала подключим к странице скрипт движка b4w.min.js из дистрибутива Blend4Web. Код примера разместим в файле example.js . Таблицу стилей приложения будем хранить в файле example.css :
Разместим на странице контейнер для области отрисовки и кнопку для запуска эффекта. Для удобства обернем их элементом div#wrapper_container :
Рассмотрим таблицу стилей приложения:
Для контейнера области отрисовки зададим ширину, высоту и абсолютное позиционирование. Также сместим контейнер вниз, относительно родительского элемента на 350px . Выставим свойство pointer-events равным none . Данное свойство делает элемент прозрачным для событий мыши:
Более подробно ознакомиться со свойством pointer-events можно по адресу developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.
Зададим относительное позиционирование для элемента div#wrapper_container . Это необходимо для того, чтобы дочерние элементы, имеюшие абсолютную позицию, оставались внутри родительского контейнера:
Cкорректируем высоту, ширину и расположение области отрисовки для устройств с небольшими экранами:
Установим стили для кнопки запуска:
Теперь разберем скрипт example.js . Ниже целиком приведен его код:
Обратите внимание на параметры инициализации — прозрачность области отрисовки alpha включена:
Проверка переменной web_page_integration_dry_run выполняется для указания пути к JSON файлу в отладочном приложении. Т. е. в нем путь к JSON файлу — «flying_letters.json», а на текущей странице — «/tutorials/examples/web_page_integration/flying_letters.json».
Ниже приводится пример добавления переменной web_page_integration_dry_run в html файл:
Добавим обработчик событий на измение размеров окна браузера. Затем принудительно вызовем функцию resize():
В функция resize() используется метод resize_to_container(), который устанавливает высоту и ширину области отрисовки как и родительского контейнера:
После загрузки сцены, вызывается функция load_cb() . В ней мы останавливаем анимацию — потому что мы установили ее на автозапуск в Blender’е — и привязываем к элементу #run_button событие mousedown :
При клике по элементу #run_button вызывается функция demo_link_click() . В ней мы запустим анимацию полета шаров и звук нажатия кнопки:
После окончания анимации полета вызывается функция letters_obj_cb() . В ней мы запустим циклическую анимацию, чтобы шары покачивались на месте:
Выводы
Технология WebGL предоставляет уникальную возможность бесшовной интеграции интерактивного 3D контента с другими веб-технологиями. С помощью Blend4Web можно относительно легко создать такой контент в популярной программе Blender, разместить его на веб-страницах и объединить логикой с любыми HTML элементами.
Изменения
[2014-08-01] Изначальная публикация.
[2014-10-22] Изменены пути к файлам сцен.
[2014-10-30] Исправлены ссылки к веб-плееру в связи с изменением имени файла. Добавлен атрибут allowfullscreen . Опущен устаревший параметр bg .
[2014-12-03] Добавлен звук для кнопки.
[2015-04-23] Изменен путь к исходникам веб-плеера на GitHub. Изменены имена переменных и анимаций. Опущен параметр deferred_rendering и context_antialias в функции m_app.init().
[2015-05-15] Добавлено описание стилей приложения. Логика изменения размеров области отрисовки перенесена из скрипта в таблицу стилей. Добавлена ссылка на отладочное приложение. Добавлено описание функции resize()
Как разместить 3D модель на сайте?
Первое что мы замечаем, переходя по ссылке на тот или иной сайт – его визуальную составляющую. В нее входит общий дизайн страницы, удобное расположение текста, картинок, кнопок навигации. Именно приятная картинка вынуждает нас остаться на странице и изучить ее.
Веб-дизайн не стоит на месте, начинают набирать популярность 3D-сайты и лендинги. Разработчики создают и внедряют различные конструкторы, конфигураторы и 3D графику. Цель данных решений – повысить конверсию, привлечь внимание покупателей и повысить собственную популярность среди конкурентов.
Пример виджета с 3D просмотром модели
Наше готовое решение
Мы разработали уникальный сервис Site3D Configurator, позволяющий встраивать в сайты интерактивный виджет с 3D моделью товара или услуги с поддержкой возможности конфигурирования (смена цветов, текстур, замена одних частей модели на другие, проигрывание анимации и многое другое).
Предоставьте пользователю собрать свое индивидуальное решение в трехмерном пространстве
Какие есть способы внедрения трехмерной графики в Интернет-ресурс?
Вставить трехмерную модель на свой ресурс можно при помощи различных библиотек, которые работают с технологией WebGL. Самые часто используемые из них:
- Three.js – наиболее популярная библиотека для создания трехмерного контента в Интернете. Она максимально оптимизирует работу с WebGL и автоматизирует множество процессов. Данная платформа позволяет разработчику максимально сконцентрироваться на приложении и работе с продуктом;
- Babylon.js – зачастую используется разработчиками при создании 3D-игр и приложений. Платформа проста в использовании, содержит все, что необходимо для создания и управления трехмерными объектами. Для запуска данного фреймфорка требуются современные браузеры, которые поддерживают WebGL. Все встроенные функции работают качественно и с точностью выполняют поставленные задачи;
Обе библиотеки требуют высокой квалификации от программиста и больших временных и финансовых затрат.
Как быстро добавить 3D модель на сайт
Чтобы оперативно внедрить объемную модель на свой Интернет ресурс, воспользуйтесь нашей разработкой, библиотекой Site3D, которая базируется на Three.js.
Для работы требуются лишь базовые знания JavaScript. Несколькими строками кода можно быстро встроить наш виджет для показа 3D модели в любом месте сайта. Наше решение адаптировано под любые мобильные и стационарные устройства.
Как добавить 3D модель на сайт
В данной статье расскажу, как добавить на свой сайт любую 3D модель с помощью простого в использовании облачного сервиса Site3D Configurator.
Очень важно качественно подготовить модель для её загрузки на онлайн-платформу.
Сервис поддерживает загрузку моделей во множестве форматов, но для максимальной реалистичности рекомендует работать с форматом GLB (оптимизированная версия формата GLTF). Данный формат специально разработан для реалистичной демонстрации моделей в Web-пространстве.
Наиболее подходящая программа для работы с данным форматом – Blender. Это современный, активно развивающийся и бесплатный редактор 3D графики.
В дальнейшем мы будем в основном ориентироваться на данный формат хранения 3D моделей.
Для удобства работы с моделью в сервисе необходимо установить геометрии всех мешей в их геометрических центрах:
• В Blender выбираем Set Origin => Origin to Geometry => Bound Center.
• В 3D max это делается с помощью Pivot Point.
Также следует разместить модель по центру координат.
Все это сервис может проделать и самостоятельно с помощью настройки Параметры сцены => Стартовый вид => Поместить модель по центру. Но лучше контролировать данный процесс самостоятельно.
Для сглаживания модели в Blender выбираем модификатор Subdivision Surface и увеличиваем Levels Viewport до соответствующего уровня.
Формат GLB требователен к материалам, поэтому к нему нужна особая подготовка. Важно ознакомиться с допустимыми свойствами материала для формата GLB.
Части модели (далее меши), которые пользователи могут перекрашивать (менять цвет, текстуру), должны иметь только один материал.
Если вы работаете в 3D max и используете VRAY/CORONA материалы, то вам необходимо преобразовать их в стандартные материалы:
• Использовать плагин для автоматического конвертирования материалов V-ray в стандартные (смотрите урок)
Часто нам попадаются готовые модели, но без текстур. Без них модели не будут выглядеть реалистичными.
Для нанесения текстуры на модель в Blender:
• В нижней части выбираем Shader Editor и переносим туда нужную текстуру
• Соединяем текстуру с нашей моделью через Color к Base Color
• Если текстура легла не ровно, то переходим к панели UV Editing. Появляется два окна, в правом окне переходим в режим Edit Mode и выделяем модель. В левом окне появляется модель в развернутом виде. Выравниваем текстуру.
Чтобы в сервисе отобразились текстуры вашей модели, необходимо, чтобы вы присоединили их к файлу вашей модели. В зависимости от программы, в которой вы работаете, это можно сделать по-разному:
• В Blender выберите в меню File => External Data => Automatically Pack Resources
• Чтобы корректно экспортировать материалы с 3D max, важно, чтобы они все находились в одной папке (как это сделать).
• Примените все модификаторы
• Удалите лишние вершины и полигоны, которые не вносят существенный вклад в визуальную составляющую
• Уменьшите размер текстур (для большинства случаев достаточно изображений размером 1024 на 1024 в формате jpeg, которые можно сжать, например, в фотошопе со значением оптимизации в 60%)
Рекомендуемый итоговый размер модели без сжатия – до 3 Мб
Если вы работаете в 3D max, то в 2023 версии появилась функция экспорта в GLB. Для более ранних версий: сначала можете экспортировать в FBX с материалами, а затем воспользоваться онлайн конвертером для экспорта в GLB.
Add 3D Model to WebSite in 5 Minutes – Three.js Tutorial
In this tutorial, we’re going to show you how to put a 3D model on your website with 360 degrees viewer using Three.js and JavaScript in just a few minutes.
The Model
First of all, we’ll need to find a suitable 3D model. There are lots of free models available on the internet. However, Three.js recommended to use a model with glTF format due to small file size and efficiency. So I’m going to download the one that already in glTF format. But if you already have a model in other formats, three.js is also support FBX and obj file as well.
Here is the free Datson car model from Sketchfab
Once model was downloaded, put all files (and folders if any) in the web directory.
Basic Setup
Let’s work on the JavaScript. First include the latest version of Three.js to your page.
Next create a scene, camera and renderer. I’m going to place the camera in front of the car and rotate them by 45 degrees. Then, to scale down the car, we’ll get our car model inside the callback function and use scale.set. I’m going to reduce the size by half.
The basic setup is completed. Next, we’ll add the lighting and load our model.
The Lighting
Then I’ll add a soft white ambient light to illuminate the scene globally.
Then add directional light from above. I’m going to set the castShadow property to true then add it to the scene. I’m going to also add 4 point lights and place them around the car. Point light is similar to the light bulb in the real world and It automatically cast shadow.
Loading Model
We’ll use GLTFLoader class. Then use load method to load our model file. Also the model is too big for our scene so let’s scale down the car by 50%
360 Degrees Viewer
We’ll use three.js OrbitControl plugin to add a 360 degrees viewer that let the users rotate the camera. Get the OrbitControls.js from github and include it to the page.
Then create the control object from our camera and add change event listener to track the mouse control.
We’ll need to create an animation loop to update the scene when users rotate the camera.
Check the final result in the video below
And that’s it. You can get the full source code below. Hope you guys enjoy. Don’t forget to like our Facebook and subscribe our Youtube Channel to stay connected. See you next time Bye!
Source Code
6 comments
I followed all the steps and watched the YouTube video but it still shows an error and does not run. Is there perhaps something wrong with the code that is provided?
What could I be missing?
same problem, followed step by step. I got a blank page and this in my console:
TypeError: undefined is not an object (evaluating ‘scope.domElement.addEventListener’)
safari – chrome – firefox on a Mac high Sierra
Are you guys running a local server? because that’s the error I had then I downloaded python and everything worked.
Same the problems,my email:[email protected],please help me,thank you!