DLP3D Motion Data Viewer

A DLP3D data visualization application built with Vue 3, TypeScript, and Babylon.js. This application allows you to view and analyze motion capture data with interactive 3D models and data visualization charts.

Supported Character Models

The application supports multiple character models for motion data visualization:

Features

• 3D Motion Data Visualization: View motion capture data using interactive 3D models with Babylon.js
• Multi-Model Support: View motion data for different characters in the database
• Database Integration: SQLite database support for storing and querying motion data
• Database Modification: Directly modify data in the data panel

• Data Filtering: Advanced search and filtering capabilities for motion data

• Multi-language Support: Internationalization support for multiple languages
• Real-time Data Analysis: Interactive charts and data visualization
• Motion Data Type Classification: Support for various motion data types (idle, random, loopable, speech, etc.)

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

2. 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:

   • Google Drive: Visit Motion Database Download Link
   • Baidu Netdisk: Visit Motion Database Download Link (Extraction code: wwqm)
   • Choose the appropriate download method based on your network conditions and download the compressed motion database file

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.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

License

This project is licensed under the MIT License.