Live2D Viewer _v4.8

       

A browser-based Live2D viewer designed for interaction with one or more Live2D models.
Built with vanilla JavaScript and the PIXI.js rendering engine.
This project offers a feature-rich experience without the overhead of heavy frameworks.

It includes a dynamic UI, multi-model support, a GitHub repository explorer for discovering new models, and a "What's New" changelog modal, all wrapped in a clean, responsive design.

Live Preview

https://imduck42.github.io/Live2D-Viewer

Screenshots (fresh from the stone-age)

Features

Feature	Description
Multi-Model Support	Load, view, and interact with multiple Live2D models simultaneously on a shared canvas.
Intuitive Controls	Full model manipulation via drag (move), scroll/pinch (zoom), and tap (trigger motions).
Dynamic Control Panel	A real-time UI to manage expressions, motions, and hit-area visibility for the currently selected model.
GitHub Explorer	Browse GitHub repositories, preview model files, and instantly load models using the jsDelivr CDN.
Changelog Modal	A sleek, glassmorphism-style modal that displays the latest project updates from changes.html.
Responsive Design	A fluid and modern interface that adapts seamlessly to desktop, tablet, and mobile devices.
Framework-Free	Built with pure, well-organized JavaScript, ensuring a lightweight footprint and a transparent codebase.

Technology Stack

• Core Rendering: PIXI.js v6.5.10
• Live2D Integration: pixi-live2d-display v0.4.0
• Core SDK: Live2D Cubism Core
• Languages: HTML5, CSS3, JavaScript (ES6+)
• Icons: Font Awesome
• CDN: jsDelivr

Project Structure

The project is organized into a clean, modular, and maintainable structure:

.
├── assets/              # Static assets like icons, screenshots, and changelog
├── css/                 # Component-specific and global stylesheets
├── js/                  # Modular JavaScript files for each feature
├── libs/                # Core Live2D and PIXI.js library files
├── index.html           # Main application entry point
├── README.md            # You are here!
└── LICENSE              # Project license file

Installation

To run the viewer locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/ImDuck42/Live2D-Viewer.git
   cd Live2D-Viewer

2. Open in a browser: You can open index.html directly in a modern browser. (Changelog modal won't work)

3. (Recommended) Serve locally: For best results and to avoid potential CORS issues when loading models, run a local web server.

   # If you have Python 3 installed:
   python3 -m http.server 8000
   
   # Then open http://localhost:8000 in your browser.

Usage

1. Load a Model:

   • Via URL: Paste the URL of a .model.json or .model3.json file into the input field and click Load URL.
   • From Defaults: Choose a pre-configured model from the dropdown and click Load Selected.
   • Via GitHub Explorer: Click the folder icon to open the explorer, browse a repository, and import a model file directly.

2. Interact with Models:

   • Select: Click on any model to select it. The control panel will update to manage that model.
   • Move: Click and drag the selected model to reposition it on the canvas.
   • Zoom: Use your mouse wheel or a pinch gesture on touch devices to zoom.
   • Trigger Motions: Tap on a model's interactive regions (hit areas) to play animations.

3. Use the Control Panel:

   • Show Hit Areas: Toggle the checkbox to visualize the model's interactive zones.
   • Expressions & Motions: Click buttons to apply facial expressions or trigger full-body animations.
   • Delete Model: Click the trash icon to remove the selected model.

Contributing

Contributions are welcome! If you have ideas for improvements, new features, or bug fixes, please feel free to:

1. Open an Issue to discuss the change.
2. Fork the repository and submit a Pull Request with a clear description of your work.
3. Reach out via the listed contact methods

Please adhere to the established code style and organizational principles of the project.

Contact

Feel free to reach out if you have questions or suggestions:

• Email: imduck420@gmail
• GitHub: ImDuck42
• Discord: Starchasm Nyx (@hu7ao)

License

This project is licensed under the MIT License. See the LICENSE file for full details.

Note on Dependencies:
Since Pixi Live2D Display only works up to Pixi.js 6.5.10 (7.4.3 but without model cursor tracking), this won't be updatable.