# ThreeEngine - 三维水利场景

基于 Three.js 的水利三维可视化场景组件。

## 嵌入到其他 Vue 项目

### 1. 安装依赖

```bash
npm install three 3d-tiles-renderer @loaders.gl/3d-tiles @loaders.gl/core @loaders.gl/gltf
```

### 2. 拷贝项目

将本项目 `src/` 目录下的以下内容拷贝到目标项目中：

| 路径 | 说明 |
|---|---|
| `src/components/` | Vue 组件（Scene3D、WaterLevelLabel 等） |
| `src/config/` | 场景配置文件 |
| `src/assets/` | 纹理、模型、图标等静态资源 |

### 3. 使用组件

```vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Scene3D from '@/components/Scene3D.vue'

const sceneRef = ref<InstanceType<typeof Scene3D>>()

onMounted(() => {
  // 3 秒后更新标签值
  setTimeout(() => {
    sceneRef.value?.setLabelValue('6602380005', 1.58)
  }, 3000)
})
</script>

<template>
  <Scene3D
    ref="sceneRef"
    :label-values="{ '6602380005': 0.00 }"
    :show-debug-tools="false"
    :tileset-url="'/scene/tileset.json'"
  />
</template>
```

## Props 说明

| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
| `labelValues` | `Record<string, number>` | `{}` | 标签数据值，`{ [标签id]: 数值 }` |
| `showDebugTools` | `boolean` | `false` | 是否显示调试面板 |
| `tilesetUrl` | `string` | `'/scene/tileset.json'` | 3D Tiles 数据地址 |
| `cameraPosition` | `{ x, y, z }` | 默认位置 | 初始相机位置 |
| `cameraTarget` | `{ x, y, z }` | 默认 target | 初始相机目标点 |

## Expose API（通过 ref 调用）

### 更新标签值

```ts
// 更新单个标签
sceneRef.value?.setLabelValue('6602380005', 1.58)

// 批量更新标签
sceneRef.value?.setLabelValues({ '6602380005': 1.58, 'gate002': 0.5 })

// 直接修改响应式数据
sceneRef.value?.labelValues['6602380005'] = 3.0
```

### 相机控制

```ts
// 飞行动画（自由指定位置）
sceneRef.value?.flyTo(
  { x: -900, y: 60, z: -2100 },  // 目标位置
  { x: -843, y: 12, z: -2182 },  // 目标看点（可选）
  2000                             // 动画时长（毫秒）
)

// 按预设名称跳转（配置在 sceneConfig.ts 的 cameraPresets 中）
sceneRef.value?.flyToPreset('default')      // 默认视角，时长 1500ms
sceneRef.value?.flyToPreset('gate', 2000)   // 闸门视角，时长 2000ms

// 查看所有预设
console.log(sceneRef.value?.cameraPresets)
```

## 镜头预设配置

在 `src/config/sceneConfig.ts` 中配置镜头预设：

```ts
export const cameraPresets: CameraPreset[] = [
  {
    id: 'default',
    name: '默认视角',
    positionX: -831.56685,
    positionY: 40.63456,
    positionZ: -2225.321,
    targetX: -843.0744,
    targetY: 12.01539,
    targetZ: -2182.06814,
  },
]
```

## 标签配置

在 `src/config/sceneConfig.ts` 中配置标签：

```ts
export const waterLevelLabels: WaterLevelLabelConfig[] = [
  {
    id: '6602380005',           // 唯一标识，外部传值时使用此 id
    name: '莫勒切河节制分水闸闸后水量监测',
    type: 'waterLevel',          // 标签类型，决定图标和文本
    positionX: -830.11,          // 场景中的位置（外部无需关心）
    positionY: 14,
    positionZ: -2156.83,
    initialValue: 0.00,         // 初始默认值
  },
]
```

## 扩展标签类型

在 `sceneConfig.ts` 中注册新类型：

```ts
export type LabelDataType = 'waterLevel' | 'flowRate' | '你的新类型'

export const labelTypeRegistry: Record<LabelDataType, LabelTypeDisplayConfig> = {
  waterLevel: {
    icon: 'shuiliang.png',
    unit: 'm³/s',
    label: '水 量',
    decimalPlaces: 2,
  },
  flowRate: {
    icon: 'shuiliang.png',
    unit: 'm³/s',
    label: '流 量',
    decimalPlaces: 2,
  },
  // 新类型: 在这里新增
}
```

之后在 `WaterLevelLabel.vue` 的 `iconMap` 中映射新的图标文件即可。