diff --git a/demo/index.html b/demo/index.html
index 56aaa20..5ee3531 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -171,6 +171,17 @@
             </div>
         </div>
 
+        <!-- 7. 多Tab加载 -->
+        <div class="control-group">
+            <h2>📺 多Tab加载 (Multi-Tab)</h2>
+            <div class="btn-container">
+                <button class="primary" onclick="window.open('./multi-tab.html', '_blank')">打开多Tab视图</button>
+            </div>
+            <div style="margin-top: 8px; font-size: 0.8rem; color: #888;">
+                两个独立面板，各自加载模型，可拖拽分割线调整宽度
+            </div>
+        </div>
+
         <!-- 5. 3D 引擎 -->
         <div class="control-group">
             <h2>🎮 3D 引擎 (Engine3D)</h2>
@@ -178,6 +189,7 @@
                 <button class="primary" onclick="initEngine3D()">初始化引擎</button>
                 <button class="primary" onclick="loadModel()">加载模型</button>
                 <button onclick="switchModel()">切换模型</button>
+                <button onclick="loadCombinedModel()">组合模型</button>
             </div>
             <div class="btn-container" style="margin-top: 8px;">
                 <button onclick="pauseRendering()">暂停渲染</button>
@@ -410,6 +422,38 @@
             }
         }
 
+        /**
+         * 加载组合模型 - 同时加载多个模型
+         */
+        function loadCombinedModel() {
+            if (!engine || !engine.engine) {
+                alert('引擎未创建，请先等待页面加载完成');
+                return;
+            }
+
+            if (!engine.engine.isInitialized()) {
+                alert('请先初始化 3D 引擎！');
+                return;
+            }
+
+            try {
+                const modelUrls = [
+                    'https://lyz-1259524260.cos.ap-guangzhou.myqcloud.com/iflow/models/417664a3-76c8-4d94-9344-1337246a5d4e/',
+                    'https://lyz-1259524260.cos.ap-guangzhou.myqcloud.com/iflow/models/e49a5fd1-3018-4938-9a52-6862b56a190b/'
+                ];
+
+                engine.engine.loadModel(modelUrls, {
+                    position: [0, 0, 0],
+                    rotation: [0, 0, 0],
+                    scale: [1, 1, 1]
+                });
+
+                console.log('✅ 组合模型加载请求已发送:', modelUrls);
+            } catch (error) {
+                console.error('❌ 组合模型加载错误:', error);
+            }
+        }
+
         /**
          * 暂停渲染
          */
