Spaces:

leonsimon23
/

my-3d-viewer

Running

App Files Files Community

leonsimon23 commited on Jul 7, 2025

Commit

9d608a0

verified ·

1 Parent(s): edde16b

Update main.js

Browse files

Files changed (1) hide show

main.js +342 -453

main.js CHANGED Viewed

@@ -1,489 +1,378 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>中药饮片AI三维鉴别实训系统</title>
-    <style>
-        /* 基础样式 */
-        :root {
-            --primary-color: #4a90e2;
-            --light-bg: #f0f2f5;
-            --panel-bg: #ffffff;
-            --text-color: #333333;
-            --border-color: #e9ecef;
-        }
-        * {
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            margin: 0;
-            background-color: var(--light-bg);
-            height: 100vh;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-        }
-        /* 顶部栏 */
-        .top-bar {
-            background-color: var(--primary-color);
-            color: white;
-            padding: 12px 20px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            z-index: 100;
-            flex-shrink: 0;
-        }
-        .top-bar h1 {
-            margin: 0;
-            font-size: 1.4em;
-            font-weight: 600;
-        }
-        .mode-switcher button {
-            background-color: transparent;
-            border: 1px solid white;
-            color: white;
-            padding: 8px 16px;
-            margin-left: 10px;
-            border-radius: 5px;
-            cursor: pointer;
-            transition: all 0.3s;
-            font-size: 14px;
-        }
-        .mode-switcher button.active, .mode-switcher button:hover {
-            background-color: white;
-            color: var(--primary-color);
-        }
-        /* 主内容区 */
-        .main-content {
-            display: flex;
-            flex: 1;
-            overflow: hidden;
-            min-height: 0;
-        }
-        /* 侧边栏 */
-        #sidebar {
-            width: 220px;
-            background-color: var(--panel-bg);
-            padding: 16px;
-            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
-            overflow-y: auto;
-            flex-shrink: 0;
-        }
-        #sidebar h2 {
-            margin: 0 0 16px 0;
-            font-size: 1.1em;
-            color: var(--text-color);
-        }
-        #herb-list {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-        #herb-list li {
-            padding: 10px 12px;
-            cursor: pointer;
-            border-radius: 6px;
-            margin-bottom: 6px;
-            transition: all 0.2s;
-            font-size: 14px;
-        }
-        #herb-list li:hover {
-            background-color: #eaf2fb;
-        }
-        #herb-list li.active {
-            background-color: var(--primary-color);
-            color: white;
-            font-weight: 500;
-        }
-        /* 3D 视窗容器 */
-        #viewer-container {
-            flex: 1;
-            position: relative;
-            min-width: 0;
         }
-        #c {
-            display: block;
-            width: 100%;
-            height: 100%;
-        }
-        /* 右侧信息面板 - 重新设计 */
-        #info-panel {
-            width: 350px;
-            background-color: var(--panel-bg);
-            box-shadow: -2px 0 5px rgba(0,0,0,0.1);
-            flex-shrink: 0;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-        #learn-panel {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
         }
-        /* 图片区域 - 固定高度 */
-        .herb-image-section {
-            flex-shrink: 0;
-            padding: 20px 20px 0 20px;
-            background-color: #fafbfc;
-            border-bottom: 1px solid var(--border-color);
-        }
-        .herb-image-container {
-            width: 100%;
-            height: 200px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background-color: white;
-            border-radius: 8px;
-            border: 1px solid var(--border-color);
-            overflow: hidden;
-            margin-bottom: 15px;
-        }
-        #herb-image {
-            max-width: 100%;
-            max-height: 100%;
-            width: auto;
-            height: auto;
-            object-fit: contain;
-            border-radius: 6px;
-        }
-        /* 信息内容区域 - 可滚动 */
-        .info-content {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px;
-        }
-        .info-section h3 {
-            margin: 0 0 20px 0;
-            font-size: 1.3em;
-            color: var(--primary-color);
-            border-bottom: 2px solid var(--primary-color);
-            padding-bottom: 10px;
-            font-weight: 600;
-        }
-        .info-item {
-            margin-bottom: 18px;
-        }
-        .info-item h4 {
-            margin: 0 0 8px 0;
-            font-size: 14px;
-            color: #555;
-            font-weight: 600;
-        }
-        .info-item p {
-            margin: 0;
-            line-height: 1.6;
-            font-size: 13px;
-            color: #666;
         }
