ПРОСМОТР · ВИЗУАЛ

Рендер модели в браузере: фон, окружение, свет и материал

Вкладка «Визуал» задаёт рендер модели во вьюпорте: четыре фона или свой цвет, семь фотоокружений, четыре пресета ключевого света с ползунком яркости, пять материалов и цвет поверхности. Геометрию это не трогает и в историю отмены не пишет — но цвет и материал живут на том же материале сетки, который читает экспорт: в STL они не попадают, а в 3MF, GLB и OBJ+MTL уезжают вместе с моделью.

Открыть в редакторе Все инструменты

Инструмент откроется на демо-модели Benchy — свой файл можно открыть там же

Файл не покидает устройство

Паспорт инструмента

Фон
«Студия», «Светлый», «Тёмный», «Сетка» (по умолчанию) или свой цвет; «Светлый» = #f3f4f6, «Тёмный» = #0e0f11, «Студия» = #f4f5f6 / #161719 по теме страницы
Цвет фона
по умолчанию #e9ebee; любой hex через поле цвета — выбор переключает фон в свой цвет
Реальные сцены
семь панорам WebP: «Стол», «Кухня», «Гараж», «Бетон», «Асфальт», «Пол», «Трава»; сила окружения 0.9, миниатюры 320×160
Свет
«Студия» (по умолчанию, сила 1.7), «Мягкий» (1.0), «Контровой» (2.4), «Верхний» (1.9) — направление и номинал одного ключевого света
Яркость света
0.2–2, шаг 0.05, по умолчанию 1 — множитель номинала пресета
Материал модели
«Матовый» (по умолчанию, roughness 0.7), «Металл» (metalness 1, roughness 0.25), «Глина» (roughness 1), «Каркас» (wireframe, roughness 0.7), «Нормали» (MeshNormalMaterial)
Цвет модели
по умолчанию #c6c9ce; семь образцов: #c6c9ce, #ffffff, #3a3d42, #e0623f, #3f8f8a, #c6a44e, #5566c9, плюс произвольный hex
Тень
карта теней 2048×2048 от ключевого света, плоскость под столом; плотность 0.28 при фотоокружении

Рендер STL в браузере: как это работает

  1. Откройте модель кнопкой «Открыть модель» или перетащите файл в окно — правая панель встанет на вкладку «Визуал». У .scad панель открывается на «Параметрах», «Визуал» стоит следующей вкладкой — нажмите её.
  2. В группе «Фон» выберите «Студия», «Светлый», «Тёмный» или «Сетка», либо задайте свой через поле «Цвет фона». Ниже, под подписью «Реальные сцены», — семь панорам от «Стол» до «Трава»; при них сетка стола прячется, а плотность тени фиксируется на 0.28 — вместо 0.16 на светлом фоне и 0.4 на тёмном.
  3. В группе «Свет» переключите «Студия», «Мягкий», «Контровой» или «Верхний» и подвиньте «Яркость света» в пределах 0.2–2 — ползунок умножает номинал пресета.
  4. В «Материалы» щёлкните «Матовый», «Металл», «Глина», «Каркас» или «Нормали»; в «Цвет модели» — один из семи образцов или «Другой цвет», текущий hex показан рядом с заголовком.
  5. Чтобы передать вид другому человеку, откройте «Поделиться» и включите раздел «Вид модели» — в пакет уйдут фон, свет, яркость, материал и цвет. Снимок экрана возьмёт материал и свет, но фон в него не попадёт.

Рендер STL в браузере: где предел

  • Геометрию вкладка не трогает и в историю отмены не пишет. Но материал и цвет модели — свойства того же материала сетки, который читает экспорт: в STL они не попадают, а в 3MF, GLB и OBJ+MTL уезжают вместе с моделью.
  • У 3MF и glTF/GLB собственные материалы файла сохраняются: пресет меняет только их шероховатость, металличность и каркас, цвет модели на них не действует. Единственный пресет, который подменяет и их, — «Нормали».
  • Подсветка навесов владеет сетками, пока открыта вкладка «Расчёты»: пресет материала к ним в этот момент не применяется. Возврат на «Визуал» гасит подсветку и возвращает выбранный материал.
  • Своих HDR-панорам загрузить нельзя — только семь встроенных и синтетическое студийное окружение; настройки вида не входят в автосохранённую сессию, горячих клавиш у них нет.

Рендер STL в браузере: вопросы

Как посмотреть STL с металлическим материалом онлайн?
Откройте файл, на вкладке «Визуал» в группе «Материалы» выберите «Металл»: у общего материала поверхности metalness становится 1, roughness — 0.25. Отражения берутся из студийного окружения, которое собирается в браузере из RoomEnvironment three.js без загрузки HDR-файла, или из выбранной панорамы в «Реальные сцены». Файл при этом не меняется.
Можно ли поставить свой фон или HDRI для 3D-модели в браузере?
Сплошной цвет — да: поле «Цвет фона» принимает любой hex и переключает фон в режим своего цвета. Своих HDR-панорам нет: доступны семь встроенных WebP-панорам («Стол», «Кухня», «Гараж», «Бетон», «Асфальт», «Пол», «Трава»), каждая превращается в освещение через PMREM прямо в браузере и повёрнута так, чтобы пол окружения оставался под моделью. Если панорама не загрузилась, сцена продолжает работать, а в консоль уходит одна строка без исключения.
Сохраняется ли цвет модели при экспорте в STL или 3MF?
В STL — нет: бинарный STL несёт только треугольники. В 3MF, GLB и OBJ+MTL — да: экспорт снимает цвет и шероховатость с металличностью с того самого материала сетки, который меняет вкладка «Визуал», поэтому «Металл» уезжает в 3MF как metallicness 1 и roughness 0.25, а «Цвет модели» — как цвет базового материала. Цвет, который слайсер разложит по слотам филамента, задаётся покраской, а не «Визуалом».
Почему при выборе материала модель не меняется?
Главная причина: файл 3MF или glTF/GLB несёт собственные материалы, и пресет меняет только их шероховатость, металличность и каркас, не заменяя их серым материалом вьюера; «Цвет модели» на них не действует, целиком подменяет их только «Нормали». Вторая причина с этой вкладки не видна: подсветка навесов владеет сетками, пока открыта вкладка «Расчёты», — при возврате на «Визуал» она гаснет и выбранный материал встаёт на место.
Как посмотреть каркас (wireframe) и нормали 3D-модели онлайн?
«Каркас» включает флаг wireframe у общего материала (roughness 0.7) — видны рёбра треугольников, геометрия не меняется. «Нормали» — отдельный MeshNormalMaterial с гладким затенением (flatShading: false): цвет в точке задаётся направлением нормали, поэтому участки с перевёрнутыми нормалями окрашиваются иначе, чем соседние. «Нормали» подменяет поверхность целиком, включая собственные материалы 3MF и glTF.