XinJiang

ThreeEngine - 三维水利场景

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

嵌入到其他 Vue 项目

1. 安装依赖

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. 使用组件

<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 调用）

更新标签值

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

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

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

相机控制

// 飞行动画（自由指定位置）
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 中配置镜头预设：

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 中配置标签：

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

扩展标签类型

在 sceneConfig.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 中映射新的图标文件即可。