-        /* 加载覆盖层 */
-        #loading-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.7);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            z-index: 20;
-            transition: opacity 0.5s;
-            pointer-events: none;
-            opacity: 0;
-        }
-        #loading-overlay.visible {
-            opacity: 1;
-            pointer-events: auto;
-        }
-        .loading-box {
-            text-align: center;
-            color: white;
-            background-color: rgba(40, 40, 40, 0.9);
-            padding: 30px 40px;
-            border-radius: 10px;
-        }
-        .loading-title {
-            font-size: 1.2em;
-            margin-bottom: 15px;
-        }
-        .progress-bar-container {
-            width: 250px;
-            height: 8px;
-            background-color: #555;
-            border-radius: 4px;
-            overflow: hidden;
-            margin: 0 auto;
-        }
-        #progress-bar {
-            width: 0%;
-            height: 100%;
-            background-color: var(--primary-color);
-            border-radius: 4px;
-            transition: width 0.2s ease-in-out;
-        }
-        #progress-text {
-            margin-top: 15px;
-            font-size: 1em;
-            font-family: monospace;
-        }
-        /* 缩放控制按钮 */
-        .zoom-controls {
-            position: absolute;
-            bottom: 20px;
-            right: 20px;
-            z-index: 10;
-            display: flex;
-            flex-direction: column;
-        }
-        .zoom-controls button {
-            width: 40px;
-            height: 40px;
-            font-size: 18px;
-            font-weight: bold;
-            border: none;
-            border-radius: 50%;
-            background-color: rgba(0, 0, 0, 0.6);
-            color: white;
-            cursor: pointer;
-            margin-top: 8px;
-            transition: all 0.3s;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .zoom-controls button:hover {
-            background-color: rgba(0, 0, 0, 0.8);
-            transform: scale(1.1);
         }
-        /* 特征点弹窗 */
-        #feature-popup {
-            position: absolute;
-            top: 20px;
-            left: 20px;
-            background: rgba(0,0,0,0.85);
-            color: white;
-            padding: 20px;
-            border-radius: 8px;
-            max-width: 300px;
-            z-index: 100;
-            border: 1px solid rgba(255,255,255,0.2);
-            font-size: 14px;
-            line-height: 1.5;
-            transition: all 0.3s;
-            transform: scale(0.95);
-        }
-        #feature-popup.hidden {
-            opacity: 0;
-            pointer-events: none;
-            transform: scale(0.9);
-        }
-        #feature-popup-content strong {
-            color: #ffcc00;
-            display: block;
-            margin-bottom: 8px;
-        }
-        #feature-popup-close {
-            display: block;
-            width: 100%;
-            margin-top: 15px;
-            padding: 8px 12px;
-            cursor: pointer;
-            border: none;
-            background: #555;
-            color: white;
-            border-radius: 5px;
-            transition: background-color 0.3s;
-        }
-        #feature-popup-close:hover {
-            background: #666;
         }
-       #feature-popup-close:hover {
-            background: #666;
         }
