⚙️ 开发手册

项目架构概述 (基于真实源码)

本项目《基于AI大模型的国际智慧教育实践与应用案例》在底层架构上深度结合了 3D 图形渲染技术 (WebGL) 与 现代前端组件化。系统分为两套底层环境：

• 基础静态 WebGL 版 (配套资源 目录)：采用原生 HTML 结合 Three.js 等图形引擎加载大型 .glb 3D 模型资产，实现数字人体、低空无人机、智慧城市、气象雷达等的场景游历与互动。
• 现代重构版 (app 目录)：这是一个高度专业的 3D 智能手术仿真系统。采用 React 18 + TypeScript + Vite 构建，结合 React Three Fiber，动态渲染直肠前切除术的手术过程。

静态 WebGL 3D 架构 (配套资源)

原生版代码由于包含了巨量的 3D 模型，其核心在于对加载器的调用和渲染循环的维护：

• digitalbody/ 目录：核心文件 digitalbody.glb 为数字人体的 3D 资源；digitalbody.htm 中包含初始化场景、解析动画并挂载交互的 JS 代码。
• uav/ 目录：通过 uav.glb 展示低空无人机实体，包含了诸如 reverseuav2.htm 的反无人机拦截模拟渲染。
• caton/ 目录：智慧教学场景资产存储，包含 owl.glb 等模型。
• city/ 目录：智慧城市场景，包含 city0525.htm 等城市模型的 3D 漫游渲染。
• radia/ 目录：气象雷达与降雨模拟，包含 radar.html 与 rain.html 等环境渲染。

React 3D 手术仿真架构 (app目录)

在 app 目录中，系统由简单的演示升级为了复杂的医疗仿真面板。前端技术栈如下：

• 核心框架：React 18 + TypeScript
• 构建工具：Vite + Tailwind CSS (Utility-first CSS 框架)
• 核心目录：src/components/ 承载所有 3D 组件，src/data/ 提供离线仿真序列。

核心组件级源码解析 (app目录)

该模块真实模拟了“直肠前切除术 (Dixon)”。源码 src/components/ 中的核心模块职责分明：

• Scene.tsx：3D 渲染根场景，管理光照、摄像机角度和主环境。
• Organ.tsx：解析并渲染患者核心器官及组织的 3D 结构，响应鼠标悬浮或点击的交互高亮。
• Tumor.tsx：独立管理肿瘤实体的渲染，其体积、密度表现由数据驱动。
• Instruments.tsx：控制超声刀、吻合器等手术器械在三维空间中的动画和位移。

JSON 数据时间线配置 (surgery.json)

项目未使用实时后端，而是依靠 src/data/surgery.json 作为“全时序数据库”驱动整个仿真回放：

1. meta 节点：定义患者基础信息（如 ID: P-2023-891），以及绑定的内窥镜与现场监控视频源。
2. surgerySteps 节点：详细定义了麻醉诱导、体位固定、切开探查、肿瘤切除等时间区间 (startTime, endTime)，UI 根据当前播放时间高亮特定步骤。
3. vitals 节点：记录随时间变化的 hr (心率)、sys/dia (血压)、temp (体温)，以在监护仪 UI 上绘制波形。
4. tumorMetrics 节点：记录肿瘤的密度与体积在手术中的缩减过程。