Как добавить 3d модель на сайт

How to embed an interactive 3D model on a web page

Thanks to the HTML5 standard nowadays it is possible to visualize 2D and 3D vector graphics in any web browser and in any device without the need of plugins.

In this tutorial we are going to learn several methods for embedding an interactive 3D model on a web page, all of them free, not requiring user registration and simple to configure. A basic understanding of web development is convenient.

The method to choose will depend on your expectations. This is a summary:

: General method for displaying a 3D model in glTF/GLB format. You have to provide the model file. Allows basic interactive navigation, but has many interesting options. evolutionary configurator: Intended for displaying algorithmically generated models with an artistic purpose. The algorithms are those provided by REIVGEN so you only have to configure them which is very easy. Allows basic interactive navigation and the possibility to evolve the model. viewer/designer: It actually is an online CAD application. You can use it to create your own model or import it from different formats. Offers advanced interactive navigation and many other functions such as measuring, editing or sketch recognition.

Let’s see them in more detail.

Model Viewer

If you have purchased or created by yourself a 3D model and simply want to show it through a web page then this application is what you need. It is maintained by Google and is easy to use. It only works with a file in GLB format which is well suited for web environments. Many modern design applications are able to handle GLB files. But if your file is in another format and don’t want to install a new application for the conversion, you can also resource to an online conversion tool like Aspose that is free and works fine.

Once you have your GLB file follow these steps:

Open https://modelviewer.dev/editor/ in your browser. It should look something like the image above.
Drag and drop your GLB file onto the viewer area. A progress bar will be displayed during the loading process. Once it is loaded you can orbit the model with the mouse and perform a zoom with the mouse wheel.
Within the application’s sidebar (at the right) click the blue button “DOWNLOAD SCENE”. The application will generate a ZIP file containing all the elements of a test website. It takes some seconds and the file should be dropped to your downloads folder.
Uncompress the ZIP file into a new folder to see the generated files. Among them you should find a copy of your original GLB file and an index.html file.
Since the index.html file makes reference to online JS libraries, and the browser, due to security constraints, cannot directly load the GLB file from your local drive, in order to run the test website you must upload it to your hosting (or Github for instance) and access to it as a normal online web page.
Now you can manipulate the source code of the test website or embed it into your own project through an IFRAME element. If the destination media doesn’t allow embeds you can always use an image linked to the drawing as the picture at the beginning of this article.

This is a simplified tutorial but Model Viewer offers many more capabilities for configuring lights, materials, camera auto-rotation, etc. Explore the application interface and visit the documentation https://modelviewer.dev/docs/index.html to learn more.

REIVGEN evolutionary configurator

Artistic 3D models are a modern alternative to images when decorating your web content giving it a personal and sophisticated style. If your goal is to provide an aesthetic experience to your visitors with an interactive piece of generative art, but investing a minimum effort, this application clearly is an option to consider. REIVGEN Studio creates the generative algorithms so you only have to customize them. The customization can take time but is extremely simple. The user only has to touch a button to indicate whether he likes the changes or not while the 3D model evolves automatically.

To prepare a customized 3D model follow these steps:

Open the gallery at www.reivgen.com and click on the product you like the most.
On the product’s page click the golden button CUSTOMIZE, what will open the product in the evolutionary configurator.
Touch the evolution bar within the positive half (∞) to evolve the model. If you don’t like a change then simply touch the bar within the negative half (○) to undo the evolution history.
When you reach a configuration you like, click on the menu button at the top-left corner.
Click the button “Generate link” to save your customized configuration to the REIVGEN server and get a URL pointing to it. It’s convenient to save your customized configuration to your local drive with the “Save file” menu function.
In order to hide the user interface controls include the URL parameter “uim=0”. The final URL should look something like this: https://reivgen.com/configurator.html?uim=0&fid=u1aacrpy
Now with the URL you can embed the customized 3D model through an IFRAME element.

The REIVGEN evolutionary configurator offers other interesting capabilities such as merging different configuration files or setting the visibility of UI controls, consult its manual to learn more. Although the tool can only be used for non-commercial purposes, according to their terms of services you are the owner of your customized configuration file so you could sell it.

LAI4D viewer/designer

As a CAD application, LAI4D allows to design your own 3D model based on lines, surfaces or even algorithms, as well as to save it in the cloud. How to do this is a matter of the design tutorial. For this tutorial we can use one of the examples available at the “CAD EXAMPLES” section of LAI4D.

Follow these steps to embed a drawing in a HTML page:

