Встроить просмотрщик

Поместите просмотрщик Any3D на свою страницу. Рамка загружает модель по адресу https и содержит кнопку, которая открывает полный просмотрщик.

  1. 1

    Добавить рамку

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

    <iframe
      src="https://any3d.cc/ru-RU/embed?src=https%3A%2F%2Fcdn.example.com%2Fmodel.glb"
      title="3D-модель"
      style="width:100%;height:480px;border:0"
      loading="lazy"
      allow="fullscreen"
      allowfullscreen
      referrerpolicy="strict-origin-when-cross-origin"
    ></iframe>
    Совет: вы можете скопировать промпт ниже и передать его ИИ-ассистенту (например, Cursor, Claude или ChatGPT), чтобы быстро сгенерировать код встраивания.
    Промпт для интеграции с ИИ (нажмите, чтобы развернуть/свернуть)
    Создайте код <iframe> для встраивания 3D-просмотрщика Any3D на веб-страницу. Если вы редактируете существующую страницу или компонент, поместите <iframe> в то место, где должна отображаться 3D-модель. Базовый адрес встраивания: https://any3d.cc/ru-RU/embed Правила формирования URL и параметров: - Обязательный параметр: `src` должен содержать HTTPS-адрес модели, закодированный процентами (encodeURIComponent), и передаваться как отдельный параметр запроса (например, https://any3d.cc/ru-RU/embed?src=...). Не присоединяйте исходный адрес модели напрямую к пути. Для 3D Tiles укажите адрес файла tileset.json. - Необязательные параметры (ненужные опустите): - `autorotate=1`: включает автоматическое вращение модели. Опустите, чтобы оставить модель неподвижной. - `theme=light`, `theme=dark` или `theme=system`: задает тему оформления просмотрщика. - `bg=transparent`: делает фон прозрачным. - `controls`: выбор управления мышью. Оставьте пустым или укажите `auto`, чтобы управление подбиралось автоматически по типу файла; либо укажите `standard`, `cad`, `solidworks`, `blender`, `splat` или `custom`. Управление мышью: - auto: файлы CAD используют управление CAD, метод Gaussian Splatting — плавную орбиту, остальные файлы — стандартную орбиту. - standard: орбита. Левая кнопка — вращение, правая — панорамирование, колесо — масштабирование. - cad: стиль AutoCAD. Средняя кнопка — панорамирование, Shift+средняя кнопка — орбита, колесо приближает к курсору, без инерции. Левая кнопка также вращает, правая — панорамирует. - solidworks: стиль SolidWorks. Средняя кнопка — орбита, Ctrl или Command+средняя кнопка — панорамирование, Shift+средняя кнопка — масштабирование. Колесо вперед отдаляет в точке курсора, без инерции. - blender: стиль Blender. Средняя кнопка — орбита, Shift+средняя кнопка — панорамирование, Ctrl или Command+средняя кнопка — масштабирование. Колесо масштабирует к центру вида, без инерции. - splat: плавная орбита для больших сцен Gaussian Splatting. Плавное вращение перетаскиванием, двойной клик задает точку фокуса. - custom: совпадает со standard. Требования к iframe и примечания: - Атрибуты и стили: добавьте loading="lazy" и style="width:100%;height:480px;border:0" (адаптируйте под размеры контейнера). - Разрешения: обязательно укажите allow="fullscreen", allowfullscreen и referrerpolicy="strict-origin-when-cross-origin". - Песочница (sandbox): если родительская страница ограничивает iframe через sandbox, добавьте allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox, чтобы кнопка в правом нижнем углу могла открыть полный просмотрщик в новой вкладке. - Размещение и CORS: сервер с моделью должен разрешать запросы CORS с https://any3d.cc. Просмотрщик скачивает один файл (например, GLB, STL, OBJ, FBX, PLY); текстуры в отдельных внешних файлах не загрузятся, если они не упакованы внутрь модели (как в GLB). Пример: <iframe src="https://any3d.cc/ru-RU/embed?src=https%3A%2F%2Fcdn.example.com%2Fmodel.glb" title="3D-модель" style="width:100%;height:480px;border:0" loading="lazy" allow="fullscreen" allowfullscreen referrerpolicy="strict-origin-when-cross-origin" ></iframe> Примечание: Адрес модели в примере является заполнителем. При генерации кода замените src на реальный HTTPS-адрес, закодированный процентами. Не указывайте параметр controls, если управление мышью должно выбираться автоматически по файлу.
  2. 2

    Где лежит модель

    Адрес должен быть https, а сервер должен разрешить чтение файла для https://any3d.cc. Браузер посетителя скачивает этот один файл, например GLB, STL, OBJ, FBX или PLY. Для 3D Tiles укажите адрес tileset.json. Any3D не хранит копию. Текстуры и данные в отдельных файлах пропадают, если они не упакованы в модель, как в GLB.

  3. 3

    Параметры страницы

    Параметры ниже не обязательны. Кнопка открытия полного просмотрщика остается видимой.

    ПараметрЗначениеЭффект
    autorotate1Вращает модель. Без параметра она остаётся на месте.
    themelight | dark | systemЗадаёт тему страницы.
    bgtransparentДелает фон прозрачным.
    controlsauto | standard | cad | solidworks | blender | splat | customРаскладка мыши. Пустое значение значит auto и следует за файлом.
    https://any3d.cc/ru-RU/embed
      ?src=https%3A%2F%2Fcdn.example.com%2Fmodel.glb
      &autorotate=1
      &theme=dark
      &bg=transparent
  4. 4

    Открыть полный просмотрщик

    Кнопка открывает подходящий просмотрщик Any3D в новой вкладке и передаёт тот же адрес модели. Файлы Gaussian Splatting, 3D Tiles и чертежи DWG или DXF открываются в своих просмотрщиках. Остальные файлы открывает просмотрщик 3D-моделей. Если родительская страница ограничивает iframe через sandbox, кнопке нужны allow-popups и allow-popups-to-escape-sandbox, чтобы открыть вкладку.