Как самостоятельно добавить 3D модель на сайт — Site3D Configurator на vc.ru
Нужно встроить 3D модель на сайт?
4563 просмотров
Разберем вариант с сервисом Site3D Configurator. Из приятного – процесс займет буквально пару минут.
Немного о Site3D Configurator
Site3D Configurator – сервис для создания 3D виджетов на сайт. Посетители смогут просматривать 3D модель и взаимодействовать с ней: менять текстуры и цвета, скрывать и отображать объекты. Сервис работает прямо в браузере, без сторонних программ.
Инструкция по добавлению
На примере конструктора сайтов Tilda. Инструкция актуальная и для WIX.
Подготавливаем 3D модель
Вес файла не должен превышать 10 мб, в идеале — до 3 мб. От этого зависит скорость загрузки страницы вашего сайта. Вес модели может быть больше, но это увеличит время загрузки.
Авторизируемся на сайте configurator.site3d.site
Для работы необходима регистрация, это занимает несколько секунд.
Главная страница сервиса Site3D Configurator
Создаем проект и загружаем в него 3D модель
Для создания проекта переходим в личный кабинет. Нажимаем кнопку «+». Если ваша модель не загружается, проверьте правильность формата: сервис рекомендует использовать glb формат — он лучше всего поддерживается сервисом.
Личный кабинет
Настраиваем параметры сцены
Это необходимо, чтобы модель открывалась с нужного ракурса. Варианты базовой настройки на скриншоте: стартовый вид, масштабирование, вращение. Чаще всего этого достаточно.
Настройка параметров сцены
Больше о настройке сцены здесь.
Копируем код из раздела «Шаг 4»
Нажимаем на кнопку «Скопировать весь код».
Последний шаг создания 3D конфигуратора
Теперь переходим на Tilda
Создаем Zero block, удаляем с него все лишнее и вставляем в него код.
По умолчанию отобразится блок высотой в 500px. Если вам необходим другой размер по высоте, то нужно дописать в код соответствующий параметр.
Код для вставки на сайт
Публикуем проект
В режиме предпросмотра виджет не отображается, нужно опубликовать проект для просмотра.
При этом после публикации сайта можно менять 3D модель. Все изменения совершаем в редакторе сервиса. Заново копировать код и обновлять блок HTML не нужно, все изменения применяются автоматически.
Мы поговорили о том, как за 2 минуты встроить модель на сайт, но с помощью сервиса можно создать целый 3D конфигуратор, базирующийся на вашей модели.
Возможности сервиса
С этим сервисом можно сделать целое веб-приложение. Оно позволит потенциальным покупателям экспериментировать с цветом, формой и разными особенностями товара. За пару минут посетитель сайта сможет создать идеальный дизайн, отрегулировать товар для своих нужд.
Заключение
Разбор полного функционала сервиса есть на сайте. Также есть видео-уроки на YouTube.
Остались вопросы? Ответим в комментариях!
Как реализовать просмотр 3D-моделей на сайте? — Хабр Q&A
Наша отечественная разработка www.blend4web.com/ru
Ответ написан
Комментировать
Я это реализовал для одной фирмы на базе WebGL и библиотеки threejs.org . Презентацию продукции (демка здесь — там кнопка 3D обзор изделий…) я конвертировал из Pro/Engineer в формат OBJ (очень долго настраивал центр модели, т.к. у three.js центр модели понятие относительное — для каждой модели его нужно подбирать индивидуально). Текстурку наложил простейшую. Пришлось попариться с масштабированием, т.к. колесо мыши нужно было использовать по разному — для сайта это прокрутка, для 3D это зум.
Но three.js оказался просто супер вещью и все удалось сделать.
Ответ написан
Просто посмотрите первые пять ссылок по запросу:
https://www.google.ru/search?q=3d+model+in+webpage…
Если постараетесь, то найдете даже те варианты, которые предлагают всякие плагины для 3dmax или solidworks, чтобы сразу из программ получать необходимый формат.
Ответ написан
Комментировать
Самый простой вариант здесь www.render.ru/books/show_book.
php?book_id=1297
не требует установки дополнительных расширений при просмотре сайта (стандартный Flash)
НО это не 3д а просто 100 картинок по кругу, которые имитируют 3D. Зато выглядит эффектно.
Ответ написан
Комментировать
https://github.com/kovacsv/Online3DViewer Можно загружать несколько файлов сразу: obj, mtl, (dds и tda нет).
Модели: https://p3dm.ru/files/auto/tanks/14194-is-2.html и https://p3dm.ru/files/auto/tanks/13814-t-34-85.html
Ответ написан
Комментировать
Рекомендую простой способ загрузки 3d модели на сайт через библиотеку site3d — https://site3d.
Ответ написан
Комментировать
Можно воспользоваться интерактивным стримингом — сама модель рендерится в дата центре, на сайт поступает только видео. В обратную сторону идут управляющие команды. Кстати, это единственный способ показывать на сайте действительно большие и сложные модели — CAD, BIM. Вот здесь можно посмотреть примеры https://streaminglab.ru
Ответ написан
Комментировать
https://modelviewer.dev/ очень понравился.
Ответ написан 
2021, в 16:49″>
более года назад
Комментировать
Я использовал отечественный сервис https://configurator.site3d.site. До 5 моделей можно бесплатно разместить. Там еще можно не только вертеть модель, но и настраивать для редактирования смену текстур у отдельных мешей (появляется панелька в интерфейсе). Также есть возможность расставлять метки к разным частям модели и управлять анимацией, если модель в формате glb.
Ответ написан
Комментировать
Как встроить 3D-модели на мой сайт?
25 июня 2019 г.
by Amélie Deltombe
3D Strategy,
Sketchfab — ведущая платформа для публикации, совместного использования и интеграции 3D-контента в любом месте в Интернете: ваш веб-сайт, платформы электронной коммерции, блоги, статьи и т.
д. социальные каналы.
Наш 3D-просмотрщик работает на любом устройстве и в любом современном браузере*.
Любое устройство
Любой браузер*
Все основные форматы 3D-файлов
Создание 3D-контента
Перво-наперво: прежде чем публиковать любую 3D-модель в Интернете, вам нужно создать 3D-файл . Существует множество различных вариантов программного обеспечения для создания 3D; здесь вы найдете несколько популярных примеров.
Если вы производите продукты, у вас, вероятно, уже есть 3D-ресурсы в процессе разработки. Sketchfab поддерживает все основные форматы 3D-файлов, поэтому большинство ваших 3D-моделей, скорее всего, уже совместимы со Sketchfab. Возможно, вы сможете использовать свой файл как есть, но весьма вероятно, что он выиграет от числа 9.0009 оптимизация по эстетическим соображениям или по соображениям производительности.
Оптимизируйте свою модель
Когда наши партнеры оптимизируют модели для производительности в проигрывателе Sketchfab, одним из основных критериев, на который они обращают внимание, является время загрузки .
Если загрузка модели занимает много времени, пользовательский опыт будет страдать, и пользователи могут закрыть окна браузера, а не ждать. Это еще более важно учитывать для мобильных пользователей.
Основными факторами, влияющими на время загрузки, являются (1) размер 3D сетки (количество полигонов) и (2) размер и количество текстур (если ваша модель использует текстуры). Как правило, старайтесь, чтобы в вашей модели было как можно меньше отдельных материалов, геометрий (сеток), текстур и полигонов (треугольников, четырехугольников и т. д.). Чем ниже вы сохраните эти цифры, тем быстрее будет загружаться вьювер и тем лучше он будет работать.
Способ создания/подготовки 3D-ресурса во многом зависит от предполагаемого варианта использования средства просмотра Sketchfab (конфигуратор, электронная коммерция, целевые страницы, реклама, социальные сети). Создание пользовательского контента, предназначенного для вашего конкретного случая использования, всегда является лучшим вариантом.
Дополнительную информацию о подготовке 3D-моделей можно найти здесь. Если вам нужна помощь в создании 3D-моделей или оптимизации существующих моделей, обратитесь к нашим партнерам по созданию контента.
Загрузите свою 3D-модель в Sketchfab
Создайте существующую учетную запись Sketchfab или войдите в нее
Теперь, когда у вас есть готовая 3D-модель, пришло время загрузить вашу первую модель. Во-первых, вам нужно создать или войти в свою учетную запись Sketchfab. После входа в систему вы можете загружать файлы моделей несколькими способами.
Загрузить файлы модели
Кнопка загрузки
Нажмите кнопку ЗАГРУЗИТЬ в правом верхнем углу любой страницы Sketchfab.
Вы можете загрузить данные в учетную запись своей компании или в индивидуальную учетную запись.
Затем вам будет предложено выбрать файл(ы), которые вы хотите загрузить – просто убедитесь, что вы используете поддерживаемые форматы.
В качестве альтернативы нажатию кнопки Browse вы также можете просто перетащить файл(ы).
Затем просто нажмите кнопку ЗАГРУЗИТЬ ФАЙЛЫ .
Как только вы начнете процесс загрузки, появится окно, как показано ниже. Заполните информацию о своей модели — название модели, описание, категории, теги и т. д. Затем нажмите кнопку ПУБЛИКАЦИЯ .
После завершения загрузки и обработки вашей модели вы сможете увидеть ее в разделе «Модели» вашего профиля.
Экспортеры
Вы также можете загрузить в Sketchfab прямо из своего 3D-приложения, используя один из наших экспортеров. Все основные 3D-программы интегрированы в Sketchfab, что позволяет экспортировать файлы всего за несколько кликов прямо в Sketchfab.
Массовая загрузка
Если вы предпочитаете массовую загрузку в Sketchfab, у нас есть API, который вы можете использовать для автоматизации процесса. См. нашу документацию по API.
Дополнительную информацию о том, как загрузить свою модель, можно найти в нашем справочном центре.
Встраивание моделей и настройка средства просмотра
Встраивание моделей
Вы можете встроить 3D-модель Sketchfab на любой HTML-сайт. Прежде чем встроить модель, вы должны переключить видимость вашей модели на «частную или общедоступную». В ИЗМЕНИТЬ СВОЙСТВА , выберите «Общий» или «Частный», затем сохраните.
Нажмите кнопку «Встроить» на странице модели под окном просмотра.
Щелкните внутри кода, чтобы скопировать его, а затем вставьте в HTML-код своего сайта.
Это будет работать практически везде в Интернете: если HTML-тег iframe поддерживается, вы можете встроить модель Sketchfab.
Параметры встраивания
Удалить заголовок под моделью
Чтобы удалить заголовок под моделью, просто снимите флажок «Показать имя».
Параметр Hint=2
Мы настоятельно рекомендуем вам добавить параметр встраивания hint=2 , который добавляет в вашу модель значок «щелкните и удерживайте, чтобы повернуть».
Это поможет пользователям понять, как взаимодействовать с вашей 3D-моделью. См. пример ниже для MADE.COM и соответствующий код для встраивания.
Встроить white-label: лицензии Premium и Enterprise
Если вы хотите встроить свою модель в white-label, вам необходимо перейти на план Premium или Enterprise.
После перехода на учетную запись Premium или Enterprise просто выберите «Удалить водяной знак» в параметрах.
Здесь более подробно описаны все доступные параметры встраивания.
Подробные инструкции о том, как оптимизировать интеграцию ваших 3D-моделей, чтобы повысить интерес к продукту, можно найти в нашем специальном блоге.
Дополнительные сведения о веб-сайтах и платформах, включая WordPress, см. в разделе Встраивание в веб-платформы. Чтобы поделиться на социальных платформах, см. «Поделиться в Интернете».
*Internet Explorer не поддерживается
Как встроить интерактивную 3D-модель на веб-страницу | Хуан Андрес Уртадо Баэса | LAI4D
Благодаря стандарту HTML5 в настоящее время можно визуализировать 2D- и 3D-векторную графику в любом веб-браузере и на любом устройстве без необходимости использования плагинов.
Пример чертежа LAI4D, встроенного в HTMLВ этом уроке мы изучим несколько способов встраивания интерактивной 3D-модели на веб-страницу, все они бесплатны, не требуют регистрации пользователя и просты в настройке. Базовое понимание веб-разработки удобно.
Выбор метода зависит от ваших ожиданий. Вот краткое изложение:
- Средство просмотра моделей: общий метод отображения 3D-моделей в формате glTF/GLB. Вы должны предоставить файл модели.
Обеспечивает базовую интерактивную навигацию, но имеет много интересных опций. - Эволюционный конфигуратор REIVGEN: Предназначен для отображения алгоритмически сгенерированных моделей с художественной целью. Алгоритмы предоставляются REIVGEN, поэтому вам нужно только настроить их, что очень просто. Обеспечивает базовую интерактивную навигацию и возможность развития модели.
- Средство просмотра/дизайнера LAI4D: на самом деле это онлайн-приложение САПР. Вы можете использовать его для создания собственной модели или импортировать ее из разных форматов. Предлагает расширенную интерактивную навигацию и многие другие функции, такие как измерение, редактирование или распознавание эскизов.
Обеспечивает базовую интерактивную навигацию, но имеет много интересных опций.Давайте рассмотрим их подробнее.
Средство просмотра моделей
Если вы приобрели или создали самостоятельно 3D-модель и просто хотите показать ее через веб-страницу, то это приложение — то, что вам нужно. Он поддерживается Google и прост в использовании. Он работает только с файлом в формате GLB, который хорошо подходит для веб-сред.
Многие современные дизайнерские приложения могут работать с файлами GLB. Но если ваш файл находится в другом формате и вы не хотите устанавливать новое приложение для преобразования, вы также можете использовать онлайн-инструмент преобразования, такой как Aspose, который является бесплатным и отлично работает.
После того, как вы получили файл GLB, выполните следующие действия:
- Откройте https://modelviewer.dev/editor/ в браузере. Это должно выглядеть примерно так, как на изображении выше.
- Перетащите файл GLB в область просмотра. В процессе загрузки будет отображаться индикатор выполнения. После загрузки вы можете вращать модель с помощью мыши и выполнять масштабирование с помощью колесика мыши.
- На боковой панели приложения (справа) нажмите синюю кнопку « СЦЕНА СКАЧИВАНИЯ ». Приложение создаст ZIP-файл, содержащий все элементы тестового веб-сайта. Это займет несколько секунд, и файл должен быть перенесен в папку загрузок.
- Распакуйте ZIP-файл в новую папку, чтобы просмотреть сгенерированные файлы. Среди них вы должны найти копию исходного файла GLB и файл index.html.
- Поскольку файл index.html ссылается на онлайн-библиотеки JS, а браузер из-за ограничений безопасности не может напрямую загрузить файл GLB с локального диска, для запуска тестового веб-сайта необходимо загрузить его на хостинг ( или Github, например) и доступ к нему как к обычной онлайн-странице.
- Теперь вы можете манипулировать исходным кодом тестового веб-сайта или встраивать его в свой собственный проект через элемент IFRAME. Если целевой носитель не позволяет встраивать, вы всегда можете использовать изображение, связанное с рисунком, в качестве рисунка в начале этой статьи .
Это упрощенное руководство, но Model Viewer предлагает гораздо больше возможностей для настройки источников света, материалов, автоматического поворота камеры и т. д. Изучите интерфейс приложения и посетите документацию https://modelviewer.
dev/docs/index.html, чтобы узнать больше.
Эволюционный конфигуратор REIVGEN
Художественные 3D-модели представляют собой современную альтернативу изображениям при оформлении вашего веб-контента, придавая ему индивидуальный и изысканный стиль. Если ваша цель состоит в том, чтобы предоставить своим посетителям эстетический опыт с помощью интерактивного произведения генеративного искусства, но с минимальными усилиями, это приложение, безусловно, является вариантом для рассмотрения. REIVGEN Studio создает генеративные алгоритмы, поэтому вам нужно только настроить их. Настройка может занять время, но очень проста. Пользователю нужно только нажать кнопку, чтобы указать, нравятся ему изменения или нет, в то время как 3D-модель развивается автоматически.
Страница с произведением REIVGEN LyraЧтобы подготовить индивидуальную 3D-модель, выполните следующие действия:
- Откройте галерею на сайте www.reivgen.com и выберите продукт, который вам больше всего нравится.
- На странице товара нажмите золотую кнопку НАСТРОЙКА , что откроет товар в эволюционном конфигураторе.
- Коснитесь полосы эволюции в положительной половине (∞), чтобы развить модель. Если вам не нравится изменение, просто коснитесь полосы в отрицательной половине (○), чтобы отменить историю эволюции.
- Когда вы достигнете желаемой конфигурации, нажмите кнопку меню в верхнем левом углу.
- Нажмите кнопку « Создать ссылку », чтобы сохранить настроенную вами конфигурацию на сервере REIVGEN и получить URL-адрес, указывающий на нее. Индивидуальную конфигурацию удобно сохранять на локальный диск с помощью функции меню «Сохранить файл».
- Чтобы скрыть элементы управления пользовательского интерфейса, включите параметр URL «uim=0». Конечный URL должен выглядеть примерно так: https://reivgen.com/configurator.html?uim=0&fid=u1aacrpy
- Теперь с URL-адресом вы можете встроить настроенную 3D-модель через элемент IFRAME.
Эволюционный конфигуратор REIVGEN предлагает другие интересные возможности, такие как объединение различных файлов конфигурации или настройка видимости элементов управления пользовательского интерфейса. Дополнительные сведения см. в его руководстве. Хотя этот инструмент можно использовать только в некоммерческих целях, в соответствии с их условиями обслуживания вы являетесь владельцем своего настроенного файла конфигурации, поэтому вы можете его продавать.
LAI4D просмотрщик/конструктор
В качестве CAD-приложения LAI4D позволяет создавать собственные 3D-модели на основе линий, поверхностей или даже алгоритмов, а также сохранять их в облаке. Как это сделать — в учебнике по дизайну. Для этого урока мы можем использовать один из примеров, доступных в разделе «CAD ПРИМЕРЫ» LAI4D.
Скриншот средства просмотра LAI4D с развернутым менюЧтобы встроить рисунок в HTML-страницу, выполните следующие действия:
- Выберите один из примеров рисунков и щелкните ссылку на соответствующее изображение, чтобы открыть его. Первый образец рисунка — бумажный самолетик, очень простой и легкий.
- В новом окне браузера вы видите средство просмотра LAI4D, показывающее открытую 3D-модель. Если вы проведете мышью по экрану (или пальцем по сенсорному экрану), ориентация камеры изменится. То, как изменится эта ориентация, зависит от кнопки «Режим камеры» в правом верхнем углу. Кнопки «⊕» и «⊖» также в верхнем правом углу управляют масштабированием. Вы можете щелкнуть их для ступенчатого увеличения или удерживать их нажатыми для непрерывного изменения масштаба. Используйте эти функции до тех пор, пока конфигурация просмотра не станет нужной.
- В верхнем левом углу нажмите кнопку Поделиться . Откроется небольшое окно, целью которого является создание URL-адреса для совместного использования рисунка с использованием простой ссылки HTML, которую можно отправить по почте, или элемента IFRAME, который можно встроить в веб-страницу.
- Исходный код, показанный по умолчанию, действителен, но мы хотим поделиться чертежом с нашей настроенной конфигурацией вида, поэтому установите флажок «Использовать параметры».
Первый образец рисунка — бумажный самолетик, очень простой и легкий.