import { buildViewerResourceURL } from "../../api/endpoints.js"; import { APP_CONFIG } from "../../app/config.js"; import { EVENTS } from "../../app/events.js"; import { t } from "../../app/i18n.js"; import { applyModel3DMaterialMode as _applyMaterialMode, buildRenderableModel3DObject as _buildRenderableObject, computeModel3DObjectFrame as _computeObjectFrame, disposeModel3DTempMaterials as _disposeTempMaterials, findModel3DHasSkeleton as _findHasSkeleton, fitModel3DOrthographicCamera as _fitOrthographicCamera, fitModel3DPerspectiveCamera as _fitPerspectiveCamera, getModel3DAnimations as _getModelAnimations, hasModel3DMeshMaterials as _hasMeshMaterials, storeModel3DOriginalMaterials as _storeOriginalMaterials, } from "./model3dCore.js"; import { createModel3DLoaderInstance as _createLoaderInstance, loadModel3DContent as _loadModelContent, loadModel3DThreeDeps as _loadThreeDeps, } from "./model3dLoaders.js"; import { createModel3DAnimationBar as _createAnimationBar, createModel3DSettingsPanel as _createSettingsPanel, createModel3DViewportButton as _createViewportButton, drawModel3DMessage as _drawModelMessage, formatModel3DAnimTime as _formatAnimTime, setModel3DViewportButtonActive as _setViewportButtonActive, stopModel3DEvent as _stopEvent, } from "./model3dSupport.js"; export const MODEL3D_EXT_TO_LOADER = Object.freeze({ ".gltf": "gltf", ".glb": "gltf", ".obj": "obj", ".fbx": "fbx", ".stl": "stl", ".ply": "ply", ".splat": "splat", ".ksplat": "splat", ".spz": "splat", }); export const MODEL3D_EXTS = new Set(Object.keys(MODEL3D_EXT_TO_LOADER)); export const PREVIEWABLE_MODEL3D_LOADERS = new Set(["gltf", "obj", "fbx", "stl", "ply"]); const MODEL3D_VIEWER_DEFAULT_BG = "#282828"; const MODEL3D_DEFAULT_CONTROL_HINT = t("model3d.controlHint", "Rotate: left drag Pan: right drag Zoom: wheel"); const MODEL3D_VIEW_MODES = Object.freeze({ PERSPECTIVE: "perspective", ORTHOGRAPHIC: "orthographic", }); const MODEL3D_MATERIAL_MODES = Object.freeze({ ORIGINAL: "original", NORMAL: "normal", DEPTH: "depth", WIREFRAME: "wireframe", POINTCLOUD: "pointcloud", }); // Euler rotations [x, y, z] to apply to modelGroup so the specified axis points up const MODEL3D_UP_DIR_EULER = Object.freeze({ original: [0, 0, 0], "+y": [0, 0, 0], "-y": [Math.PI, 0, 0], "+z": [-Math.PI / 2, 0, 0], "-z": [Math.PI / 2, 0, 0], "+x": [0, 0, Math.PI / 2], "-x": [0, 0, -Math.PI / 2], }); const MODEL3D_ANIMATION_SPEEDS = [0.25, 0.5, 1.0, 1.5, 2.0]; const MODEL3D_ANIM_BAR_HEIGHT_PX = 44; const MODEL3D_DEFAULT_FOV = 75; const MODEL3D_DEFAULT_LIGHT_INTENSITY = 1.0; const MODEL3D_LIGHT_SCALE = Object.freeze({ ambient: 0.5, main: 0.8, fill: 0.3, back: 0.3, rim: 0.3, bottom: 0.2, }); // --- Utility helpers ------------------------------------------------------- function _extOf(asset: any) { try { const ext = String(asset?.ext || "") .trim() .toLowerCase(); if (ext) return ext.startsWith(".") ? ext : `.${ext}`; } catch (e: any) { console.debug?.(e); } try { const name = String(asset?.filename || asset?.filepath || asset?.path || "").trim(); const idx = name.lastIndexOf("."); return idx >= 0 ? name.slice(idx).toLowerCase() : ""; } catch (e: any) { console.debug?.(e); } return ""; } function _isAbsoluteOrSpecialUrl(url: any) { const value = String(url || "").trim(); if (!value) return false; // Root-relative (/path), protocol-relative (//host), or scheme (http:, data:, blob:) // Root-relative URLs must NOT be rewritten through the viewer resource endpoint. return value.startsWith("/") || /^[a-z][\w+\-.]*:/i.test(value); } function _resolveLoaderFromAsset(asset: any) { const explicit = String(asset?.loader || asset?.viewer_info?.loader || "") .trim() .toLowerCase(); if (explicit) return explicit; return (MODEL3D_EXT_TO_LOADER as Record)[_extOf(asset)] || ""; } // --- Settings panel -------------------------------------------------------- export function isModel3DAsset(asset: any): boolean { const kind = String(asset?.kind || "").toLowerCase(); if (kind === "model3d") return true; return MODEL3D_EXTS.has(_extOf(asset)); } /** Returns the loader type string (e.g. "gltf", "obj", "fbx") for the given asset. */ export function resolveModel3DLoader(asset: any): string | null { return _resolveLoaderFromAsset(asset) || "gltf"; } /** Returns the default mouse-control hint string shown in the 3D viewport. */ export function getModel3DDefaultControlHint(): string { return MODEL3D_DEFAULT_CONTROL_HINT; } /** Returns the WebGL canvas element inside a 3D host element, or null if not found. */ export function findModel3DCanvas(rootEl: any) { try { if (rootEl?.classList?.contains?.("mjr-model3d-render-canvas")) return rootEl; } catch (e: any) { console.debug?.(e); } try { return rootEl?.querySelector?.(".mjr-model3d-render-canvas") || null; } catch { return null; } } /** Returns true if the given DOM element is inside a 3D model host (used to suppress panzoom). */ export function isModel3DInteractionTarget(target: any) { try { return !!target?.closest?.( ".mjr-model3d-host, .mjr-viewer-model3d-host, .mjr-mfv-model3d-host", ); } catch { return false; } } /** * Returns an OrbitControls mouseButtons config mapping Left->ROTATE, Middle->DOLLY, Right->PAN. * @param {MouseEvent|null} eventLike - unused, reserved for future gesture detection * @param {{ROTATE:number,DOLLY:number,PAN:number}} MOUSE_ENUM - THREE.MOUSE enum */ export function buildModel3DMouseButtons(eventLike: any, MOUSE_ENUM: any) { const M = MOUSE_ENUM || { ROTATE: 0, DOLLY: 1, PAN: 2 }; void eventLike; return { LEFT: M.ROTATE, MIDDLE: M.DOLLY, RIGHT: M.PAN }; } // --- Main element factory -------------------------------------------------- /** * Creates and returns a fully self-contained 3D viewer host element. * * The returned div contains a WebGL canvas, status overlay, toolbar, settings * panel, and animation bar. Three.js is loaded lazily on first call. * * @param {object} asset - Asset dict with at least `filename` and optionally `id`, `ext` * @param {string} url - Absolute or root-relative URL to the 3D model file * @param {object} [options] * @param {string} [options.hostClassName] - CSS class for the host div * @param {string} [options.hostStyle] - Inline CSS for the host div * @param {string} [options.canvasClassName] - CSS class for the WebGL canvas * @param {string} [options.canvasStyle] - Inline CSS for the WebGL canvas * @param {boolean} [options.disableViewerTransform=false] - Disable panzoom on canvas * @param {string} [options.hintText] - Override the control hint text * @param {Function} [options.scheduleOverlayRedraw] - Callback to trigger overlay repaints * @param {Function} [options.onReady] - Called once the model is loaded and rendered * @returns {HTMLDivElement} The 3D viewer host element (append to DOM to activate) */ export function createModel3DMediaElement(asset: any, url: any, options: Record = {}) { const shouldPauseDuringExecution = options?.pauseDuringExecution == null ? !!APP_CONFIG?.VIEWER_PAUSE_DURING_EXECUTION : !!options.pauseDuringExecution; const host = document.createElement("div"); host.className = options.hostClassName || "mjr-model3d-host mjr-viewer-model3d-host"; host.style.cssText = options.hostStyle || [ "width:100%", "height:100%", "display:flex", "align-items:stretch", "justify-content:stretch", "position:relative", "overflow:hidden", "border-radius:12px", "background:radial-gradient(circle at top, rgba(76,175,80,0.10), rgba(0,0,0,0) 42%), linear-gradient(180deg, rgba(40,40,40,0.98), rgba(19,22,28,0.99))", "box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)", ].join(";"); host.setAttribute("data-capture-wheel", "true"); host.tabIndex = -1; // Canvas (WebGL target) const canvas = document.createElement("canvas"); canvas.className = options.canvasClassName || "mjr-viewer-media mjr-model3d-render-canvas"; canvas.style.cssText = options.canvasStyle || [ "display:block", "width:100%", "height:100%", "max-width:100%", "max-height:100%", "outline:none", "touch-action:none", ].join(";"); canvas.tabIndex = 0; (canvas as any)._mjrDisableViewerTransform = options.disableViewerTransform !== false; try { if (asset?.id != null) canvas.dataset.mjrAssetId = String(asset.id); } catch (e: any) { console.debug?.(e); } host.appendChild(canvas); // Status overlay canvas const statusCanvas = document.createElement("canvas"); statusCanvas.className = "mjr-model3d-status"; statusCanvas.style.cssText = [ "position:absolute", "inset:0", "display:block", "width:100%", "height:100%", "pointer-events:none", "z-index:1", ].join(";"); host.appendChild(statusCanvas); // Format badge const ext = _extOf(asset).replace(".", "").toUpperCase(); if (ext) { const badge = document.createElement("div"); badge.className = "mjr-model3d-badge"; badge.textContent = ext; badge.style.cssText = [ "position:absolute", "top:10px", "left:10px", "padding:4px 8px", "border-radius:999px", "font:700 10px system-ui,sans-serif", "letter-spacing:0.08em", "color:#fff", "background:rgba(76,175,80,0.9)", "pointer-events:none", "z-index:2", ].join(";"); host.appendChild(badge); } // Viewport toolbar (top-right) const viewportToolbar = document.createElement("div"); viewportToolbar.className = "mjr-model3d-toolbar"; viewportToolbar.style.cssText = [ "position:absolute", "top:10px", "right:10px", "display:flex", "align-items:center", "gap:6px", "flex-wrap:wrap", "pointer-events:none", "z-index:5", ].join(";"); const viewportTools = document.createElement("div"); viewportTools.style.cssText = "display:flex;align-items:center;gap:6px;flex-wrap:wrap;pointer-events:auto;"; const resetViewBtn = _createViewportButton(t("model3d.reset", "Reset"), t("model3d.resetView", "Reset 3D view")); const gridBtn = _createViewportButton(t("model3d.grid", "Grid"), t("model3d.toggleGrid", "Toggle grid")); const cameraModeBtn = _createViewportButton(t("model3d.persp", "Persp"), t("model3d.switchCamera", "Switch perspective / orthographic")); const settingsBtn = _createViewportButton(t("model3d.settings", "Settings"), t("model3d.settings", "Settings")); viewportTools.append(resetViewBtn, gridBtn, cameraModeBtn, settingsBtn); viewportToolbar.appendChild(viewportTools); host.appendChild(viewportToolbar); // Control hint (bottom-right) const hint = document.createElement("div"); hint.className = "mjr-model3d-hint"; hint.textContent = options.hintText || MODEL3D_DEFAULT_CONTROL_HINT; hint.style.cssText = [ "position:absolute", "right:10px", "bottom:10px", "padding:5px 10px", "border-radius:999px", "font:500 11px system-ui,sans-serif", "color:rgba(255,255,255,0.75)", "background:rgba(0,0,0,0.35)", "backdrop-filter:blur(6px)", "pointer-events:none", "z-index:2", "transition:bottom 0.2s", ].join(";"); host.appendChild(hint); // Settings panel const settingsDom = _createSettingsPanel({ defaultBgColor: MODEL3D_VIEWER_DEFAULT_BG, defaultFov: MODEL3D_DEFAULT_FOV, defaultLightIntensity: MODEL3D_DEFAULT_LIGHT_INTENSITY, hasSkeleton: false, // updated after load }); host.appendChild(settingsDom.panel); // Animation bar const animDom = _createAnimationBar(); host.appendChild(animDom.bar); // -- State -------------------------------------------------------------- let destroyed = false; let resizeObserver: any = null; let threeLib: any = null; let renderer: any = null; let scene: any = null; let activeCamera: any = null; let perspectiveCamera: any = null; let orthographicCamera: any = null; let controls: any = null; let rafId: any = null; let renderFrameFn: any = null; let runtimePaused = false; let statusState: any = null; let interactionCleanup: any = null; let gridHelper: any = null; let modelGroup: any = null; // Group wrapping loadedObject - used for up-direction rotation let loadedObject: any = null; let objectFrame: any = null; let orthographicFrustumHeight = 0; let viewportMode: string = MODEL3D_VIEW_MODES.PERSPECTIVE; // Material modes let originalMaterials = new Map(); // uuid -> original material const tempMaterials = new Set(); // disposable materials created by modes // Skeleton let skeletonHelper: any = null; let hasSkeleton = false; // Lights let ambientLight: any = null; let lightObjects: any[] = []; // [mainDir, backDir, fillRight, fillLeft, bottomDir] let lightIntensity = MODEL3D_DEFAULT_LIGHT_INTENSITY; // Animation let animationMixer: any = null; let animationClock: any = null; let animationClips: any[] = []; let animationActions: any[] = []; let currentAnimIdx = 0; let animSpeed = 1.0; let isAnimPlaying = false; let isSeeking = false; // Settings panel visibility let settingsPanelVisible = false; const modelName = String(asset?.filename || "3D model"); const scheduleOverlayRedraw = () => { try { options.scheduleOverlayRedraw?.(); } catch (e: any) { console.debug?.(e); } }; // -- Status helpers ------------------------------------------------------ const setStatus = (title: any, hintText = "", accent = "#4CAF50") => { statusState = { title, hintText, accent }; statusCanvas.style.display = "block"; _drawModelMessage(statusCanvas, title, hintText, accent); }; const clearStatus = () => { statusState = null; statusCanvas.style.display = "none"; }; const syncNaturalSize = () => { try { const rect = host.getBoundingClientRect(); (canvas as any)._mjrNaturalW = Math.max(1, Math.round(rect.width || canvas.width || 1)); (canvas as any)._mjrNaturalH = Math.max(1, Math.round(rect.height || canvas.height || 1)); } catch (e: any) { console.debug?.(e); } try { if (statusState) _drawModelMessage( statusCanvas, statusState.title, statusState.hintText, statusState.accent, ); } catch (e: any) { console.debug?.(e); } }; // -- Camera helpers ------------------------------------------------------ const updateOrthographicProjection = (width: any, height: any) => { if (!orthographicCamera || !(orthographicFrustumHeight > 0)) return; const aspect = Math.max(0.0001, (Number(width) || 1) / Math.max(1, Number(height) || 1)); const fw = orthographicFrustumHeight * aspect; orthographicCamera.left = -fw / 2; orthographicCamera.right = fw / 2; orthographicCamera.top = orthographicFrustumHeight / 2; orthographicCamera.bottom = -orthographicFrustumHeight / 2; orthographicCamera.updateProjectionMatrix(); }; const fitLoadedObject = () => { if (!modelGroup || !controls || !objectFrame) return; if (viewportMode === MODEL3D_VIEW_MODES.ORTHOGRAPHIC) { const rect = host.getBoundingClientRect(); orthographicFrustumHeight = _fitOrthographicCamera( orthographicCamera, controls, objectFrame, Math.max(0.0001, (rect.width || 1) / Math.max(1, rect.height || 1)), ) || orthographicFrustumHeight; activeCamera = orthographicCamera; } else { _fitPerspectiveCamera(threeLib, perspectiveCamera, controls, objectFrame); activeCamera = perspectiveCamera; } try { controls.object = activeCamera; controls.update(); } catch (e: any) { console.debug?.(e); } }; const setViewportMode = (nextMode: any, { refit = true }: Record = {}) => { viewportMode = nextMode === MODEL3D_VIEW_MODES.ORTHOGRAPHIC ? MODEL3D_VIEW_MODES.ORTHOGRAPHIC : MODEL3D_VIEW_MODES.PERSPECTIVE; activeCamera = viewportMode === MODEL3D_VIEW_MODES.ORTHOGRAPHIC ? orthographicCamera : perspectiveCamera; try { if (controls) controls.object = activeCamera; } catch (e: any) { console.debug?.(e); } if (refit) { fitLoadedObject(); } else { try { activeCamera?.updateProjectionMatrix?.(); } catch (e: any) { console.debug?.(e); } try { controls?.update?.(); } catch (e: any) { console.debug?.(e); } } syncViewportButtons(); scheduleOverlayRedraw(); }; // -- Light helpers -------------------------------------------------------- const applyLightIntensity = (val: any) => { lightIntensity = Math.max(0, Math.min(10, Number(val) || 0)); try { if (ambientLight) ambientLight.intensity = MODEL3D_LIGHT_SCALE.ambient * lightIntensity; } catch (e: any) { console.debug?.(e); } // lightObjects order: [main, back, fillRight, fillLeft, bottom] const scales = [ MODEL3D_LIGHT_SCALE.main, MODEL3D_LIGHT_SCALE.back, MODEL3D_LIGHT_SCALE.fill, MODEL3D_LIGHT_SCALE.fill, MODEL3D_LIGHT_SCALE.bottom, ]; lightObjects.forEach((light, i) => { try { if (light) light.intensity = (scales[i] ?? MODEL3D_LIGHT_SCALE.fill) * lightIntensity; } catch (e: any) { console.debug?.(e); } }); }; // -- Material mode helpers ------------------------------------------------ const applyMaterialMode = (mode: any) => { if (!loadedObject || !threeLib) return; _disposeTempMaterials(tempMaterials); _applyMaterialMode(threeLib, loadedObject, mode, originalMaterials, tempMaterials); scheduleOverlayRedraw(); }; // -- Up direction helpers ------------------------------------------------- const applyUpDirection = (dir: any) => { if (!modelGroup) return; const euler = (MODEL3D_UP_DIR_EULER as Record)[dir] || [0, 0, 0]; try { modelGroup.rotation.set(euler[0], euler[1], euler[2]); modelGroup.updateMatrixWorld(true); } catch (e: any) { console.debug?.(e); } if (threeLib) objectFrame = _computeObjectFrame(threeLib, modelGroup); fitLoadedObject(); }; // -- Skeleton helpers ----------------------------------------------------- const setSkeletonVisible = (visible: any) => { if (!skeletonHelper) return; try { skeletonHelper.visible = Boolean(visible); } catch (e: any) { console.debug?.(e); } }; // -- Animation helpers ---------------------------------------------------- const syncAnimBar = () => { if (!animationMixer || animationClips.length === 0) return; const action = animationActions[currentAnimIdx]; if (!action) return; const clip = animationClips[currentAnimIdx]; const duration = clip?.duration || 0; const current = action.time || 0; try { animDom.timeLbl.textContent = `${_formatAnimTime(current)} / ${_formatAnimTime(duration)}`; } catch (e: any) { console.debug?.(e); } if (!isSeeking && duration > 0) { try { const sliderMax = Number(animDom.progressSlider.max) || 1000; animDom.progressSlider.value = String(Math.round((current / duration) * sliderMax)); } catch (e: any) { console.debug?.(e); } } }; const playAnimation = (idx: any) => { if (!animationMixer || !animationClips.length) return; const clip = animationClips[idx]; if (!clip) return; // Stop all current actions animationActions.forEach((a: any) => { try { a?.stop(); } catch (e: any) { console.debug?.(e); } }); const action = animationMixer.clipAction(clip); action.timeScale = animSpeed; action.clampWhenFinished = false; action.loop = threeLib?.LoopRepeat ?? 2201; action.play(); animationActions[idx] = action; currentAnimIdx = idx; isAnimPlaying = true; animDom.playBtn.textContent = t("model3d.pause", "Pause"); // Scale progress slider steps to clip duration for consistent seek granularity // (~10ms steps, min 100 ticks, max 10000 ticks) try { const steps = Math.max(100, Math.min(10000, Math.round((clip.duration || 1) * 100))); animDom.progressSlider.max = String(steps); } catch (_: any) {} }; const togglePlayPause = () => { if (!animationMixer || !animationClips.length) return; if (isAnimPlaying) { animationMixer.timeScale = 0; isAnimPlaying = false; animDom.playBtn.textContent = t("model3d.play", "Play"); } else { animationMixer.timeScale = animSpeed; if (!animationActions[currentAnimIdx]?.isRunning?.()) { playAnimation(currentAnimIdx); } else { isAnimPlaying = true; animDom.playBtn.textContent = t("model3d.pause", "Pause"); } } }; const setupAnimations = (clips: any, object: any) => { if (!clips || clips.length === 0 || !threeLib) return; animationClips = clips; animationMixer = new threeLib.AnimationMixer(object); animationClock = new threeLib.Clock(); animationActions = new Array(clips.length).fill(null); // Populate animation selector animDom.animSel.innerHTML = ""; clips.forEach((clip: any, i: any) => { const opt = document.createElement("option"); opt.value = String(i); opt.textContent = clip.name || `Animation ${i + 1}`; animDom.animSel.appendChild(opt); }); animDom.animSel.style.display = clips.length > 1 ? "" : "none"; animDom.bar.style.display = "flex"; hint.style.bottom = `${MODEL3D_ANIM_BAR_HEIGHT_PX + 10}px`; // clear the animation bar // Play first animation playAnimation(0); // Bind animation bar events animDom.playBtn.addEventListener("click", (e: any) => { _stopEvent(e); togglePlayPause(); }); animDom.speedSel.addEventListener("change", () => { animSpeed = Number(animDom.speedSel.value) || 1.0; animationMixer.timeScale = isAnimPlaying ? animSpeed : 0; const action = animationActions[currentAnimIdx]; if (action) action.timeScale = animSpeed; }); animDom.animSel.addEventListener("change", () => { const idx = Number(animDom.animSel.value) || 0; playAnimation(idx); }); animDom.progressSlider.addEventListener("pointerdown", () => { isSeeking = true; }); animDom.progressSlider.addEventListener("pointerup", () => { isSeeking = false; const action = animationActions[currentAnimIdx]; const clip = animationClips[currentAnimIdx]; if (action && clip) { const sliderMax = Number(animDom.progressSlider.max) || 1000; const t = (Number(animDom.progressSlider.value) / sliderMax) * clip.duration; action.time = Math.max(0, Math.min(t, clip.duration)); } }); animDom.progressSlider.addEventListener("input", () => { const action = animationActions[currentAnimIdx]; const clip = animationClips[currentAnimIdx]; if (action && clip && isSeeking) { const sliderMax = Number(animDom.progressSlider.max) || 1000; const t = (Number(animDom.progressSlider.value) / sliderMax) * clip.duration; action.time = Math.max(0, Math.min(t, clip.duration)); animDom.timeLbl.textContent = `${_formatAnimTime(t)} / ${_formatAnimTime(clip.duration)}`; } }); }; // -- Viewport button sync ------------------------------------------------- const syncViewportButtons = () => { _setViewportButtonActive(gridBtn, Boolean(gridHelper?.visible)); _setViewportButtonActive(cameraModeBtn, viewportMode === MODEL3D_VIEW_MODES.ORTHOGRAPHIC); cameraModeBtn.textContent = viewportMode === MODEL3D_VIEW_MODES.ORTHOGRAPHIC ? t("model3d.ortho", "Ortho") : t("model3d.persp", "Persp"); _setViewportButtonActive(settingsBtn, settingsPanelVisible); }; // -- Settings panel wiring ------------------------------------------------ settingsDom.bgInput.addEventListener("input", () => { const col = settingsDom.bgInput.value; try { if (scene) scene.background = new (threeLib?.Color || Object)(col); } catch (e: any) { console.debug?.(e); } }); settingsDom.materialSel.addEventListener("change", () => { applyMaterialMode(settingsDom.materialSel.value); }); settingsDom.upSel.addEventListener("change", () => { applyUpDirection(settingsDom.upSel.value); }); if (settingsDom.skeletonToggle) { settingsDom.skeletonToggle.addEventListener("change", () => { setSkeletonVisible(settingsDom.skeletonToggle.checked); }); } settingsDom.fovSlider.addEventListener("input", () => { const fov = Math.max( 1, Math.min(179, Number(settingsDom.fovSlider.value) || MODEL3D_DEFAULT_FOV), ); try { if (perspectiveCamera) { perspectiveCamera.fov = fov; perspectiveCamera.updateProjectionMatrix(); } } catch (e: any) { console.debug?.(e); } }); settingsDom.lightSlider.addEventListener("input", () => { applyLightIntensity(Number(settingsDom.lightSlider.value)); }); // -- Event blocking (prevent bubbling to outer viewer/panzoom) ------------- // NOTE: panzoom.js already guards pointer/mouse events via isModel3DInteractionTarget() // in its capture-phase listeners (panzoom.js:460), so we only need to block wheel, // contextmenu, and drag events here. Pointer/mouse events must NOT be stopped on host // because OrbitControls registers pointermove/pointerup on document via the canvas. const installInteractionShell = () => { const registrations: any[] = []; const bind = (el: any, name: string, handler: any, opts?: any) => { el.addEventListener(name, handler, opts); registrations.push(() => el.removeEventListener(name, handler, opts)); }; // Focus canvas on pointer down (bubble, no stop - OrbitControls needs these) bind(host, "pointerdown", () => { try { canvas.focus?.(); } catch (e: any) { console.debug?.(e); } }); // Block wheel from reaching panzoom zoom bind(host, "wheel", (event: any) => _stopEvent(event)); // Block context menu and drag bind(host, "contextmenu", (event: any) => _stopEvent(event, { preventDefault: true })); bind(host, "dragstart", (event: any) => _stopEvent(event, { preventDefault: true })); bind(host, "dragover", (event: any) => _stopEvent(event, { preventDefault: true })); bind(host, "dragleave", (event: any) => _stopEvent(event)); bind(host, "drop", (event: any) => _stopEvent(event, { preventDefault: true })); return () => { for (const c of registrations) { try { c(); } catch (e: any) { console.debug?.(e); } } }; }; // -- Destroy -------------------------------------------------------------- const destroy = () => { destroyed = true; try { window.removeEventListener(EVENTS.RUNTIME_STATUS, onRuntimeStatus); } catch (_: any) {} try { (host as any)._mjr3D = null; } catch (_: any) {} try { if (rafId != null) cancelAnimationFrame(rafId); } catch (e: any) { console.debug?.(e); } rafId = null; try { interactionCleanup?.(); } catch (e: any) { console.debug?.(e); } interactionCleanup = null; try { resizeObserver?.disconnect?.(); } catch (e: any) { console.debug?.(e); } resizeObserver = null; try { controls?.dispose?.(); } catch (e: any) { console.debug?.(e); } controls = null; // Dispose animation mixer, actions, and clips try { animationMixer?.stopAllAction?.(); animationMixer?.uncacheRoot?.(animationMixer.getRoot?.()); } catch (e: any) { console.debug?.(e); } try { for (const action of animationActions) { try { animationMixer?.uncacheAction?.(action); } catch (_: any) {} } } catch (e: any) { console.debug?.(e); } try { for (const clip of animationClips) { try { clip?.dispose?.(); } catch (_: any) {} } } catch (e: any) { console.debug?.(e); } animationMixer = null; animationActions = []; animationClips = []; // Dispose temp materials _disposeTempMaterials(tempMaterials); // Dispose skeleton helper try { if (skeletonHelper) { scene?.remove?.(skeletonHelper); skeletonHelper.dispose?.(); } } catch (e: any) { console.debug?.(e); } skeletonHelper = null; // Traverse and dispose all geometries, materials, and textures in the main scene try { scene?.traverse?.((obj: any) => { try { obj.geometry?.dispose?.(); } catch (_: any) {} try { const materials = Array.isArray(obj.material) ? obj.material : obj.material ? [obj.material] : []; for (const mat of materials) { try { if (mat) { for (const key of Object.keys(mat)) { try { const val = mat[key]; if ( val && typeof val === "object" && typeof val.dispose === "function" && val.isTexture ) { val.dispose(); } } catch (_: any) {} } mat.dispose?.(); } } catch (_: any) {} } } catch (_: any) {} }); } catch (e: any) { console.debug?.(e); } // Dispose axis gizmo scene try { if ((host as any)._mjrAxisScene) { (host as any)._mjrAxisScene.traverse?.((obj: any) => { try { obj.geometry?.dispose?.(); } catch (_: any) {} try { obj.material?.dispose?.(); } catch (_: any) {} }); (host as any)._mjrAxisScene = null; } } catch (e: any) { console.debug?.(e); } try { renderer?.dispose?.(); } catch (e: any) { console.debug?.(e); } renderer = null; scene = null; activeCamera = null; perspectiveCamera = null; orthographicCamera = null; loadedObject = null; modelGroup = null; objectFrame = null; renderFrameFn = null; try { const gl = canvas.getContext("webgl2") || canvas.getContext("webgl"); if (gl) gl.getExtension("WEBGL_lose_context")?.loseContext?.(); } catch (e: any) { console.debug?.(e); } }; const pauseRendering = () => { runtimePaused = true; try { if (rafId != null) cancelAnimationFrame(rafId); } catch (e: any) { console.debug?.(e); } rafId = null; }; const resumeRendering = () => { runtimePaused = false; if (destroyed || rafId != null || typeof renderFrameFn !== "function") return; try { rafId = requestAnimationFrame(renderFrameFn); } catch (e: any) { console.debug?.(e); } }; const onRuntimeStatus = (event: any) => { if (!shouldPauseDuringExecution) return; const activePromptId = String(event?.detail?.active_prompt_id || "").trim(); if (activePromptId) { pauseRendering(); return; } resumeRendering(); }; const proc = { setParams: () => {}, destroy, captureCanvas: () => canvas, pause: pauseRendering, resume: resumeRendering, }; (canvas as any)._mjrProc = proc; try { if (shouldPauseDuringExecution) { window.addEventListener(EVENTS.RUNTIME_STATUS, onRuntimeStatus); if (String((window as any).__MJR_EXECUTION_RUNTIME__?.active_prompt_id || "").trim()) { runtimePaused = true; } } } catch (e: any) { console.debug?.(e); } setStatus("Preparing 3D preview", modelName); // -- Async init ------------------------------------------------------------ Promise.resolve() .then(async () => { const loaderType = resolveModel3DLoader(asset); if (!PREVIEWABLE_MODEL3D_LOADERS.has(loaderType as string)) { setStatus( "3D preview unavailable", `${(loaderType as string).toUpperCase()} is not supported in the embedded viewer.`, ); hint.style.display = "none"; // Show a download fallback so the user can still access the file if (url) { try { const dl = document.createElement("a"); dl.href = url; dl.download = String(asset?.filename || "model"); dl.textContent = t("model3d.downloadFile", "Download {file}", { file: String(asset?.filename || "file") }); dl.style.cssText = [ "position:absolute", "bottom:18px", "left:50%", "transform:translateX(-50%)", "padding:7px 16px", "border-radius:8px", "font:600 12px system-ui,sans-serif", "color:#fff", "background:rgba(76,175,80,0.85)", "text-decoration:none", "pointer-events:auto", "z-index:3", ].join(";"); host.appendChild(dl); } catch (_: any) {} } return; } try { const deps = await _loadThreeDeps(); if (destroyed) return; const THREE = deps.THREE; threeLib = THREE; // URL modifier for relative resources (e.g. GLTF textures) const manager = new THREE.LoadingManager(); manager.setURLModifier((requestedUrl: any) => { if (!requestedUrl || _isAbsoluteOrSpecialUrl(requestedUrl)) return requestedUrl; const rewritten = buildViewerResourceURL(asset, requestedUrl); if (rewritten) return rewritten; try { return new URL(requestedUrl, url).href; } catch { return requestedUrl; } }); // Renderer renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true, preserveDrawingBuffer: true, }); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.setPixelRatio(Math.min(2, window.devicePixelRatio || 1)); // Scene scene = new THREE.Scene(); scene.background = new THREE.Color(MODEL3D_VIEWER_DEFAULT_BG); // Cameras perspectiveCamera = new THREE.PerspectiveCamera( MODEL3D_DEFAULT_FOV, 16 / 9, 0.01, 10000, ); orthographicCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, -10000, 10000); activeCamera = perspectiveCamera; // Controls - attach to canvas (like ComfyUI's ControlsManager uses renderer.domElement) // so OrbitControls' internal pointermove/pointerup on ownerDocument are not blocked. controls = new deps.OrbitControls(activeCamera, canvas); controls.enableDamping = true; controls.dampingFactor = 0.08; controls.rotateSpeed = 0.82; controls.zoomSpeed = 1.0; controls.panSpeed = 0.9; controls.screenSpacePanning = true; controls.mouseButtons = buildModel3DMouseButtons(null, THREE.MOUSE); interactionCleanup = installInteractionShell(); // -- 6-light setup (ComfyUI-style) ------------------------------- ambientLight = new THREE.AmbientLight( 0xffffff, MODEL3D_LIGHT_SCALE.ambient * lightIntensity, ); scene.add(ambientLight); const mainLight = new THREE.DirectionalLight( 0xffffff, MODEL3D_LIGHT_SCALE.main * lightIntensity, ); mainLight.position.set(0, 10, 10); const backLight = new THREE.DirectionalLight( 0xffffff, MODEL3D_LIGHT_SCALE.back * lightIntensity, ); backLight.position.set(-10, 0, -10); const fillRight = new THREE.DirectionalLight( 0xe8f0ff, MODEL3D_LIGHT_SCALE.fill * lightIntensity, ); fillRight.position.set(10, 5, -5); const fillLeft = new THREE.DirectionalLight( 0xfff0e8, MODEL3D_LIGHT_SCALE.fill * lightIntensity, ); fillLeft.position.set(-10, 5, 5); const bottomLight = new THREE.DirectionalLight( 0xffffff, MODEL3D_LIGHT_SCALE.bottom * lightIntensity, ); bottomLight.position.set(0, -10, 0); lightObjects = [mainLight, backLight, fillRight, fillLeft, bottomLight]; lightObjects.forEach((l: any) => scene.add(l)); // Grid gridHelper = new THREE.GridHelper(20, 20, 0x4d5560, 0x2f3742); scene.add(gridHelper); // Resize handler const resize = () => { if (destroyed || !renderer || !activeCamera) return; const rect = host.getBoundingClientRect(); const w = Math.max(1, Math.round(rect.width || canvas.clientWidth || 1)); const h = Math.max(1, Math.round(rect.height || canvas.clientHeight || 1)); renderer.setSize(w, h, false); if (perspectiveCamera) { perspectiveCamera.aspect = w / h; perspectiveCamera.updateProjectionMatrix(); } updateOrthographicProjection(w, h); syncNaturalSize(); scheduleOverlayRedraw(); }; if (typeof ResizeObserver !== "undefined") { resizeObserver = new ResizeObserver(() => resize()); resizeObserver.observe(host); } // Load model const loader = _createLoaderInstance(deps, loaderType as string, manager); if (!loader) { setStatus( "3D loader unavailable", `${(loaderType as string).toUpperCase()} loader could not be created.`, ); hint.style.display = "none"; return; } // OBJ: try to load companion MTL first (like ComfyUI does) if (loaderType === "obj" && deps.MTLLoader) { try { const mtlUrl = url.replace(/\.obj(\?.*)?$/i, (m: any, q: any) => `.mtl${q || ""}`); const mtlLoader = new deps.MTLLoader(manager); const materials: any = await new Promise((res: any) => { mtlLoader.load(mtlUrl, res, undefined, () => res(null)); }); if (materials && !destroyed) { materials.preload(); loader.setMaterials(materials); } } catch (e: any) { console.debug?.("[MJR 3D] MTL load skipped:", e?.message); } } const loaded = await _loadModelContent(loader, loaderType as string, url); if (destroyed) return; const object = _buildRenderableObject(THREE, loaderType, loaded); if (!object) { setStatus("Empty 3D scene", "The loader returned no renderable object."); hint.style.display = "none"; return; } // Normalize model: scale to ~5 units and floor it (matches ComfyUI SceneModelManager) try { const normBox = new THREE.Box3().setFromObject(object); if (!normBox.isEmpty()) { const normSize = normBox.getSize(new THREE.Vector3()); const normCenter = normBox.getCenter(new THREE.Vector3()); const maxDim = Math.max(normSize.x, normSize.y, normSize.z, 0.001); const scale = 5 / maxDim; object.scale.multiplyScalar(scale); // Re-compute after scaling normBox.setFromObject(object); normBox.getCenter(normCenter); // Center X/Z, floor Y object.position.set(-normCenter.x, -normBox.min.y, -normCenter.z); } } catch (e: any) { console.debug?.("[MJR 3D] normalize skipped:", e); } // Wrap in a group so up-direction can rotate without affecting camera framing directly loadedObject = object; modelGroup = new THREE.Group(); modelGroup.add(object); scene.add(modelGroup); // Store original materials originalMaterials = _storeOriginalMaterials(object); // Skeleton hasSkeleton = _findHasSkeleton(object); if (hasSkeleton) { skeletonHelper = new THREE.SkeletonHelper(object); skeletonHelper.visible = false; scene.add(skeletonHelper); // Rebuild settings panel with skeleton toggle const newSettings = _createSettingsPanel({ defaultBgColor: MODEL3D_VIEWER_DEFAULT_BG, defaultFov: MODEL3D_DEFAULT_FOV, defaultLightIntensity: MODEL3D_DEFAULT_LIGHT_INTENSITY, hasSkeleton: true, }); host.replaceChild(newSettings.panel, settingsDom.panel); Object.assign(settingsDom, newSettings); // Re-wire events for new panel settingsDom.bgInput.addEventListener("input", () => { try { if (scene) scene.background = new THREE.Color(settingsDom.bgInput.value); } catch (e: any) { console.debug?.(e); } }); settingsDom.materialSel.addEventListener("change", () => { applyMaterialMode(settingsDom.materialSel.value); }); settingsDom.upSel.addEventListener("change", () => { applyUpDirection(settingsDom.upSel.value); }); if (settingsDom.skeletonToggle) { settingsDom.skeletonToggle.addEventListener("change", () => { setSkeletonVisible(settingsDom.skeletonToggle.checked); }); } settingsDom.fovSlider.addEventListener("input", () => { const fov = Math.max( 1, Math.min( 179, Number(settingsDom.fovSlider.value) || MODEL3D_DEFAULT_FOV, ), ); try { if (perspectiveCamera) { perspectiveCamera.fov = fov; perspectiveCamera.updateProjectionMatrix(); } } catch (e: any) { console.debug?.(e); } }); settingsDom.lightSlider.addEventListener("input", () => { applyLightIntensity(Number(settingsDom.lightSlider.value)); }); } // Fit model + place grid at its base objectFrame = _computeObjectFrame(THREE, modelGroup); if (objectFrame) { gridHelper.position.y = objectFrame.box.min.y; } viewportMode = MODEL3D_VIEW_MODES.PERSPECTIVE; fitLoadedObject(); resize(); clearStatus(); syncViewportButtons(); // Animations const clips = _getModelAnimations(loaded, loaderType); if (clips.length > 0) setupAnimations(clips, object); // -- Axis gizmo (bottom-left corner) ----------------------------- const axisScene = new THREE.Scene(); (host as any)._mjrAxisScene = axisScene; const axisCamera = new THREE.PerspectiveCamera(50, 1, 0.1, 100); axisCamera.position.set(0, 0, 3.2); axisCamera.lookAt(0, 0, 0); const AXIS_SIZE = 96; // px // Build axis lines + sphere tips const axisDefs = [ { dir: [1, 0, 0], color: 0xff3333 }, // X = red { dir: [0, 1, 0], color: 0x33ff33 }, // Y = green { dir: [0, 0, 1], color: 0x5588ff }, // Z = blue ]; const sphereGeo = new THREE.SphereGeometry(0.1, 12, 8); const centerGeo = new THREE.SphereGeometry(0.08, 10, 6); const centerMat = new THREE.MeshBasicMaterial({ color: 0xcccccc }); axisScene.add(new THREE.Mesh(centerGeo, centerMat)); for (const { dir, color } of axisDefs) { const mat = new THREE.LineBasicMaterial({ color }); const pts = [ new THREE.Vector3(0, 0, 0), new THREE.Vector3(dir[0], dir[1], dir[2]), ]; const lineGeo = new THREE.BufferGeometry().setFromPoints(pts); axisScene.add(new THREE.Line(lineGeo, mat)); const tipMat = new THREE.MeshBasicMaterial({ color }); const tip = new THREE.Mesh(sphereGeo, tipMat); tip.position.set(dir[0], dir[1], dir[2]); axisScene.add(tip); } // Expose controls/camera on host so compare-mode sync can find them (host as any)._mjr3D = { controls, get camera() { return activeCamera; }, }; try { options.onReady?.({ canvas, host, object: modelGroup, renderer, camera: activeCamera, controls, }); } catch (e: any) { console.debug?.(e); } scheduleOverlayRedraw(); // -- Render loop -------------------------------------------------- const renderFrame = () => { if (destroyed || runtimePaused || !renderer || !scene || !activeCamera) return; try { controls?.update?.(); if (animationMixer && animationClock) { const delta = animationClock.getDelta(); if (isAnimPlaying) animationMixer.update(delta); syncAnimBar(); } // Main scene renderer.setScissorTest(false); renderer.setViewport(0, 0, canvas.width, canvas.height); renderer.render(scene, activeCamera); // Axis gizmo - bottom-left corner const px = Math.min(2, window.devicePixelRatio || 1); const gizmoSize = Math.round(AXIS_SIZE * px); renderer.setScissorTest(true); renderer.setScissor(0, 0, gizmoSize, gizmoSize); renderer.setViewport(0, 0, gizmoSize, gizmoSize); renderer.setClearColor(0x000000, 0); renderer.clear(true, true, false); // Sync axis camera orientation with main camera const q = activeCamera.quaternion; axisCamera.position.set(0, 0, 3.2).applyQuaternion(q); axisCamera.quaternion.copy(q); renderer.render(axisScene, axisCamera); // Restore state renderer.setScissorTest(false); try { renderer.setClearColor(scene.background || 0x000000, 1); } catch (_: any) {} syncNaturalSize(); } catch (e: any) { console.debug?.(e); } if (!runtimePaused) { rafId = requestAnimationFrame(renderFrame); } }; renderFrameFn = renderFrame; // -- Viewport button events --------------------------------------- const stopClick = (e: any) => _stopEvent(e, { preventDefault: true }); resetViewBtn.addEventListener("click", (e: any) => { stopClick(e); fitLoadedObject(); syncViewportButtons(); }); gridBtn.addEventListener("click", (e: any) => { stopClick(e); if (gridHelper) gridHelper.visible = !gridHelper.visible; syncViewportButtons(); scheduleOverlayRedraw(); }); cameraModeBtn.addEventListener("click", (e: any) => { stopClick(e); setViewportMode( viewportMode === MODEL3D_VIEW_MODES.PERSPECTIVE ? MODEL3D_VIEW_MODES.ORTHOGRAPHIC : MODEL3D_VIEW_MODES.PERSPECTIVE, ); }); settingsBtn.addEventListener("click", (e: any) => { stopClick(e); settingsPanelVisible = !settingsPanelVisible; settingsDom.panel.style.display = settingsPanelVisible ? "block" : "none"; syncViewportButtons(); }); if (!runtimePaused) { renderFrame(); } } catch (error: any) { console.warn("[MJR 3D] preview init failed", error); setStatus( "Failed to load 3D preview", String(error?.message || "Three.js initialization failed."), ); hint.style.display = "none"; } }) .catch((err: any) => { if (!destroyed) { console.warn("[MJR 3D] preview init unhandled error", err); try { setStatus( "Failed to load 3D preview", String(err?.message || "Initialization failed."), ); } catch (_: any) {} try { hint.style.display = "none"; } catch (_: any) {} } }); return host; }