-        /* 响应式设计 */
-        @media (max-width: 1400px) {
-            #info-panel {
-                width: 320px;
-            }
-            .herb-image-container {
-                height: 180px;
-            }
-        }
-        @media (max-width: 1200px) {
-            #sidebar {
-                width: 200px;
-            }
-            #info-panel {
-                width: 300px;
-            }
-            .herb-image-container {
-                height: 160px;
-            }
-        }
-        @media (max-width: 768px) {
-            #sidebar {
-                width: 180px;
-            }
-            #info-panel {
-                width: 280px;
-            }
-            .herb-image-container {
-                height: 140px;
-            }
-        }
-        /* 自定义滚动条样式 */
-        ::-webkit-scrollbar {
-            width: 6px;
-        }
-        ::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 3px;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #ccc;
-            border-radius: 3px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #999;
-        }
-    </style>
-</head>
-<body>
-    <div class="top-bar">
-        <h1>中药饮片AI三维鉴别实训系统</h1>
-        <div class="mode-switcher">
-            <button id="btn-learn-mode" class="active">三维沉浸式学习</button>
-            <button id="btn-qa-mode">AI导师教学</button>
-            <button id="btn-exam-mode">AI主考测验</button>
-        </div>
-    </div>
-    <div class="main-content">
-        <div id="sidebar">
-            <h2>饮片目录</h2>
-            <ul id="herb-list"></ul>
-        </div>
-        <div id="viewer-container">
-            <canvas id="c"></canvas>
-            <div id="loading-overlay">
-                <div class="loading-box">
-                    <div class="loading-title">正在加载模型...</div>
-                    <div class="progress-bar-container">
-                        <div id="progress-bar"></div>
-                    </div>
-                    <div id="progress-text">0%</div>
-                </div>
-            </div>
-            <div class="zoom-controls">
-                <button id="zoom-in-btn">+</button>
-                <button id="zoom-out-btn">-</button>
-            </div>
-            <div id="feature-popup" class="hidden">
-                <div id="feature-popup-content"></div>
-                <button id="feature-popup-close">关闭</button>
-            </div>
-        </div>
-        <div id="info-panel">
-            <div id="learn-panel">
-                <div class="herb-image-section">
-                    <div class="herb-image-container">
-                        <img id="herb-image" src="" alt="中药饮片图片">
-                    </div>
-                </div>
-                <div class="info-content">
-                    <div class="info-section">
-                        <h3 id="herb-name"></h3>
-                        <div class="info-item">
-                            <h4>【来源】</h4>
-                            <p id="herb-source"></p>
-                        </div>
-                        <div class="info-item">
-                            <h4>【性味归经】</h4>
-                            <p id="herb-taste"></p>
-                        </div>
-                        <div class="info-item">
-                            <h4>【功效】</h4>
-                            <p id="herb-effect"></p>
-                        </div>
-                        <div class="info-item">
-                            <h4>【性状鉴别要点】</h4>
-                            <p id="herb-identification"></p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script type="importmap">
-    {
-        "imports": {
-            "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
-            "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
-        }
     }
-    </script>
-    <script type="module" src="main.js"></script>
-</body>
-</html>

