Development

Development#

Technology Stack#

  • Frontend: Vue 3 + TypeScript + Vite

  • 3D Engine: Babylon.js

  • Backend: Node.js + Express

  • Database: SQLite with better-sqlite3

Prerequisites#

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

  • npm or yarn package manager

Installation#

  1. Clone the repository:

git clone <repository-url>
cd motionDataViewer

  1. Install dependencies:

npm install

Development#

Start Development Server#

To run both frontend and backend servers simultaneously:

npm run dev:full

Or start them separately:

# Frontend only
npm run dev

# Backend only
npm run server

Production Build#

Build for Production#

npm run build

Preview Production Build#

npm run preview

Development Tools#

Type Checking#

npm run type-check

Linting#

npm run lint

Code Formatting#

npm run format

Project Structure#

motionDataViewer/
├── public/                 # Static assets
│   ├── glbs/              # 3D model files (.glb)
│   └── *.json             # Physics simulation metadata files
├── src/
│   ├── components/        # Vue components
│   │   └── dataViewer.vue # Main 3D viewer component
│   ├── utils/             # Utility functions
│   │   ├── AnimationGroup.ts # Motion data class
│   │   ├── tools.ts       # Utility functions
│   │   ├── database.ts    # Database management
│   │   ├── loadMotion.ts  # Motion data loading
│   │   └── translations.ts # Chinese-English switching support
│   └── assets/            # CSS and static assets
├── server.js              # Express backend server
└── config.env             # Environment configuration

Usage#

  1. Start the application using npm run dev:full

  2. Open your browser and navigate to localhost:5173

  3. Use the control panel to navigate between different motion data files

  4. Use the search panel to filter motion data by various criteria

  5. Observe motion data in 3D view

  6. View data visualizations and charts for detailed analysis

Download Motion Database#

  1. Download Motion Database:

  2. Extract and Organize Data:

    • Extract the downloaded file to the project root directory

Configuration#

Edit config.env to configure database settings and other environment variables. Ensure the database is set to the directory of the downloaded files.

Contents