diff --git a/demo/multi-tab.html b/demo/multi-tab.html
new file mode 100644
index 0000000..30d7063
--- /dev/null
+++ b/demo/multi-tab.html
@@ -0,0 +1,404 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>iFlow Engine - 多Tab加载</title>
+    <script src="./lib/iflow-engine.umd.js"></script>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: #1e1e1e;
+            color: #e0e0e0;
+        }
+
+        /* ===== 顶部控制栏 ===== */
+        .top-bar {
+            height: 48px;
+            background: #2d2d2d;
+            border-bottom: 1px solid #404040;
+            display: flex;
+            align-items: center;
+            padding: 0 16px;
+            gap: 16px;
+            flex-shrink: 0;
+        }
+
+        .top-bar .title {
+            font-size: 14px;
+            font-weight: 600;
+            color: #fff;
+            white-space: nowrap;
+        }
+
+        .top-bar .back-btn {
+            padding: 4px 12px;
+            font-size: 13px;
+            background: transparent;
+            color: #8ab4f8;
+            border: 1px solid #555;
+            border-radius: 4px;
+            cursor: pointer;
+            text-decoration: none;
+            transition: all 0.15s;
+        }
+
+        .top-bar .back-btn:hover {
+            background: #3a3a3a;
+            border-color: #8ab4f8;
+        }
+
+        .top-bar .separator {
+            width: 1px;
+            height: 24px;
+            background: #404040;
+        }
+
+        /* 模型 URL 输入区 */
+        .model-inputs {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex: 1;
+            min-width: 0;
+        }
+
+        .model-input-group {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            flex: 1;
+            min-width: 0;
+        }
+
+        .model-input-group label {
+            font-size: 12px;
+            color: #aaa;
+            white-space: nowrap;
+        }
+
+        .model-input-group input {
+            flex: 1;
+            min-width: 0;
+            height: 28px;
+            padding: 0 8px;
+            font-size: 12px;
+            background: #1e1e1e;
+            color: #e0e0e0;
+            border: 1px solid #555;
+            border-radius: 3px;
+            outline: none;
+            transition: border-color 0.15s;
+        }
+
+        .model-input-group input:focus {
+            border-color: #0078d4;
+        }
+
+        .load-btn {
+            height: 28px;
+            padding: 0 14px;
+            font-size: 12px;
+            font-weight: 500;
+            background: #0078d4;
+            color: #fff;
+            border: none;
+            border-radius: 3px;
+            cursor: pointer;
+            white-space: nowrap;
+            transition: background 0.15s;
+        }
+
+        .load-btn:hover {
+            background: #1a88e0;
+        }
+
+        .load-btn:active {
+            background: #006abc;
+        }
+
+        /* ===== 主内容区：双面板 ===== */
+        .panels-container {
+            display: flex;
+            height: calc(100vh - 48px);
+            position: relative;
+        }
+
+        .panel {
+            position: relative;
+            overflow: hidden;
+            background: #1a1a1a;
+        }
+
+        .panel-left {
+            flex: 1 1 0;
+            min-width: 200px;
+        }
+
+        .panel-right {
+            flex: 1 1 0;
+            min-width: 200px;
+        }
+
+        /* 引擎容器 */
+        .engine-container {
+            width: 100%;
+            height: 100%;
+        }
+
+        /* 面板标签 */
+        .panel-label {
+            position: absolute;
+            top: 8px;
+            left: 12px;
+            z-index: 10;
+            font-size: 12px;
+            font-weight: 600;
+            color: rgba(255, 255, 255, 0.7);
+            background: rgba(0, 0, 0, 0.5);
+            padding: 3px 10px;
+            border-radius: 3px;
+            pointer-events: none;
+            user-select: none;
+        }
+
+        /* ===== 拖拽分割线 ===== */
+        .divider {
+            width: 6px;
+            background: #333;
+            cursor: col-resize;
+            flex-shrink: 0;
+            position: relative;
+            z-index: 20;
+            transition: background 0.15s;
+        }
+
+        .divider:hover,
+        .divider.active {
+            background: #0078d4;
+        }
+
+        .divider::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 2px;
+            height: 32px;
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 1px;
+        }
+
+        .divider:hover::after,
+        .divider.active::after {
+            background: rgba(255, 255, 255, 0.6);
+        }
+
+        .panels-container.dragging {
+            cursor: col-resize;
+            user-select: none;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- 顶部控制栏 -->
+    <div class="top-bar">
+        <a class="back-btn" href="./index.html">← 返回 Demo</a>
+        <div class="separator"></div>
+        <span class="title">多Tab加载（双实例）</span>
+        <div class="separator"></div>
+
+        <div class="model-inputs">
+            <!-- 左面板 -->
+            <div class="model-input-group">
+                <label>左面板:</label>
+                <input type="text" id="url-left"
+                    value="https://lyz-1259524260.cos.ap-guangzhou.myqcloud.com/iflow/models/417664a3-76c8-4d94-9344-1337246a5d4e/"
+                    placeholder="模型 URL">
+                <button class="load-btn" onclick="loadLeft()">加载</button>
+            </div>
+
+            <!-- 右面板 -->
+            <div class="model-input-group">
+                <label>右面板:</label>
+                <input type="text" id="url-right"
+                    value="https://lyz-1259524260.cos.ap-guangzhou.myqcloud.com/iflow/models/e49a5fd1-3018-4938-9a52-6862b56a190b/"
+                    placeholder="模型 URL">
+                <button class="load-btn" onclick="loadRight()">加载</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 双面板区域 -->
+    <div class="panels-container" id="panels-container">
+        <div class="panel panel-left" id="panel-left">
+            <div class="panel-label">面板 A</div>
+            <div class="engine-container" id="engine-left"></div>
+        </div>
+
+        <div class="divider" id="divider"></div>
+
+        <div class="panel panel-right" id="panel-right">
+            <div class="panel-label">面板 B</div>
+            <div class="engine-container" id="engine-right"></div>
+        </div>
+    </div>
+
+    <script>
+        // ===== 元素引用 =====
+        const panelsContainer = document.getElementById('panels-container');
+        const panelLeft = document.getElementById('panel-left');
+        const panelRight = document.getElementById('panel-right');
+        const divider = document.getElementById('divider');
+        const urlLeft = document.getElementById('url-left');
+        const urlRight = document.getElementById('url-right');
+
+        // ===== 两个独立的 BimEngine 实例 =====
+        const BimEngine = window.IflowEngine.BimEngine;
+        let engineLeft = null;
+        let engineRight = null;
+
+        /**
+         * 初始化单个引擎实例
+         */
+        function createEngine(containerId) {
+            const engine = new BimEngine(containerId, { locale: 'zh-CN', theme: 'dark' });
+            const ok = engine.engine.initialize({
+                backgroundColor: 0x333333,
+                version: 'v2',
+                showStats: false,
+                showViewCube: true
+            });
+            if (!ok) {
+                console.error('[MultiTab] 引擎初始化失败:', containerId);
+                return null;
+            }
+            console.log('[MultiTab] 引擎初始化成功:', containerId);
+            return engine;
+        }
+
+        /**
+         * 加载模型到指定引擎
+         */
+        function loadModel(engine, url) {
+            if (!engine || !engine.engine) return;
+            const trimmed = url.trim();
+            if (!trimmed) return;
+
+            engine.engine.loadModel([trimmed], {
+                position: [0, 0, 0],
+                rotation: [0, 0, 0],
+                scale: [1, 1, 1]
+            });
+            console.log('[MultiTab] 加载模型:', trimmed);
+        }
+
+        function loadLeft() {
+            loadModel(engineLeft, urlLeft.value);
+        }
+
+        function loadRight() {
+            loadModel(engineRight, urlRight.value);
+        }
+
+        /**
+         * 通知引擎调整渲染器尺寸
+         */
+        function resizeEngine(engine) {
+            if (!engine || !engine.engine) return;
+            engine.engine.resize();
+        }
+
+        function resizeAll() {
+            //resizeEngine(engineLeft);
+            //resizeEngine(engineRight);
+        }
+
+        // ===== 分割线拖拽逻辑 =====
+        let isDragging = false;
+        let startX = 0;
+        let startLeftWidth = 0;
+
+        divider.addEventListener('mousedown', (e) => {
+            isDragging = true;
+            startX = e.clientX;
+            startLeftWidth = panelLeft.getBoundingClientRect().width;
+
+            panelsContainer.classList.add('dragging');
+            divider.classList.add('active');
+            e.preventDefault();
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (!isDragging) return;
+
+            const dx = e.clientX - startX;
+            const containerWidth = panelsContainer.getBoundingClientRect().width;
+            const dividerWidth = divider.getBoundingClientRect().width;
+            const available = containerWidth - dividerWidth;
+
+            let newLeftWidth = startLeftWidth + dx;
+            const minWidth = 200;
+            newLeftWidth = Math.max(minWidth, Math.min(newLeftWidth, available - minWidth));
+
+            const leftPercent = (newLeftWidth / available) * 100;
+            const rightPercent = 100 - leftPercent;
+
+            panelLeft.style.flex = `0 0 ${leftPercent}%`;
+            panelRight.style.flex = `0 0 ${rightPercent}%`;
+
+            // 拖拽时实时 resize 引擎
+            resizeAll();
+        });
+
+        document.addEventListener('mouseup', () => {
+            if (!isDragging) return;
+            isDragging = false;
+            panelsContainer.classList.remove('dragging');
+            divider.classList.remove('active');
+            resizeAll();
+        });
+
+        // 窗口 resize
+        window.addEventListener('resize', resizeAll);
+
+        // 回车键触发加载
+        urlLeft.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') loadLeft();
+        });
+        urlRight.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') loadRight();
+        });
+
+        // ===== 启动 =====
+        window.onload = () => {
+            try {
+                engineLeft = createEngine('engine-left');
+                engineRight = createEngine('engine-right');
+
+                // 自动加载默认模型
+                const leftUrl = urlLeft.value.trim();
+                const rightUrl = urlRight.value.trim();
+                if (leftUrl) loadLeft();
+                if (rightUrl) loadRight();
+            } catch (err) {
+                console.error('[MultiTab] 初始化失败:', err);
+            }
+        };
+    </script>
+</body>
+
+</html>
diff --git a/demo/vite.config.js b/demo/vite.config.js
index 26ae044..5062d27 100644
--- a/demo/vite.config.js
+++ b/demo/vite.config.js
@@ -16,7 +16,9 @@ export default defineConfig({
     outDir: 'dist',
     rollupOptions: {
       input: {
-        main: resolve(__dirname, 'index.html')
+        main: resolve(__dirname, 'index.html'),
+        viewer: resolve(__dirname, 'viewer.html'),
+        multiTab: resolve(__dirname, 'multi-tab.html')
       }
     }
   }