+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
+import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
+class HerbalApp {
+    constructor(canvas) {
+        // --- 1. 核心属性 ---
+        this.canvas = canvas;
+        this.renderer = null;
+        this.scene = null;
+        this.camera = null;
+        this.controls = null;
+        this.raycaster = new THREE.Raycaster();
+        this.pointer = new THREE.Vector2();
+        // --- 2. 状态管理 ---
+        this.isInteractive = true;
+        this.isLoadingModel = false;
+        this.isPopupVisible = false;
+        this.currentModel = null;
+        this.featurePointObjects = [];
+        this.currentIntersected = null;
+        this.pointerMoveThrottle = 50;
+        this.lastPointerMoveTime = 0;
+        this.featurePointGeometry = new THREE.SphereGeometry(0.3, 16, 16);
+        this.featurePointMaterialTemplate = new THREE.MeshStandardMaterial({
+            color: 0xffcc00,
+            emissive: 0x000000,
+            metalness: 0.2,
+            roughness: 0.8,
+        });
+        // --- 3. DOM 元素 ---
+        this.dom = {
+            loadingOverlay: document.getElementById('loading-overlay'),
+            progressBar: document.getElementById('progress-bar'),
+            progressText: document.getElementById('progress-text'),
+            herbImage: document.getElementById('herb-image'),
+            herbName: document.getElementById('herb-name'),
+            herbSource: document.getElementById('herb-source'),
+            herbTaste: document.getElementById('herb-taste'),
+            herbEffect: document.getElementById('herb-effect'),
+            herbIdentification: document.getElementById('herb-identification'),
+            featurePopup: document.getElementById('feature-popup'),
+            featurePopupContent: document.getElementById('feature-popup-content'),
+            featurePopupCloseBtn: document.getElementById('feature-popup-close'),
+            herbList: document.getElementById('herb-list'),
+            zoomInBtn: document.getElementById('zoom-in-btn'),
+            zoomOutBtn: document.getElementById('zoom-out-btn')
+        };
+        // --- 4. 数据中心 ---
+        this.herbsData = [
+             {
+                id: 'biejia', name: '鳖甲', path: './assets/biejia/', objFile: 'biejia.obj', mtlFile: 'biejia.mtl',
+                image: './assets/biejia/biejia-photo.jpg',
+                details: { source: '鳖科动物鳖的背甲。', taste: '咸，寒。归肝、肾经。', effect: '滋阴潜阳，软坚散结，退热除蒸。', identification: '呈椭圆形或卵圆形，背面隆起，具不显明的三条棱线。外表面黑褐色或墨绿色，有细网状皱纹和"十三块"甲片对称的"人"字形及"介"字形纹理。内表面乳白色，中间有突起的脊椎骨。质坚硬。'},
+                featurePoints: [
+                    { position: new THREE.Vector3(0, 4.5, 1.5), description: '<strong>颈盾:</strong> 位于最前端中央，是鳖甲十三个主要甲片之一。' },
+                    { position: new THREE.Vector3(1.5, 3.5, -1.5), description: '<strong>肋盾:</strong> 左右对称，构成背甲的主要部分，可见清晰的生长纹。' },
+                    { position: new THREE.Vector3(0, 0.5, -4.5), description: '<strong>臀盾:</strong> 位于背甲后端，形状较小，保护尾部区域。' }
+                ]
+            },
+            {
+                id: 'wanglingzhi', name: '醋五灵脂', path: './assets/wanglingzhi/', objFile: 'wanglingzhi.obj', mtlFile: 'wanglingzhi.mtl',
+                image: './assets/wanglingzhi/wanglingzhi-photo.jpg',
+                details: { source: '鼯鼠科动物复齿鼯鼠的干燥粪便，经醋炮制而成。', taste: '甘、温。归肝经。', effect: '活血止痛，化瘀止血。', identification: '呈不规则的块状，大小不一。表面黑褐色、红棕色或灰褐色，凹凸不平，有的具光泽。质硬，断面不平坦，可见长椭圆形或纤维状的植物残渣。具醋香气，味微苦。'},
+                featurePoints: [
+                    { position: new THREE.Vector3(1, 2, 1), description: '<strong>光泽表面:</strong> 部分区域因醋制而呈现特有的光泽感，是鉴别要点之一。' },
+                    { position: new THREE.Vector3(-2, -1, 0), description: '<strong>不规则断面:</strong> 质地坚硬，断面凹凸不平，可见内部结构。' }
+                ]
+            },
+            {
+                id: 'jiangcan', name: '僵蚕', path: './assets/jiangcan/', objFile: 'jiangchan-xiao.obj', mtlFile: 'jiangchan-xiao.mtl',
+                image: './assets/jiangcan/jiangchan-photo.jpg',
+                details: { source: '蚕蛾科昆虫家蚕4～5龄的幼虫，在未吐丝前，因感染白僵菌而僵死的干燥体。', taste: '辛、咸，平。归肝、肺、胃经。', effect: '息风止痉，祛风止痛，化痰散结。', identification: '多呈圆柱形，略弯曲，长2～5cm。表面灰白色，被有白色粉霜状的气生菌丝和分生孢子。头部较圆，足8对，体节明显。质硬而脆，易折断，断面平坦，外层白色，中间有棕色或亮棕色的丝腺环。气微腥，味微咸。'},
+                featurePoints: [
+                    { position: new THREE.Vector3(0, 0, 2.5), description: '<strong>头部:</strong> 较圆，色泽与体部略有不同，是区分头尾的关键。' },
+                    { position: new THREE.Vector3(0, 0, 0), description: '<strong>体节:</strong> 环节明显，是蚕体结构的重要特征。' },
+                    { position: new THREE.Vector3(0.5, -0.5, -1), description: '<strong>胸足与腹足:</strong> 共8对，排列于身体腹侧，略突出。' }
+                ]
+            }
+        ];
+    }
+    init() {
+        this._setupScene();
+        this._setupLights();
+        this._setupCameraAndControls();
+        this._setupEventListeners();
+        this._createHerbListUI();
+        this.animate();
+        if (this.herbsData.length > 0) {
+            this.switchHerb(this.herbsData[0].id);
         }
+    }
+    async switchHerb(herbId) {
+        if (this.isLoadingModel) return;
+        const herbData = this.herbsData.find(h => h.id === herbId);
+        if (!herbData) return;
+        this._updateInfoPanel(herbData);
+        this._updateActiveHerbInList(herbId);
+        this.isLoadingModel = true;
+        if (this.isPopupVisible) this.closePopup();
+        this._updateInteractionState();
+        this._showLoadingOverlay();
+        try {
+            const object = await this._loadModelWithProgress(herbData);
+            this._cleanupScene();
+            this._processLoadedModel(object, herbData);
+        } catch (error) {
+            console.error(`加载药材 ${herbData.name} 失败:`, error);
+            this._cleanupScene();
+        } finally {
+            this.isLoadingModel = false;
+            this._updateInteractionState();
+            this._hideLoadingOverlay();
         }
+    }
+    _loadModelWithProgress(herb) {
+        return new Promise((resolve, reject) => {
+            const mtlLoader = new MTLLoader();
+            mtlLoader.setResourcePath(herb.path);
+            mtlLoader.load(herb.path + herb.mtlFile, (materials) => {
+                materials.preload();
+                const objLoader = new OBJLoader();
+                objLoader.setMaterials(materials);
+                objLoader.load(herb.path + herb.objFile, resolve, (xhr) => {
+                    if (xhr.lengthComputable) {
+                        const percent = 30 + (xhr.loaded / xhr.total) * 70;
+                        this._updateLoadingProgress(Math.round(percent));
+                    }
+                }, reject);
+            }, (xhr) => {
+                if (xhr.lengthComputable) {
+                    const percent = (xhr.loaded / xhr.total) * 30;
+                    this._updateLoadingProgress(Math.round(percent));
+                }
+            }, reject);
+        });
+    }
+    _cleanupScene() {
+        if (this.currentModel) {
+            this.scene.remove(this.currentModel);
+            this.currentModel.traverse((child) => {
+                if (child.isMesh) {
+                    child.geometry?.dispose();
+                    if (Array.isArray(child.material)) {
+                        child.material.forEach(material => material.dispose());
+                    } else if (child.material) {
+                        child.material.dispose();
+                    }
+                }
+            });
+            this.currentModel = null;
+        }
+        this.featurePointObjects.forEach(fp => {
+            fp.geometry?.dispose();
+            fp.material?.dispose();
+            this.scene.remove(fp);
+        });
+        this.featurePointObjects = [];
+    }
+    _updateInteractionState() {
+        const shouldBeInteractive = !this.isLoadingModel && !this.isPopupVisible;
+        if (this.isInteractive === shouldBeInteractive) return;
+        this.isInteractive = shouldBeInteractive;
+        this.controls.enabled = this.isInteractive;
+        if (!this.isInteractive) this._clearHoverState();
+    }
+    _setupScene() {
+        this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvas, powerPreference: 'high-performance' });
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0x333344);
+    }
+    _setupLights() {
+        this.scene.add(new THREE.AmbientLight(0xffffff, 0.8));
+        const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
+        dirLight.position.set(10, 15, 10);
+        this.scene.add(dirLight);
+    }
+    _setupCameraAndControls() {
+        this.camera = new THREE.PerspectiveCamera(50, this.canvas.clientWidth / this.canvas.clientHeight, 0.1, 1000);
+        this.camera.position.set(0, 10, 30);
+        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        this.controls.enableDamping = true;
+        this.controls.dampingFactor = 0.05;
+        this.controls.target.set(0, 5, 0);
+    }
+    _setupEventListeners() {
+        this.renderer.domElement.addEventListener('pointermove', this._onPointerMove.bind(this));
+        this.renderer.domElement.addEventListener('click', this._onPointerClick.bind(this));
+        this.dom.featurePopupCloseBtn.addEventListener('click', () => this.closePopup());
+        this.dom.featurePopup.addEventListener('click', (event) => { if (event.target === this.dom.featurePopup) this.closePopup(); });
+        document.addEventListener('keydown', (event) => { if (event.key === 'Escape' && this.isPopupVisible) this.closePopup(); });
+        this.dom.zoomInBtn.addEventListener('click', () => this._zoom(0.8));
+        this.dom.zoomOutBtn.addEventListener('click', () => this._zoom(1.2));
+    }
+    _onPointerMove(event) {
+        if (!this.isInteractive) return;
+        const now = performance.now();
+        if (now - this.lastPointerMoveTime < this.pointerMoveThrottle) return;
+        this.lastPointerMoveTime = now;
+        const viewerRect = this.renderer.domElement.getBoundingClientRect();
+        this.pointer.x = ((event.clientX - viewerRect.left) / viewerRect.width) * 2 - 1;
+        this.pointer.y = -((event.clientY - viewerRect.top) / viewerRect.height) * 2 + 1;
+        this._updateHoverInteraction();
+    }
+    _onPointerClick() {
+        if (this.isInteractive && this.currentIntersected) {
+            this.showFeaturePointInfo(this.currentIntersected.userData.description);
         }
+    }
+    showFeaturePointInfo(description) {
+        this.dom.featurePopupContent.innerHTML = description;
+        this.dom.featurePopup.classList.remove('hidden');
+        this.isPopupVisible = true;
+        this._updateInteractionState();
+    }
+    closePopup() {
+        if (!this.isPopupVisible) return;
+        this.dom.featurePopup.classList.add('hidden');
+        this.isPopupVisible = false;
+        this._updateInteractionState();
+    }
+    animate() {
+        requestAnimationFrame(this.animate.bind(this));
+        this._resizeRendererToDisplaySize();
+        this.controls.update();
+        this.renderer.render(this.scene, this.camera);
+    }
+    _updateHoverInteraction() {
+        this.raycaster.setFromCamera(this.pointer, this.camera);
+        const intersects = this.raycaster.intersectObjects(this.featurePointObjects);
+        if (intersects.length > 0) {
+            const intersectedObject = intersects[0].object;
+            if (this.currentIntersected !== intersectedObject) {
+                this._clearHoverState();
+                this.currentIntersected = intersectedObject;
+                this.currentIntersected.material.emissive.setHex(0xffff00);
+            }
+            this.renderer.domElement.style.cursor = 'pointer';
+        } else {
+            this._clearHoverState();
         }
+    }
+    _clearHoverState() {
+        if (this.currentIntersected) {
+            this.currentIntersected.material.emissive.setHex(0x000000);
+            this.currentIntersected = null;
         }
+        this.renderer.domElement.style.cursor = 'auto';
+    }
+    _createFeaturePoints(featurePoints, scale) {
+        if (!featurePoints || featurePoints.length === 0) return;
+        featurePoints.forEach((pointData, index) => {
+            const material = this.featurePointMaterialTemplate.clone();
+            const sphere = new THREE.Mesh(this.featurePointGeometry, material);
+            sphere.position.copy(pointData.position).multiplyScalar(scale);
+            sphere.userData = { description: pointData.description, isFeaturePoint: true, index };
+            this.scene.add(sphere);
+            this.featurePointObjects.push(sphere);
+        });
+    }
+    _processLoadedModel(object, herb) {
+        this._clearHoverState();
+        const box = new THREE.Box3().setFromObject(object);
+        const center = box.getCenter(new THREE.Vector3());
+        const size = box.getSize(new THREE.Vector3());
+        object.position.sub(center);
+        const maxDim = Math.max(size.x, size.y, size.z);
+        const scale = maxDim > 0 ? 15 / maxDim : 1;
+        object.scale.set(scale, scale, scale);
+        this.scene.add(object);
+        this.currentModel = object;
+        this._createFeaturePoints(herb.featurePoints, scale);
+        this._resetCameraPosition();
+    }
+    _createHerbListUI() {
+        this.herbsData.forEach(herb => {
+            const li = document.createElement('li');
+            li.textContent = herb.name;
+            li.dataset.id = herb.id;
+            li.addEventListener('click', () => this.switchHerb(herb.id));
+            this.dom.herbList.appendChild(li);
+        });
+    }
+    _resizeRendererToDisplaySize() {
+        const canvas = this.renderer.domElement;
+        const viewerRect = canvas.getBoundingClientRect();
+        const width = Math.round(viewerRect.width);
+        const height = Math.round(viewerRect.height);
+        if (canvas.width !== width || canvas.height !== height) {
+            this.renderer.setSize(width, height, false);
+            this.camera.aspect = width / height;
+            this.camera.updateProjectionMatrix();
         }
+    }
+    _resetCameraPosition() {
+        this.camera.position.set(0, 10, 30);
+        this.controls.target.set(0, 5, 0);
+        this.controls.update();
+    }
+    _updateInfoPanel(herb) {
+        this.dom.herbImage.src = herb.image || '';
+        this.dom.herbImage.alt = herb.name;
+        this.dom.herbName.textContent = herb.name;
+        this.dom.herbSource.textContent = herb.details.source || '暂无';
+        this.dom.herbTaste.textContent = herb.details.taste || '暂无';
+        this.dom.herbEffect.textContent = herb.details.effect || '暂无';
+        this.dom.herbIdentification.textContent = herb.details.identification || '暂无';
+    }
+    _updateActiveHerbInList(herbId) {
+        this.dom.herbList.querySelector('li.active')?.classList.remove('active');
+        this.dom.herbList.querySelector(`li[data-id='${herbId}']`)?.classList.add('active');
+    }
+    _zoom(factor) {
+        this.camera.position.sub(this.controls.target).multiplyScalar(factor).add(this.controls.target);
+    }
+    _showLoadingOverlay() {
+        this.dom.loadingOverlay.classList.add('visible');
+        this._updateLoadingProgress(0);
+    }
+    _hideLoadingOverlay() {
+        this.dom.loadingOverlay.classList.remove('visible');
+    }
+    _updateLoadingProgress(percent) {
+        this.dom.progressBar.style.width = percent + '%';
+        this.dom.progressText.textContent = percent + '%';
+    }
+}
+// --- 启动应用 (已修改) ---
+// 等待整个HTML文档加载并解析完毕后，再执行初始化代码
+document.addEventListener('DOMContentLoaded', () => {
+    const canvas = document.querySelector('#c');
+    // 添加一个安全检查，确保canvas元素存在
+    if (canvas) {
+        const app = new HerbalApp(canvas);
+        app.init();
+    } else {
+        console.error('错误：在HTML中没有找到ID为 "c" 的canvas元素。应用无法启动。');
     }
+});