安装和开发

安装和开发#

技术栈#

  • 前端：Vue 3 + TypeScript + Vite

  • 3D引擎：Babylon.js

  • 后端：Node.js + Express

  • 数据库：SQLite with better-sqlite3

环境要求#

  • Node.js (版本 ^20.19.0 || >=22.12.0)

  • npm 或 yarn 包管理器

安装#

  1. 克隆仓库：

git clone <repository-url>
cd motionDataViewer

  1. 安装依赖：

npm install

开发#

启动开发服务器#

同时运行前端和后端服务器：

npm run dev:full

或者分别启动：

# 仅前端
npm run dev

# 仅后端
npm run server

生产构建#

构建生产版本#

npm run build

预览生产构建#

npm run preview

开发工具#

类型检查#

npm run type-check

代码检查#

npm run lint

代码格式化#

npm run format

项目结构#

motionDataViewer/
├── public/                 # 静态资源
│   ├── glbs/              # 3D模型文件 (.glb)
│   └── *.json             # 物理模拟元数据文件
├── src/
│   ├── components/        # Vue组件
│   │   └── dataViewer.vue # 主3D查看器组件
│   ├── utils/             # 工具函数
|   |   ├── AnimationGroup.ts # 动作数据类
|   |   ├── tools.ts       # 工具函数
│   │   ├── database.ts    # 数据库管理
│   │   ├── loadMotion.ts  # 动作数据加载
│   │   └── translations.ts # 中英切换支持
│   └── assets/            # CSS和静态资源
├── server.js              # Express后端服务器
└── config.env             # 环境配置

使用方法#

  1. 使用 npm run dev:full 启动应用程序

  2. 打开浏览器并导航到localhost:5173

  3. 使用控制面板在不同动作数据文件之间导航

  4. 使用搜索面板按各种条件过滤动作数据

  5. 在3D视角观察动作数据

  6. 查看数据可视化和图表进行详细分析

下载动作数据库#

  1. 下载动作数据库：

  2. 解压并组织数据：

    • 将下载的文件解压到项目根目录

配置#

编辑 config.env 来配置数据库设置和其他环境变量。确保数据库设置为下载的文件的目录。

Contents