Choose one of the example drawings and click on the corresponding image link to open it. The first sample drawing is a paper airplane which is very simple and light.
What you see in the new browser window is the LAI4D viewer showing the opened 3D model. If you drag the mouse over the screen (or the finger over the touch-screen) the camera orientation changes. How that orientation changes depends on the “Camera mode” button at the top-right corner. The “⊕” and “⊖” buttons also at the top-right corner control the zoom. You can click them for a stepped zooming or maintain them pressed for a continuous zoom change. Use these functions until the view configuration is the desired one.
At the top-left corner click on the Share button. This will open a small window whose purpose is facilitating the generation of the URL for sharing the drawing using a simple HTML link that can be mailed, or an IFRAME element that can be embedded into a web page.
The source code shown by default is valid but we want to share the drawing with our customized view configuration so mark the “Use options” checkbox. Then mark the “Include current view definition” checkbox. The application automatically adds the IFRAME’s attributes of “width” and “height” that you can customize or remove. Now the IFRAME code is the one we want and can be copy-pasted into the source code of our HTML page.

Many much things can be done with the LAI4D viewer/designer. Find all the information you need in the LAI4D´s Reference manual.

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

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

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

Пример виджета с 3D просмотром модели

Наше готовое решение

Мы разработали уникальный сервис Site3D Configurator, позволяющий встраивать в сайты интерактивный виджет с 3D моделью товара или услуги с поддержкой возможности конфигурирования (смена цветов, текстур, замена одних частей модели на другие, проигрывание анимации и многое другое).

Предоставьте пользователю собрать свое индивидуальное решение в трехмерном пространстве

Какие есть способы внедрения трехмерной графики в Интернет-ресурс?

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

Three.js – наиболее популярная библиотека для создания трехмерного контента в Интернете. Она максимально оптимизирует работу с WebGL и автоматизирует множество процессов. Данная платформа позволяет разработчику максимально сконцентрироваться на приложении и работе с продуктом;
Babylon.js – зачастую используется разработчиками при создании 3D-игр и приложений. Платформа проста в использовании, содержит все, что необходимо для создания и управления трехмерными объектами. Для запуска данного фреймфорка требуются современные браузеры, которые поддерживают WebGL. Все встроенные функции работают качественно и с точностью выполняют поставленные задачи;

Обе библиотеки требуют высокой квалификации от программиста и больших временных и финансовых затрат.

Как быстро добавить 3D модель на сайт

Чтобы оперативно внедрить объемную модель на свой Интернет ресурс, воспользуйтесь нашей разработкой, библиотекой Site3D, которая базируется на Three.js.

Для работы требуются лишь базовые знания JavaScript. Несколькими строками кода можно быстро встроить наш виджет для показа 3D модели в любом месте сайта. Наше решение адаптировано под любые мобильные и стационарные устройства.

Вебмастерам: 3D-веб тремя способами

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

Способ 1: вставка HTML-файла

Одной из интересных особенностей Blend4Web является возможность экспортировать целые сцены из Blender’а в единственный HTML-файл, не имеющий внешних зависимостей. Такой файл представляет собой самодостаточную веб-страницу, открывающуюся стандартным браузером, которую можно распространять различными способами. В частности, ее можно разместить на веб-сайте внутри контейнера iframe , указав для него размеры и другие поддерживаемые свойства.

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

экспортировать предварительно созданную сцену 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 модель на сайт

Разберем вариант с сервисом Site3D Configurator. Из приятного – процесс займет буквально пару минут.

Site3D Configurator – сервис для создания 3D виджетов на сайт. Посетители смогут просматривать 3D модель и взаимодействовать с ней: менять текстуры и цвета, скрывать и отображать объекты. Сервис работает прямо в браузере, без сторонних программ.

На примере конструктора сайтов Tilda. Инструкция актуальная и для WIX.

Вес файла не должен превышать 10 мб, в идеале — до 3 мб. От этого зависит скорость загрузки страницы вашего сайта. Вес модели может быть больше, но это увеличит время загрузки.

Для работы необходима регистрация, это занимает несколько секунд.

Для создания проекта переходим в личный кабинет. Нажимаем кнопку «+». Если ваша модель не загружается, проверьте правильность формата: сервис рекомендует использовать glb формат — он лучше всего поддерживается сервисом.

Это необходимо, чтобы модель открывалась с нужного ракурса. Варианты базовой настройки на скриншоте: стартовый вид, масштабирование, вращение. Чаще всего этого достаточно.

Больше о настройке сцены здесь.

Нажимаем на кнопку «Скопировать весь код».

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

В режиме предпросмотра виджет не отображается, нужно опубликовать проект для просмотра.

При этом после публикации сайта можно менять 3D модель. Все изменения совершаем в редакторе сервиса. Заново копировать код и обновлять блок HTML не нужно, все изменения применяются автоматически.

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

С этим сервисом можно сделать целое веб-приложение. Оно позволит потенциальным покупателям экспериментировать с цветом, формой и разными особенностями товара. За пару минут посетитель сайта сможет создать идеальный дизайн, отрегулировать товар для своих нужд.

Разбор полного функционала сервиса есть на сайте. Также есть видео-уроки на YouTube.