random

Site Icon Live2D Viewer v5.0

MIT License GitHub Pages Code Factor GitHub stars     HTML5 CSS3 JavaScript     Ask DeepWiki

A browser-based Live2D viewer designed for interaction with one or more Live2D models.
Built with vanilla JavaScript, the PIXI.js rendering engine and the Cubism Library.
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 (Versioned: v5.0)
Preview on Desktop Preview on Mobile

File Explorer on Desktop File Explorer on Mobile

Changelog on Desktop Changelog on Mobile

Features

Feature Description
Model Upload Support Choose the Upload model option from the dropdown or drag the compressed zip file onto the canvas.
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 glassmorphism-style modal that displays the latest project updates from changes.html.
Responsive Design A 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

Project Structure

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

.
├── Archives_INACTIVE/   # Literally anything else — best to stay away
├── 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 — thanks for the F-rating
├── 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 installed:
python -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. Upload a Model:
    • Via the dropdown: Tap the “Default Models” dropdown on the top right, select the “Upload Model” option and select the .zip archive containing your model’s files.
    • Via drag and drop: Open the webpage and a file explorer, drag the .zip archive over the canvas area until the borders color purple and drop the file.
  3. 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.
  4. 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:

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.