init5

app/composables/powerStation/modes/useSimplifiedMode.ts

@@ -0,0 +1,219 @@
+/**
+ * 简化模式 - 模型加载
+ * 按文件名直接加载模型，支持按需加载和自动回退
+ */
+import { ElMessage } from 'element-plus'
+import type * as THREE from 'three'
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { markRaw } from 'vue'
+import type { ModelModeContext } from '../types'
+
+// ============================================================
+// 配置常量
+// ============================================================
+
+/** DRACO解码器路径 */
+const DRACO_DECODER_PATH = 'https://www.gstatic.com/draco/v1/decoders/'
+
+/** 简化模式配置 */
+const SIMPLIFIED_MODE_CONFIG = {
+  /** 层级显示的最大深度 */
+  maxHierarchyDepth: 2,
+  /** 模型文件扩展名 */
+  fileExtension: '.glb',
+} as const
+
+// ============================================================
+// 主钩子函数
+// ============================================================
+
+/**
+ * 简化模式组合式函数
+ * @param context - 模型模式上下文
+ */
+export function useSimplifiedMode(context: ModelModeContext) {
+  const {
+    store,
+    isLoading,
+    archetypeModel,
+    modelGroup,
+    objectMap,
+    modelCache,
+    replaceWithPBRMaterial,
+    generateHierarchy,
+    initEnvironment,
+    applyLightingMode,
+    fitView,
+    rebuildObjectMap,
+    generateBreadcrumbs,
+  } = context
+
+  // ============================================================
+  // 模型设置
+  // ============================================================
+
+  /**
+   * 从缓存设置模型
+   * @param model - 缓存的模型
+   * @param fileName - 文件名
+   */
+  const setupModelFromCache = (model: THREE.Object3D, fileName: string) => {
+    const clonedModel = model.clone()
+    const nameWithoutExt = fileName.replace(SIMPLIFIED_MODE_CONFIG.fileExtension, '')
+
+    // 设置模型名称
+    clonedModel.name = nameWithoutExt
+
+    // 更新原型模型
+    archetypeModel.value = markRaw(clonedModel.clone())
+
+    // 清空并添加到模型组
+    modelGroup.clear()
+    modelGroup.add(clonedModel)
+
+    // 生成层级结构（只显示指定深度的节点）
+    let hierarchy = []
+    if (clonedModel.children.length > 0) {
+      // 如果模型有子节点，将每个子节点作为一级节点
+      clonedModel.children.forEach((child, index) => {
+        const childPath = index === 0 ? nameWithoutExt : `${nameWithoutExt}~child${index}`
+        const childHierarchy = generateHierarchy(
+          child,
+          childPath,
+          1,
+          SIMPLIFIED_MODE_CONFIG.maxHierarchyDepth
+        )
+        hierarchy.push(childHierarchy)
+      })
+    } else {
+      // 如果模型没有子节点，使用模型本身作为一级节点
+      const modelHierarchy = generateHierarchy(
+        clonedModel,
+        nameWithoutExt,
+        1,
+        SIMPLIFIED_MODE_CONFIG.maxHierarchyDepth
+      )
+      hierarchy = [modelHierarchy]
+    }
+
+    store.modelHierarchy = hierarchy
+
+    // 生成面包屑（返回供调用者处理）
+    const breadcrumbs = generateBreadcrumbs(nameWithoutExt)
+
+    // 重建物体映射
+    objectMap.clear()
+    rebuildObjectMap(clonedModel)
+
+    // 初始化环境和光照
+    initEnvironment()
+    applyLightingMode()
+
+    // 适配视图
+    fitView(clonedModel)
+  }
+
+  // ============================================================
+  // 模型加载
+  // ============================================================
+
+  /**
+   * 根据命名约定构建模型URL
+   * @param fileName - 文件名
+   * @returns 完整URL路径
+   */
+  const buildModelUrl = (fileName: string): string => {
+    // 格式: Root~Parent~Child.glb -> /3DModels/Root/Root~Parent~Child.glb
+    const nameWithoutExt = fileName.slice(0, -4)
+    const rootFolder = nameWithoutExt.split('~')[0]
+    return `/3DModels/${rootFolder}/${fileName}`
+  }
+
+  /**
+   * 按文件名加载模型
+   * @param fileName - 文件名（可带或不带.glb扩展名）
+   * @param onLoaded - 加载完成回调
+   */
+  const loadModelByFileName = (fileName: string, onLoaded?: () => void) => {
+    // 确保有.glb扩展名
+    if (!fileName.endsWith(SIMPLIFIED_MODE_CONFIG.fileExtension)) {
+      fileName += SIMPLIFIED_MODE_CONFIG.fileExtension
+    }
+
+    // 检查缓存
+    if (store.modelCacheEnabled && modelCache.has(fileName)) {
+      const cached = modelCache.get(fileName)!
+      setupModelFromCache(cached, fileName)
+      if (onLoaded) onLoaded()
+      return
+    }
+
+    // 开始加载
+    isLoading.value = true
+    store.isModelLoading = true
+
+    const url = buildModelUrl(fileName)
+    console.log(`从 ${url} 加载模型`)
+
+    // 创建加载器
+    const loader = new GLTFLoader()
+    const dracoLoader = new DRACOLoader()
+    dracoLoader.setDecoderPath(DRACO_DECODER_PATH)
+    loader.setDRACOLoader(dracoLoader)
+
+    loader.load(
+      url,
+      gltf => {
+        const rawModel = gltf.scene
+        replaceWithPBRMaterial(rawModel)
+
+        // 缓存模型
+        if (store.modelCacheEnabled) {
+          modelCache.set(fileName, rawModel.clone())
+        }
+
+        // 设置模型
+        setupModelFromCache(rawModel, fileName)
+
+        isLoading.value = false
+        store.isModelLoading = false
+        dracoLoader.dispose()
+
+        if (onLoaded) onLoaded()
+      },
+      undefined,
+      error => {
+        console.warn('加载模型失败:', fileName, error)
+        ElMessage.error(`模型加载失败: ${fileName}，请检查网络连接或模型文件是否存在`)
+
+        // 回退逻辑：尝试加载父级模型
+        const nameWithoutExt = fileName.slice(0, -4)
+        const parts = nameWithoutExt.split('~')
+
+        if (parts.length > 1) {
+          // 移除最后一级，尝试加载父级
+          parts.pop()
+          const parentName = parts.join('~')
+          console.log('回退到父级:', parentName)
+          loadModelByFileName(parentName, onLoaded)
+        } else {
+          // 没有父级可回退
+          console.error('没有父级可以回退，或根节点加载失败。')
+          isLoading.value = false
+          store.isModelLoading = false
+          dracoLoader.dispose()
+        }
+      }
+    )
+  }
+
+  // ============================================================
+  // 导出接口
+  // ============================================================
+
+  return {
+    /** 按文件名加载模型 */
+    loadModelByFileName,
+  }
+}