@sequent-org/ifc-viewer 1.2.4-ci.49.0 → 1.2.4-ci.51.0

package/README.md

@@ -367,6 +367,7 @@ npm run test:manual
 - `.gltf` - glTF JSON (часто требует внешние .bin/текстуры; надёжнее грузить по URL)
 - `.obj` - Wavefront OBJ (можно загружать один OBJ или OBJ+MTL(+текстуры) через мультивыбор файлов)
 - `.3ds` - 3D Studio (3DS) (рекомендуется загружать .3ds + текстуры через мультивыбор файлов)
+- `.3dm` - Rhino 3D (3DM) (требуются `rhino3dm.js`/`rhino3dm.wasm`, пакет копирует их в `/public/wasm/rhino3dm/` автоматически)
 - `.stl` - STL (ASCII/Binary). Обычно без материалов/цветов — отображается с дефолтным материалом.
 - `.dae` - COLLADA (DAE) (можно загружать .dae + текстуры через мультивыбор файлов)
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sequent-org/ifc-viewer",
   "private": false,
-  "version": "1.2.4-ci.49.0",
+  "version": "1.2.4-ci.51.0",
   "type": "module",
   "description": "IFC 3D model viewer component for web applications - fully self-contained with local IFCLoader",
   "main": "src/index.js",
@@ -32,7 +32,7 @@
     "access": "public"
   },
   "scripts": {
-    "postinstall": "node scripts/copy-web-ifc-wasm.mjs",
+    "postinstall": "node scripts/copy-web-ifc-wasm.mjs && node scripts/copy-rhino3dm.mjs && node scripts/patch-three-3dm-loader.mjs",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
@@ -42,6 +42,7 @@
     "vite": "^7.1.2"
   },
   "dependencies": {
+    "rhino3dm": "8.4.0",
     "three": "^0.149.0",
     "web-ifc": "^0.0.74"
   }

package/scripts/copy-rhino3dm.mjs

@@ -0,0 +1,90 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { createRequire } from 'node:module';
+
+function ensureDir(p) {
+  fs.mkdirSync(p, { recursive: true });
+}
+
+function copyFile(src, dst) {
+  ensureDir(path.dirname(dst));
+  fs.copyFileSync(src, dst);
+}
+
+function main() {
+  // npm sets INIT_CWD to the original working directory where `npm install` was invoked.
+  // That is the app root we need to copy into.
+  const appRoot = process.env.INIT_CWD || process.cwd();
+
+  const req = createRequire(import.meta.url);
+
+  /** @type {string|null} */
+  let pkgJsonPath = null;
+  try {
+    pkgJsonPath = req.resolve('rhino3dm/package.json', { paths: [appRoot, process.cwd()] });
+  } catch (_) {
+    pkgJsonPath = null;
+  }
+
+  const pkgDir = pkgJsonPath ? path.dirname(pkgJsonPath) : path.join(appRoot, 'node_modules', 'rhino3dm');
+
+  const version = (() => {
+    try {
+      if (pkgJsonPath && fs.existsSync(pkgJsonPath)) {
+        const raw = fs.readFileSync(pkgJsonPath, 'utf8');
+        const json = JSON.parse(raw);
+        return String(json?.version || '').trim() || 'unknown';
+      }
+    } catch (_) {}
+    return 'unknown';
+  })();
+
+  const srcJs = path.join(pkgDir, 'rhino3dm.js');
+  const srcWasm = path.join(pkgDir, 'rhino3dm.wasm');
+
+  const dstDir = path.join(appRoot, 'public', 'wasm', 'rhino3dm');
+  const dstJs = path.join(dstDir, 'rhino3dm.js');
+  const dstWasm = path.join(dstDir, 'rhino3dm.wasm');
+
+  const dstDirV = path.join(dstDir, `v${version}`);
+  const dstJsV = path.join(dstDirV, 'rhino3dm.js');
+  const dstWasmV = path.join(dstDirV, 'rhino3dm.wasm');
+
+  if (!fs.existsSync(srcJs) || !fs.existsSync(srcWasm)) {
+    console.error('[copy-rhino3dm] Source not found', {
+      appRoot,
+      pkgDir,
+      srcJs,
+      srcWasm,
+      existsJs: fs.existsSync(srcJs),
+      existsWasm: fs.existsSync(srcWasm),
+    });
+    process.exitCode = 1;
+    return;
+  }
+
+  copyFile(srcJs, dstJs);
+  copyFile(srcWasm, dstWasm);
+
+  // Versioned location (recommended to avoid cache-mismatch for end-users)
+  copyFile(srcJs, dstJsV);
+  copyFile(srcWasm, dstWasmV);
+
+  const sJs = fs.statSync(srcJs);
+  const sWasm = fs.statSync(srcWasm);
+  const dJs = fs.statSync(dstJs);
+  const dWasm = fs.statSync(dstWasm);
+
+  console.log('[copy-rhino3dm] OK', {
+    appRoot,
+    versionDir: `v${version}`,
+    src: { js: srcJs, wasm: srcWasm },
+    dst: { js: dstJs, wasm: dstWasm },
+    dstV: { js: dstJsV, wasm: dstWasmV },
+    bytes: { js: dJs.size, wasm: dWasm.size },
+    sameSize: { js: sJs.size === dJs.size, wasm: sWasm.size === dWasm.size },
+  });
+}
+
+main();
+

