@sequent-org/ifc-viewer 1.2.4-ci.25.0 → 1.2.4-ci.27.0

package/README.md

@@ -27,6 +27,24 @@ IFC 3D model viewer component for web applications. Основан на Three.js
 
 **Готово!** Пакет полностью автоматический - никаких дополнительных настроек не требуется.
 
+### Дефолтный пресет визуала (важно)
+
+По умолчанию пакет включает **пресет "Тест"** — это рекомендованные настройки визуала (тени + самозатенение + ACES/sRGB + SSAO + Environment), чтобы модель выглядела корректно сразу после интеграции.
+
+Если нужно отключить и вернуться к базовым настройкам:
+
+```javascript
+import { IfcViewer } from '@sequent-org/ifc-viewer'
+
+const viewer = new IfcViewer({
+  container: '#viewer-container',
+  ifcUrl: '/path/to/model.ifc',
+  useTestPreset: false,
+})
+
+await viewer.init()
+```
+
 ## 🚀 Установка
 
 ```bash

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sequent-org/ifc-viewer",
   "private": false,
-  "version": "1.2.4-ci.25.0",
+  "version": "1.2.4-ci.27.0",
   "type": "module",
   "description": "IFC 3D model viewer component for web applications - fully self-contained with local IFCLoader",
   "main": "src/index.js",

package/src/IfcViewer.js

@@ -13,18 +13,8 @@
 import { Viewer } from "./viewer/Viewer.js";
 import { IfcService } from "./ifc/IfcService.js";
 import { IfcTreeView } from "./ifc/IfcTreeView.js";
+import './style.css';
 
-// Загружаем стили при импорте IfcViewer
-if (typeof window !== 'undefined' && !document.querySelector('style[data-ifc-viewer]')) {
-  import('./style.css').then(() => {
-    // Добавляем маркер, что стили загружены
-    const style = document.createElement('style');
-    style.setAttribute('data-ifc-viewer', 'loaded');
-    document.head.appendChild(style);
-  }).catch(error => {
-    console.warn('IfcViewer: не удалось загрузить стили:', error.message);
-  });
-}
 
 export class IfcViewer {
   /**
@@ -34,6 +24,7 @@ export class IfcViewer {
    * @param {string} [options.ifcUrl] - URL для загрузки IFC файла
    * @param {File} [options.ifcFile] - File объект для загрузки IFC файла
    * @param {string} [options.wasmUrl] - URL для загрузки WASM файла web-ifc
+   * @param {boolean} [options.useTestPreset=true] - Включать ли пресет "Тест" по умолчанию (рекомендованные тени/визуал)
    * @param {boolean} [options.showSidebar=false] - Показывать ли боковую панель с деревом
    * @param {boolean} [options.showControls=false] - Показывать ли панель управления (нижние кнопки)
    * @param {boolean} [options.showToolbar=true] - Показывать ли верхнюю панель инструментов
@@ -61,6 +52,8 @@ export class IfcViewer {
       ifcUrl: options.ifcUrl || null,
       ifcFile: options.ifcFile || null,
       wasmUrl: options.wasmUrl || null,
+      // По умолчанию включаем пресет "Тест" для корректного вида теней (как в демо-настройках)
+      useTestPreset: options.useTestPreset !== false,
       showSidebar: options.showSidebar === true, // по умолчанию false
       showControls: options.showControls === true, // по умолчанию false
       showToolbar: options.showToolbar !== false, // по умолчанию true
@@ -90,7 +83,7 @@ export class IfcViewer {
     // Внутренние состояния управления
     this.viewerState = {
       quality: 'medium', // 'low' | 'medium' | 'high'
-      edgesVisible: true,
+      edgesVisible: false,
       flatShading: true,
       clipping: {
         x: false,
@@ -122,6 +115,12 @@ export class IfcViewer {
       this._initViewer();
       this._initIfcService();
       this._initTreeView();
+
+      // Применяем дефолтный пресет пакета (полностью независим от index.html)
+      // Важно: пресет должен примениться ДО загрузки модели, чтобы настройки подхватились при replaceWithModel()
+      if (this.options.useTestPreset && this.viewer?.setTestPresetEnabled) {
+        this.viewer.setTestPresetEnabled(true);
+      }
       
       // Настраиваем обработчики событий
       this._setupEventHandlers();
@@ -308,14 +307,14 @@ export class IfcViewer {
             
             <!-- Стили отображения -->
             <div class="join">
-              <button class="btn btn-sm join-item btn-active" id="ifcToggleEdges"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="c-tree__icon c-tree__icon--3d"><g fill="#252A3F" fill-rule="nonzero"><path d="M12.5 5L6.005 8.75v7.5L12.5 20l6.495-3.75v-7.5L12.5 5zm0-1.155l7.495 4.328v8.654L12.5 21.155l-7.495-4.328V8.173L12.5 3.845z"></path><path d="M12 12v8.059h1V12z"></path><path d="M5.641 9.157l7.045 4.025.496-.868-7.045-4.026z"></path><path d="M18.863 8.288l-7.045 4.026.496.868 7.045-4.025z"></path></g></svg></button>              
+              <button class="btn btn-sm join-item" id="ifcToggleEdges"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="c-tree__icon c-tree__icon--3d"><g fill="#252A3F" fill-rule="nonzero"><path d="M12.5 5L6.005 8.75v7.5L12.5 20l6.495-3.75v-7.5L12.5 5zm0-1.155l7.495 4.328v8.654L12.5 21.155l-7.495-4.328V8.173L12.5 3.845z"></path><path d="M12 12v8.059h1V12z"></path><path d="M5.641 9.157l7.045 4.025.496-.868-7.045-4.026z"></path><path d="M18.863 8.288l-7.045 4.026.496.868 7.045-4.025z"></path></g></svg></button>              
             </div>
             
             <!-- Секущие плоскости -->
             <div class="join">
               <button class="btn btn-sm join-item" id="ifcClipX" style="margin-right:2px"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.6 3v9.07l3.87-1.72a2 2 0 01.81-.17 2.08 2.08 0 011.77 3.09 1.09 1.09 0 01-.56.56l-4.36 1.94L21.6 21V9z"></path><path d="M4.74 15.33l9.14-4.07a1 1 0 011.32.51 1 1 0 01-.51 1.32l-9.14 4.07 4 1.52L9 20l-6.6-2.53 2.53-6.6 1.32.51z"></path></svg></button>
               <button class="btn btn-sm join-item" id="ifcClipZ" style="margin-right:2px"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 13.82a1.09 1.09 0 01-.56-.56 2.08 2.08 0 011.78-3.09 2 2 0 01.81.17l3.87 1.72V3l-11 6v12l9.54-5.2z"></path><path d="M17.24 11.37l1.32-.51 2.53 6.6L14.5 20l-.5-1.32 4-1.52-9.18-4.07a1 1 0 01-.51-1.32 1 1 0 011.32-.51l9.14 4.07z"></path></svg></button>
-              <button class="btn btn-sm join-item" id="ifcClipY" style="margin-right:2px"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.25 11.18v3.52A1.87 1.87 0 0111 15.88a1 1 0 01-.32-.72V11.1l-9 4.5L12.45 21l9.9-5.4z"></path><path d="M8.85 8.4L8 7.5 12.45 3 17 7.5l-.9.9-2.7-2.7v9a.9.9 0 01-.9.9.9.9 0 01-.9-.9v-9z"></path></svg></button>
+              <button class="btn btn-sm join-item" id="ifcClipY" style="margin-right:0px"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.25 11.18v3.52A1.87 1.87 0 0111 15.88a1 1 0 01-.32-.72V11.1l-9 4.5L12.45 21l9.9-5.4z"></path><path d="M8.85 8.4L8 7.5 12.45 3 17 7.5l-.9.9-2.7-2.7v9a.9.9 0 01-.9.9.9.9 0 01-.9-.9v-9z"></path></svg></button>
             </div>
                                  
           </div>

package/src/ifc/IfcService.js

@@ -71,7 +71,9 @@ export class IfcService {
   }
 
   /**
-   * Получает список путей к WASM файлу в порядке приоритета
+   * Получает список путей к WASM в порядке приоритета.
+   * ВАЖНО: web-ifc сам добавляет имя файла web-ifc.wasm к переданному пути,
+   * поэтому здесь указываем директории, а не полный путь до файла.
    * @private
    */
   _getWasmPaths() {
@@ -83,12 +85,14 @@ export class IfcService {
     }
     
     // 2. Популярные пути по умолчанию (в порядке приоритета)
+    //    Ожидаемый итоговый URL после SetWasmPath(path):
+    //      path + 'web-ifc.wasm'
     paths.push(
-      '/node_modules/web-ifc/web-ifc.wasm', // Прямо из node_modules (самый надежный)
-      '/wasm/web-ifc.wasm',           // Стандартный путь в public/wasm/
-      '/web-ifc.wasm',                // Корневой путь
-      './web-ifc.wasm',               // Относительный путь
-      'web-ifc.wasm'                  // Просто имя файла
+      '/wasm/',                  // Стандартный путь: public/wasm/web-ifc.wasm
+      '/node_modules/web-ifc/',  // Прямо из node_modules
+      '/',                       // Корень dev-сервера
+      './',                      // Относительный путь
+      ''                         // Пусть библиотека сама определит путь
     );
     
     return paths;

package/src/main.js

@@ -8,6 +8,492 @@ const app = document.getElementById("app");
 if (app) {
   const viewer = new Viewer(app);
   viewer.init();
+
+  // Панель свойств: тени
+  const shadowToggle = document.getElementById("shadowToggle");
+  const shadowGradToggle = document.getElementById("shadowGradToggle");
+  const shadowGradLen = document.getElementById("shadowGradLen");
+  const shadowGradLenValue = document.getElementById("shadowGradLenValue");
+  const shadowGradStr = document.getElementById("shadowGradStr");
+  const shadowGradStrValue = document.getElementById("shadowGradStrValue");
+  const shadowGradCurve = document.getElementById("shadowGradCurve");
+  const shadowGradCurveValue = document.getElementById("shadowGradCurveValue");
+  const shadowOpacity = document.getElementById("shadowOpacity");
+  const shadowOpacityValue = document.getElementById("shadowOpacityValue");
+  const shadowSoft = document.getElementById("shadowSoft");
+  const shadowSoftValue = document.getElementById("shadowSoftValue");
+  // Материалы
+  const matPreset = document.getElementById("matPreset");
+  const matRough = document.getElementById("matRough");
+  const matRoughValue = document.getElementById("matRoughValue");
+  const matMetal = document.getElementById("matMetal");
+  const matMetalValue = document.getElementById("matMetalValue");
+  // Визуал (диагностика)
+  const testPresetToggle = document.getElementById("testPresetToggle");
+  const rtQualityToggle = document.getElementById("rtQualityToggle");
+  const envToggle = document.getElementById("envToggle");
+  const envInt = document.getElementById("envInt");
+  const envIntValue = document.getElementById("envIntValue");
+  const toneToggle = document.getElementById("toneToggle");
+  const exposure = document.getElementById("exposure");
+  const exposureValue = document.getElementById("exposureValue");
+  const aoToggle = document.getElementById("aoToggle");
+  const aoInt = document.getElementById("aoInt");
+  const aoIntValue = document.getElementById("aoIntValue");
+  const aoRad = document.getElementById("aoRad");
+  const aoRadValue = document.getElementById("aoRadValue");
+  const dumpVisual = document.getElementById("dumpVisual");
+  // Цветокор
+  const ccToggle = document.getElementById("ccToggle");
+  const ccHue = document.getElementById("ccHue");
+  const ccHueValue = document.getElementById("ccHueValue");
+  const ccSat = document.getElementById("ccSat");
+  const ccSatValue = document.getElementById("ccSatValue");
+  const ccBri = document.getElementById("ccBri");
+  const ccBriValue = document.getElementById("ccBriValue");
+  const ccCon = document.getElementById("ccCon");
+  const ccConValue = document.getElementById("ccConValue");
+
+  // ===== Test preset ("Тест") - полностью изолированная настройка =====
+  const _testSnapshot = new Map();
+  const testSnapshotEl = (el) => {
+    if (!el) return;
+    _testSnapshot.set(el, {
+      checked: "checked" in el ? el.checked : undefined,
+      value: "value" in el ? el.value : undefined,
+      disabled: "disabled" in el ? el.disabled : undefined,
+    });
+  };
+  const testRestoreEl = (el) => {
+    if (!el) return;
+    const s = _testSnapshot.get(el);
+    if (!s) return;
+    if ("checked" in el && typeof s.checked === "boolean") el.checked = s.checked;
+    if ("value" in el && typeof s.value === "string") el.value = s.value;
+    if ("disabled" in el && typeof s.disabled === "boolean") el.disabled = s.disabled;
+  };
+
+  const getAllNonTestControls = () => ([
+    // Test preset toggle must stay enabled to allow turning it off
+    // Shadows + sun
+    shadowToggle, shadowGradToggle, shadowGradLen, shadowGradStr, shadowGradCurve, shadowOpacity, shadowSoft,
+    sunToggle, sunHeight,
+    // Materials
+    matPreset, matRough, matMetal,
+    // Visual
+    rtQualityToggle, envToggle, envInt, toneToggle, exposure, aoToggle, aoInt, aoRad,
+    dumpVisual,
+    // Color correction
+    ccToggle, ccHue, ccSat, ccBri, ccCon,
+  ].filter(Boolean));
+
+  const setDisabled = (el, disabled) => { if (el && "disabled" in el) el.disabled = !!disabled; };
+
+  const applyTestUiLock = (enabled) => {
+    getAllNonTestControls().forEach((el) => setDisabled(el, enabled));
+    // сам тест-переключатель не блокируем
+    if (testPresetToggle) setDisabled(testPresetToggle, false);
+  };
+
+  if (testPresetToggle) {
+    testPresetToggle.checked = false;
+    testPresetToggle.addEventListener("change", (e) => {
+      const on = !!e.target.checked;
+      if (on) {
+        _testSnapshot.clear();
+        // снимем снапшот со всех контролов, включая сам test (чтобы вернуть checked), но блокировать его не будем
+        [testPresetToggle, ...getAllNonTestControls()].forEach(testSnapshotEl);
+        viewer.setTestPresetEnabled?.(true);
+        applyTestUiLock(true);
+      } else {
+        viewer.setTestPresetEnabled?.(false);
+        // вернём UI
+        [testPresetToggle, ...getAllNonTestControls()].forEach(testRestoreEl);
+        applyTestUiLock(false);
+      }
+    });
+  }
+
+  // ===== Realtime-quality preset (UI master toggle) =====
+  const _rtSnapshot = new Map();
+  const snapshotEl = (el) => {
+    if (!el) return;
+    _rtSnapshot.set(el, {
+      checked: "checked" in el ? el.checked : undefined,
+      value: "value" in el ? el.value : undefined,
+      disabled: "disabled" in el ? el.disabled : undefined,
+    });
+  };
+  const restoreEl = (el) => {
+    if (!el) return;
+    const s = _rtSnapshot.get(el);
+    if (!s) return;
+    if ("checked" in el && typeof s.checked === "boolean") el.checked = s.checked;
+    if ("value" in el && typeof s.value === "string") el.value = s.value;
+    if ("disabled" in el && typeof s.disabled === "boolean") el.disabled = s.disabled;
+  };
+  // Важно: делаем это функцией, чтобы не попасть в TDZ для переменных,
+  // которые объявляются ниже (например, sunToggle/sunHeight).
+  const getRtManagedControls = () => ([
+    // Shadows + sun
+    shadowToggle, shadowGradToggle, shadowGradLen, shadowGradStr, shadowGradCurve, shadowOpacity, shadowSoft,
+    sunToggle, sunHeight,
+    // Materials
+    matPreset, matRough, matMetal,
+    // Visual
+    envToggle, envInt, toneToggle, exposure, aoToggle, aoInt, aoRad,
+    // Color correction
+    ccToggle, ccHue, ccSat, ccBri, ccCon,
+  ].filter(Boolean));
+
+  const applyRtQualityUiLock = (enabled) => {
+    // Блокируем все ручные контролы, кроме самого переключателя и кнопки dump
+    getRtManagedControls().forEach((el) => setDisabled(el, enabled));
+  };
+
+  if (rtQualityToggle) {
+    rtQualityToggle.checked = false;
+    rtQualityToggle.addEventListener("change", (e) => {
+      const on = !!e.target.checked;
+      if (on) {
+        // Снимем UI-снапшот, чтобы вернуть всё как было (включая disabled-состояния)
+        _rtSnapshot.clear();
+        getRtManagedControls().forEach(snapshotEl);
+        snapshotEl(dumpVisual); // dump не блокируем, но состояние тоже сохраним на всякий
+
+        viewer.setRealtimeQualityEnabled(true);
+        applyRtQualityUiLock(true);
+      } else {
+        viewer.setRealtimeQualityEnabled(false);
+        // Вернём UI
+        getRtManagedControls().forEach(restoreEl);
+        restoreEl(dumpVisual);
+        applyRtQualityUiLock(false);
+      }
+    });
+  }
+  if (shadowToggle) {
+    // Дефолт (из текущих подобранных значений)
+    shadowToggle.checked = true;
+    viewer.setShadowsEnabled(true);
+    shadowToggle.addEventListener("change", (e) => {
+      const on = !!e.target.checked;
+      viewer.setShadowsEnabled(on);
+      // UI градиента имеет смысл только когда тени включены
+      if (shadowGradToggle) shadowGradToggle.disabled = !on;
+      if (shadowGradLen) shadowGradLen.disabled = !on;
+      if (shadowGradStr) shadowGradStr.disabled = !on;
+      if (shadowGradCurve) shadowGradCurve.disabled = !on;
+      if (shadowOpacity) shadowOpacity.disabled = !on;
+      if (shadowSoft) shadowSoft.disabled = !on;
+    });
+  }
+  // Градиент тени: по умолчанию включён, но элементы блокируем пока тени выключены
+  const syncGradUiEnabled = (enabled) => {
+    if (shadowGradToggle) shadowGradToggle.disabled = !enabled;
+    if (shadowGradLen) shadowGradLen.disabled = !enabled;
+    if (shadowGradStr) shadowGradStr.disabled = !enabled;
+    if (shadowGradCurve) shadowGradCurve.disabled = !enabled;
+    if (shadowOpacity) shadowOpacity.disabled = !enabled;
+    if (shadowSoft) shadowSoft.disabled = !enabled;
+  };
+  syncGradUiEnabled(true);
+
+  if (shadowGradToggle) {
+    shadowGradToggle.checked = true;
+    viewer.setShadowGradientEnabled(true);
+    shadowGradToggle.addEventListener("change", (e) => {
+      viewer.setShadowGradientEnabled(!!e.target.checked);
+    });
+  }
+  if (shadowGradLen) {
+    shadowGradLen.value = "14.4";
+    if (shadowGradLenValue) shadowGradLenValue.textContent = "14.4";
+    viewer.setShadowGradientLength(14.4);
+    shadowGradLen.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (shadowGradLenValue) shadowGradLenValue.textContent = v.toFixed(1);
+      viewer.setShadowGradientLength(v);
+    });
+  }
+  if (shadowGradStr) {
+    shadowGradStr.value = "1.00";
+    if (shadowGradStrValue) shadowGradStrValue.textContent = "1.00";
+    viewer.setShadowGradientStrength(1.0);
+    shadowGradStr.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (shadowGradStrValue) shadowGradStrValue.textContent = v.toFixed(2);
+      viewer.setShadowGradientStrength(v);
+    });
+  }
+
+  if (shadowGradCurve) {
+    shadowGradCurve.value = "0.50";
+    if (shadowGradCurveValue) shadowGradCurveValue.textContent = "0.50";
+    viewer.setShadowGradientCurve(0.5);
+    shadowGradCurve.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (shadowGradCurveValue) shadowGradCurveValue.textContent = v.toFixed(2);
+      viewer.setShadowGradientCurve(v);
+    });
+  }
+
+  // Полупрозрачность тени на земле
+  if (shadowOpacity) {
+    shadowOpacity.value = "0.14";
+    if (shadowOpacityValue) shadowOpacityValue.textContent = "0.14";
+    viewer.setShadowOpacity(0.14);
+    shadowOpacity.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (shadowOpacityValue) shadowOpacityValue.textContent = v.toFixed(2);
+      viewer.setShadowOpacity(v);
+    });
+  }
+
+  // Мягкость края тени
+  if (shadowSoft) {
+    shadowSoft.value = "0.0";
+    if (shadowSoftValue) shadowSoftValue.textContent = "0.0";
+    viewer.setShadowSoftness(0.0);
+    shadowSoft.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (shadowSoftValue) shadowSoftValue.textContent = v.toFixed(1);
+      viewer.setShadowSoftness(v);
+    });
+  }
+
+  // Панель свойств: солнце (глобальное освещение)
+  const sunToggle = document.getElementById("sunToggle");
+  const sunHeight = document.getElementById("sunHeight");
+  const sunHeightValue = document.getElementById("sunHeightValue");
+  if (sunToggle) {
+    // По умолчанию включено
+    sunToggle.checked = true;
+    viewer.setSunEnabled(true);
+    sunToggle.addEventListener("change", (e) => {
+      const on = !!e.target.checked;
+      viewer.setSunEnabled(on);
+      if (sunHeight) sunHeight.disabled = !on;
+    });
+  }
+  if (sunHeight) {
+    // Дефолт (из текущих подобранных значений)
+    sunHeight.value = "5.9";
+    if (sunHeightValue) sunHeightValue.textContent = "5.9";
+    viewer.setSunHeight(5.9);
+    sunHeight.disabled = !(sunToggle ? !!sunToggle.checked : true);
+    sunHeight.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (sunHeightValue) sunHeightValue.textContent = v.toFixed(1);
+      viewer.setSunHeight(v);
+    });
+  }
+
+  // ===== Материалы =====
+  const MAT_DEFAULTS = {
+    original: { roughness: 0.90, metalness: 0.00, slidersEnabled: false },
+    matte: { roughness: 0.90, metalness: 0.00, slidersEnabled: true },
+    glossy: { roughness: 0.05, metalness: 0.00, slidersEnabled: true },
+    // Важно: "пластик" не должен быть металлом, иначе появятся резкие блики и "дёрганая" картинка при вращении
+    plastic: { roughness: 0.65, metalness: 0.00, slidersEnabled: true },
+    concrete: { roughness: 0.95, metalness: 0.00, slidersEnabled: true },
+  };
+
+  const setMatUiEnabled = (enabled) => {
+    if (matRough) matRough.disabled = !enabled;
+    if (matMetal) matMetal.disabled = !enabled;
+  };
+
+  const applyMatPresetUi = (preset) => {
+    const d = MAT_DEFAULTS[preset] || MAT_DEFAULTS.original;
+    if (matRough) matRough.value = String(d.roughness.toFixed(2));
+    if (matRoughValue) matRoughValue.textContent = d.roughness.toFixed(2);
+    if (matMetal) matMetal.value = String(d.metalness.toFixed(2));
+    if (matMetalValue) matMetalValue.textContent = d.metalness.toFixed(2);
+    setMatUiEnabled(d.slidersEnabled);
+  };
+
+  if (matPreset) {
+    // Дефолт: Пластик (как на скрине)
+    matPreset.value = "plastic";
+    applyMatPresetUi("plastic");
+    viewer.setMaterialPreset("plastic");
+    viewer.setMaterialRoughness(MAT_DEFAULTS.plastic.roughness);
+    viewer.setMaterialMetalness(MAT_DEFAULTS.plastic.metalness);
+    matPreset.addEventListener("change", (e) => {
+      const preset = e.target.value;
+      viewer.setMaterialPreset(preset);
+      applyMatPresetUi(preset);
+      // применяем дефолтные параметры пресета как override
+      const d = MAT_DEFAULTS[preset] || MAT_DEFAULTS.original;
+      if (d.slidersEnabled) {
+        viewer.setMaterialRoughness(d.roughness);
+        viewer.setMaterialMetalness(d.metalness);
+      } else {
+        viewer.setMaterialRoughness(null);
+        viewer.setMaterialMetalness(null);
+      }
+    });
+  }
+
+  if (matRough) {
+    matRough.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (matRoughValue) matRoughValue.textContent = v.toFixed(2);
+      viewer.setMaterialRoughness(v);
+    });
+  }
+  if (matMetal) {
+    matMetal.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (matMetalValue) matMetalValue.textContent = v.toFixed(2);
+      viewer.setMaterialMetalness(v);
+    });
+  }
+
+  // ===== Визуал (диагностика) =====
+  const syncVisualUiEnabled = () => {
+    const envOn = !!(envToggle && envToggle.checked);
+    const toneOn = !!(toneToggle && toneToggle.checked);
+    const aoOn = !!(aoToggle && aoToggle.checked);
+    if (envInt) envInt.disabled = !envOn;
+    if (exposure) exposure.disabled = !toneOn;
+    if (aoInt) aoInt.disabled = !aoOn;
+    if (aoRad) aoRad.disabled = !aoOn;
+  };
+
+  const syncCcUiEnabled = () => {
+    const on = !!(ccToggle && ccToggle.checked);
+    if (ccHue) ccHue.disabled = !on;
+    if (ccSat) ccSat.disabled = !on;
+    if (ccBri) ccBri.disabled = !on;
+    if (ccCon) ccCon.disabled = !on;
+  };
+
+  // Дефолты (как на скрине)
+  if (envToggle) {
+    envToggle.checked = true;
+    viewer.setEnvironmentEnabled(true);
+    envToggle.addEventListener("change", (e) => {
+      viewer.setEnvironmentEnabled(!!e.target.checked);
+      syncVisualUiEnabled();
+    });
+  }
+  if (envInt) {
+    envInt.value = "0.65";
+    if (envIntValue) envIntValue.textContent = "0.65";
+    viewer.setEnvironmentIntensity(0.65);
+    envInt.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (envIntValue) envIntValue.textContent = v.toFixed(2);
+      viewer.setEnvironmentIntensity(v);
+    });
+  }
+
+  if (toneToggle) {
+    toneToggle.checked = true;
+    viewer.setToneMappingEnabled(true);
+    toneToggle.addEventListener("change", (e) => {
+      viewer.setToneMappingEnabled(!!e.target.checked);
+      syncVisualUiEnabled();
+    });
+  }
+  if (exposure) {
+    exposure.value = "1.11";
+    if (exposureValue) exposureValue.textContent = "1.11";
+    viewer.setExposure(1.11);
+    exposure.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (exposureValue) exposureValue.textContent = v.toFixed(2);
+      viewer.setExposure(v);
+    });
+  }
+
+  if (aoToggle) {
+    aoToggle.checked = true;
+    viewer.setAOEnabled(true);
+    aoToggle.addEventListener("change", (e) => {
+      viewer.setAOEnabled(!!e.target.checked);
+      syncVisualUiEnabled();
+    });
+  }
+  if (aoInt) {
+    aoInt.value = "0.52";
+    if (aoIntValue) aoIntValue.textContent = "0.52";
+    viewer.setAOIntensity(0.52);
+    aoInt.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (aoIntValue) aoIntValue.textContent = v.toFixed(2);
+      viewer.setAOIntensity(v);
+    });
+  }
+  if (aoRad) {
+    aoRad.value = "8";
+    if (aoRadValue) aoRadValue.textContent = "8";
+    viewer.setAORadius(8);
+    aoRad.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (aoRadValue) aoRadValue.textContent = String(Math.round(v));
+      viewer.setAORadius(v);
+    });
+  }
+
+  syncVisualUiEnabled();
+
+  if (dumpVisual) {
+    dumpVisual.addEventListener("click", () => viewer.dumpVisualDebug());
+  }
+
+  // ===== Цветокор =====
+  if (ccToggle) {
+    ccToggle.checked = false;
+    viewer.setColorCorrectionEnabled(false);
+    ccToggle.addEventListener("change", (e) => {
+      viewer.setColorCorrectionEnabled(!!e.target.checked);
+      syncCcUiEnabled();
+    });
+  }
+  if (ccHue) {
+    ccHue.value = "0.00";
+    if (ccHueValue) ccHueValue.textContent = "0.00";
+    viewer.setColorHue(0.0);
+    ccHue.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (ccHueValue) ccHueValue.textContent = v.toFixed(2);
+      viewer.setColorHue(v);
+    });
+  }
+  if (ccSat) {
+    ccSat.value = "0.00";
+    if (ccSatValue) ccSatValue.textContent = "0.00";
+    viewer.setColorSaturation(0.0);
+    ccSat.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (ccSatValue) ccSatValue.textContent = v.toFixed(2);
+      viewer.setColorSaturation(v);
+    });
+  }
+  if (ccBri) {
+    ccBri.value = "0.00";
+    if (ccBriValue) ccBriValue.textContent = "0.00";
+    viewer.setColorBrightness(0.0);
+    ccBri.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (ccBriValue) ccBriValue.textContent = v.toFixed(2);
+      viewer.setColorBrightness(v);
+    });
+  }
+  if (ccCon) {
+    ccCon.value = "0.00";
+    if (ccConValue) ccConValue.textContent = "0.00";
+    viewer.setColorContrast(0.0);
+    ccCon.addEventListener("input", (e) => {
+      const v = Number(e.target.value);
+      if (ccConValue) ccConValue.textContent = v.toFixed(2);
+      viewer.setColorContrast(v);
+    });
+  }
+  syncCcUiEnabled();
   // IFC загрузка
   const ifc = new IfcService(viewer);
   ifc.init();
@@ -69,7 +555,9 @@ if (app) {
   qualMed?.addEventListener("click", () => { viewer.setQuality('medium'); setActive(qualMed); });
   qualHigh?.addEventListener("click", () => { viewer.setQuality('high'); setActive(qualHigh); });
 
-  let edgesOn = true;
+  // Рёбра по умолчанию выключены
+  let edgesOn = false;
+  viewer.setEdgesVisible(edgesOn);
   toggleEdges?.addEventListener("click", () => { edgesOn = !edgesOn; viewer.setEdgesVisible(edgesOn); });
   let flatOn = true;
   toggleShading?.addEventListener("click", () => { flatOn = !flatOn; viewer.setFlatShading(flatOn); });