Live2D Viewer _v5.0

       

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.

It includes a dynamic UI, multi-model support, a GitHub repository explorer for discovering new models, the feature to upload local 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)

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 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

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

Project Structure

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

.
├── Archives_INACTIVE/   # Anything not listed below — 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
├── LICENSE              # Project license file
├── README.md            # You are here!
└── Ze_ToDo_List.txt     # The holy grail that is my check list

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 (but should't) open the 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 or opening the changelog modal, 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 its border colors 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.
(TL;DR Don't write Pasghetto Code)

Contact

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

• Email: imduck420@gmail.com
• 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.