package/scripts/patch-three-3dm-loader.mjs

@@ -0,0 +1,60 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { createRequire } from 'node:module';
+
+function main() {
+  const appRoot = process.env.INIT_CWD || process.cwd();
+  const req = createRequire(import.meta.url);
+
+  /** @type {string|null} */
+  let threePkgJson = null;
+  try {
+    threePkgJson = req.resolve('three/package.json', { paths: [appRoot, process.cwd()] });
+  } catch (_) {
+    threePkgJson = null;
+  }
+
+  const threeDir = threePkgJson ? path.dirname(threePkgJson) : path.join(appRoot, 'node_modules', 'three');
+  const target = path.join(threeDir, 'examples', 'jsm', 'loaders', '3DMLoader.js');
+
+  if (!fs.existsSync(target)) {
+    console.warn('[patch-three-3dm-loader] Target not found, skip', { target });
+    return;
+  }
+
+  const src = fs.readFileSync(target, 'utf8');
+  // Already patched?
+  if (src.includes('doc.instanceDefinitions().count;') || src.includes('doc.materials().count;')) {
+    console.log('[patch-three-3dm-loader] Already patched');
+    return;
+  }
+
+  let out = src;
+  const replacements = [
+    ['doc.instanceDefinitions().count()', 'doc.instanceDefinitions().count'],
+    ['doc.materials().count()', 'doc.materials().count'],
+    ['doc.layers().count()', 'doc.layers().count'],
+    ['doc.views().count()', 'doc.views().count'],
+    ['doc.namedViews().count()', 'doc.namedViews().count'],
+    ['doc.groups().count()', 'doc.groups().count'],
+    ['doc.strings().count()', 'doc.strings().count'],
+  ];
+
+  let changed = 0;
+  for (const [from, to] of replacements) {
+    const before = out;
+    out = out.split(from).join(to);
+    if (out !== before) changed++;
+  }
+
+  if (out === src) {
+    console.warn('[patch-three-3dm-loader] No changes applied (unexpected)', { target });
+    return;
+  }
+
+  fs.writeFileSync(target, out, 'utf8');
+  console.log('[patch-three-3dm-loader] Patched', { target, rulesApplied: changed });
+}
+
+main();
+

package/src/IfcViewer.js

@@ -21,6 +21,7 @@ import { ObjModelLoader } from "./model-loading/loaders/ObjModelLoader.js";
 import { TdsModelLoader } from "./model-loading/loaders/TdsModelLoader.js";
 import { StlModelLoader } from "./model-loading/loaders/StlModelLoader.js";
 import { DaeModelLoader } from "./model-loading/loaders/DaeModelLoader.js";
+import { ThreeDmModelLoader } from "./model-loading/loaders/ThreeDmModelLoader.js";
 import './style.css';
 
 
@@ -34,6 +35,7 @@ export class IfcViewer {
    * @param {string} [options.modelUrl] - URL для загрузки модели (любой поддерживаемый формат)
    * @param {File} [options.modelFile] - File объект модели (любой поддерживаемый формат)
    * @param {string} [options.wasmUrl] - URL для загрузки WASM файла web-ifc
+   * @param {string} [options.rhino3dmLibraryPath] - Путь (директория) к rhino3dm.js и rhino3dm.wasm (для .3dm)
    * @param {boolean} [options.useTestPreset=true] - Включать ли пресет "Тест" по умолчанию (рекомендованные тени/визуал)
    * @param {boolean} [options.showSidebar=false] - Показывать ли боковую панель с деревом
    * @param {boolean} [options.showControls=false] - Показывать ли панель управления (нижние кнопки)
@@ -65,6 +67,7 @@ export class IfcViewer {
       modelUrl: options.modelUrl || null,
       modelFile: options.modelFile || null,
       wasmUrl: options.wasmUrl || null,
+      rhino3dmLibraryPath: options.rhino3dmLibraryPath || '/wasm/rhino3dm/',
       // По умолчанию включаем пресет "Тест" для корректного вида теней (как в демо-настройках)
       useTestPreset: options.useTestPreset !== false,
       showSidebar: options.showSidebar === true, // по умолчанию false
@@ -207,6 +210,7 @@ export class IfcViewer {
         result = await this.modelLoaders.loadUrl(loadSource, {
           viewer: this.viewer,
           wasmUrl: this.options.wasmUrl,
+          rhino3dmLibraryPath: this.options.rhino3dmLibraryPath,
           logger: console,
         });
       } else if (Array.isArray(loadSource) || (typeof FileList !== 'undefined' && loadSource instanceof FileList)) {
@@ -215,17 +219,20 @@ export class IfcViewer {
           ? await this.modelLoaders.loadFiles(files, {
             viewer: this.viewer,
             wasmUrl: this.options.wasmUrl,
+            rhino3dmLibraryPath: this.options.rhino3dmLibraryPath,
             logger: console,
           })
           : await this.modelLoaders.loadFile(files[0], {
             viewer: this.viewer,
             wasmUrl: this.options.wasmUrl,
+            rhino3dmLibraryPath: this.options.rhino3dmLibraryPath,
             logger: console,
           });
       } else if (loadSource instanceof File) {
         result = await this.modelLoaders.loadFile(loadSource, {
           viewer: this.viewer,
           wasmUrl: this.options.wasmUrl,
+          rhino3dmLibraryPath: this.options.rhino3dmLibraryPath,
           logger: console,
         });
       } else {
@@ -531,7 +538,8 @@ export class IfcViewer {
       .register(new ObjModelLoader())
       .register(new TdsModelLoader())
       .register(new StlModelLoader())
-      .register(new DaeModelLoader());
+      .register(new DaeModelLoader())
+      .register(new ThreeDmModelLoader({ libraryPath: this.options.rhino3dmLibraryPath }));
 
     // Если в интерфейсе есть file input — настроим accept
     try {

package/src/index.js

@@ -22,3 +22,4 @@ export { ObjModelLoader } from "./model-loading/loaders/ObjModelLoader.js";
 export { TdsModelLoader } from "./model-loading/loaders/TdsModelLoader.js";
 export { StlModelLoader } from "./model-loading/loaders/StlModelLoader.js";
 export { DaeModelLoader } from "./model-loading/loaders/DaeModelLoader.js";
+export { ThreeDmModelLoader } from "./model-loading/loaders/ThreeDmModelLoader.js";

package/src/main.js

@@ -3,6 +3,7 @@ import { Viewer } from "./viewer/Viewer.js";
 import { IfcService } from "./ifc/IfcService.js";
 import { IfcTreeView } from "./ifc/IfcTreeView.js";
 import { ModelLoaderRegistry } from "./model-loading/ModelLoaderRegistry.js";
+import { CardPlacementController } from "./ui/CardPlacementController.js";
 import { IfcModelLoader } from "./model-loading/loaders/IfcModelLoader.js";
 import { FbxModelLoader } from "./model-loading/loaders/FbxModelLoader.js";
 import { GltfModelLoader } from "./model-loading/loaders/GltfModelLoader.js";
@@ -10,6 +11,7 @@ import { ObjModelLoader } from "./model-loading/loaders/ObjModelLoader.js";
 import { TdsModelLoader } from "./model-loading/loaders/TdsModelLoader.js";
 import { StlModelLoader } from "./model-loading/loaders/StlModelLoader.js";
 import { DaeModelLoader } from "./model-loading/loaders/DaeModelLoader.js";
+import { ThreeDmModelLoader } from "./model-loading/loaders/ThreeDmModelLoader.js";
 
 // Инициализация three.js Viewer в контейнере #app
 const app = document.getElementById("app");
@@ -17,6 +19,9 @@ if (app) {
   const viewer = new Viewer(app);
   viewer.init();
 
+  // UI: режим постановки "карточек" (меток) по клику на модель
+  const cardPlacement = new CardPlacementController({ viewer, container: app, logger: console });
+
   // ===== Диагностика (включается через query-параметры) =====
   // ?debugViewer=1  -> window.__viewer = viewer
   // ?debugViewer=1  -> window.__ifcService = ifc
@@ -354,7 +359,10 @@ if (app) {
     .register(new ObjModelLoader())
     .register(new TdsModelLoader())
     .register(new StlModelLoader())
-    .register(new DaeModelLoader());
+    .register(new DaeModelLoader())
+    .register(new ThreeDmModelLoader());
+
+  const rhino3dmLibraryPath = '/wasm/rhino3dm/';
 
   const uploadBtn = document.getElementById("uploadBtn");
   const ifcInput = document.getElementById("ifcInput");
@@ -369,8 +377,8 @@ if (app) {
       try {
         // Multi-file: e.g. OBJ+MTL (+textures)
         result = (files.length > 1)
-          ? await modelLoaders.loadFiles(files, { viewer, wasmUrl: wasmOverride, logger: console })
-          : await modelLoaders.loadFile(files[0], { viewer, wasmUrl: wasmOverride, logger: console });
+          ? await modelLoaders.loadFiles(files, { viewer, wasmUrl: wasmOverride, rhino3dmLibraryPath, logger: console })
+          : await modelLoaders.loadFile(files[0], { viewer, wasmUrl: wasmOverride, rhino3dmLibraryPath, logger: console });
         activeCapabilities = result?.capabilities || null;
       } catch (err) {
         console.error('Model load error', err);
@@ -611,7 +619,7 @@ if (app) {
     const params = new URLSearchParams(location.search);
     const ifcUrlParam = params.get('ifc');
     const ifcUrl = ifcUrlParam || DEFAULT_IFC_URL;
-    const result = await modelLoaders.loadUrl(encodeURI(ifcUrl), { viewer, wasmUrl: wasmOverride, logger: console });
+    const result = await modelLoaders.loadUrl(encodeURI(ifcUrl), { viewer, wasmUrl: wasmOverride, rhino3dmLibraryPath, logger: console });
     activeCapabilities = result?.capabilities || null;
     if (result?.object3D) {
       if (activeCapabilities?.kind === 'ifc' && activeCapabilities?.ifcService) {
@@ -672,6 +680,7 @@ if (app) {
     import.meta.hot.dispose(() => {
       ifc.dispose();
       viewer.dispose();
+      try { cardPlacement.dispose(); } catch (_) {}
     });
   }
 }

package/src/model-loading/loaders/ThreeDmModelLoader.js

@@ -0,0 +1,147 @@
+import { Box3, Vector3 } from 'three';
+import { Rhino3dmLoader } from 'three/examples/jsm/loaders/3DMLoader.js';
+
+/**
+ * Rhino 3DM loader.
+ *
+ * Notes:
+ * - Requires `rhino3dm.js` and `rhino3dm.wasm` to be served from a library path.
+ *   In this package we copy them to `/public/wasm/rhino3dm/` via postinstall script.
+ */
+export class ThreeDmModelLoader {
+  /**
+   * @param {{ libraryPath?: string, workerLimit?: number, rotateXNeg90?: boolean, alignToGround?: boolean }} [options]
+   */
+  constructor(options = {}) {
+    this.id = '3dm';
+    this.extensions = ['.3dm'];
+    this._libraryPath = options.libraryPath || '/wasm/rhino3dm/';
+    this._workerLimit = Number.isFinite(options.workerLimit) ? Number(options.workerLimit) : 4;
+    // Many 3DM assets are effectively Z-up; viewer is Y-up. Keep consistent with other format loaders.
+    this._rotateXNeg90 = options.rotateXNeg90 !== false; // default true
+    // Bring model down to ground plane so shadow receiver is correct.
+    this._alignToGround = options.alignToGround !== false; // default true
+  }
+
+  /**
+   * @param {File} file
+   * @param {any} ctx
+   */
+  async loadFile(file, ctx) {
+    const url = URL.createObjectURL(file);
+    try {
+      const obj = await this._loadInternal(url, ctx);
+      return {
+        object3D: obj,
+        format: this.id,
+        name: file?.name || '',
+        replacedInViewer: false,
+        capabilities: { kind: 'generic' },
+      };
+    } finally {
+      try { URL.revokeObjectURL(url); } catch (_) {}
+    }
+  }
+
+  /**
+   * @param {string} url
+   * @param {any} ctx
+   */
+  async loadUrl(url, ctx) {
+    const obj = await this._loadInternal(url, ctx);
+    return {
+      object3D: obj,
+      format: this.id,
+      name: String(url || ''),
+      replacedInViewer: false,
+      capabilities: { kind: 'generic' },
+    };
+  }
+
+  async _loadInternal(url, ctx) {
+    const logger = ctx?.logger || console;
+    const libraryPath = (ctx?.rhino3dmLibraryPath || this._libraryPath || '').toString();
+    const normalizedPath = libraryPath.endsWith('/') ? libraryPath : `${libraryPath}/`;
+
+    const loader = new Rhino3dmLoader();
+    loader.setLibraryPath(normalizedPath);
+    loader.setWorkerLimit(this._workerLimit);
+
+    logger?.log?.('[ThreeDmModelLoader] load', {
+      url: String(url || ''),
+      libraryPath: normalizedPath,
+      workerLimit: this._workerLimit,
+    });
+
+    let obj = null;
+    try {
+      obj = await new Promise((resolve, reject) => {
+        try {
+          loader.load(
+            url,
+            (result) => resolve(result),
+            undefined,
+            (err) => reject(err)
+          );
+        } catch (e) {
+          reject(e);
+        }
+      });
+    } catch (e) {
+      const msg = String(e?.message || e?.error?.message || e || '');
+      if (msg.includes('.count is not a function')) {
+        logger?.error?.(
+          '[ThreeDmModelLoader] rhino3dm API mismatch detected. This often happens when rhino3dm version is not compatible with three/examples 3DMLoader. ' +
+            'For three@0.149.0 a compatible rhino3dm version is ~8.4.0.'
+        );
+      }
+      throw e;
+    }
+
+    // Axis + grounding BEFORE Viewer.replaceWithModel(): ensures bbox/shadowReceiver computed correctly.
+    try {
+      if (obj) {
+        if (this._rotateXNeg90) {
+          obj.rotation.x = -Math.PI / 2;
+          obj.updateMatrixWorld?.(true);
+        }
+        if (this._alignToGround) {
+          const box = new Box3().setFromObject(obj);
+          const minY = box.min.y;
+          if (Number.isFinite(minY)) {
+            obj.position.y -= minY;
+            obj.position.y += 0.001; // epsilon to avoid z-fighting with shadow receiver
+            obj.updateMatrixWorld?.(true);
+          }
+        }
+      }
+    } catch (_) {}
+
+    // Basic diagnostics
+    try {
+      let meshes = 0;
+      let mats = 0;
+      obj?.traverse?.((n) => {
+        if (!n?.isMesh) return;
+        meshes++;
+        const m = n.material;
+        const arr = Array.isArray(m) ? m : [m];
+        for (const mi of arr) if (mi) mats++;
+      });
+      let bbox = null;
+      try {
+        const b = new Box3().setFromObject(obj);
+        const size = b.getSize(new Vector3());
+        const center = b.getCenter(new Vector3());
+        bbox = {
+          size: { x: +size.x.toFixed(3), y: +size.y.toFixed(3), z: +size.z.toFixed(3) },
+          center: { x: +center.x.toFixed(3), y: +center.y.toFixed(3), z: +center.z.toFixed(3) },
+        };
+      } catch (_) {}
+      logger?.log?.('[ThreeDmModelLoader] parsed', { meshes, materials: mats, bbox });
+    } catch (_) {}
+
+    return obj;
+  }
+}
+

package/src/styles-local.css

@@ -110,6 +110,81 @@
 .duration-300 { transition-duration: 300ms; }
 .pointer-events-none { pointer-events: none; }
 
+/* === IFC CARD MARKERS (UI overlay) === */
+.ifc-card-add-btn {
+  position: absolute;
+  left: 12px;
+  top: 12px;
+  z-index: 9999;
+  pointer-events: auto;
+
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 600;
+
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: rgba(255, 255, 255, 0.92);
+  color: #1f2937;
+  backdrop-filter: blur(6px);
+}
+
+.ifc-card-add-btn:hover {
+  background: rgba(255, 255, 255, 0.98);
+}
+
+.ifc-card-ghost,
+.ifc-card-marker {
+  position: absolute;
+  z-index: 9999;
+  pointer-events: none;
+  display: block;
+  transform: translate(-50%, -50%);
+  will-change: transform;
+}
+
+.ifc-card-ghost {
+  display: none;
+}
+
+.ifc-card-dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 9999px;
+  background: rgba(37, 99, 235, 0.95); /* blue */
+  border: 2px solid rgba(255, 255, 255, 0.95);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
+}
+
+.ifc-card-num {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  color: #ffffff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+}
+
+.ifc-card-marker {
+  width: 18px;
+  height: 18px;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+/* Клик ловим на контейнере метки, дочерние элементы пусть не перехватывают */
+.ifc-card-marker .ifc-card-dot,
+.ifc-card-marker .ifc-card-num {
+  pointer-events: none;
+}
+
 /* === NAVBAR COMPONENT === */
 .navbar {
   display: flex;