You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -37,53 +37,38 @@ It includes a dynamic UI, multi-model support, a GitHub repository explorer for
37
37
38
38
## Features
39
39
40
-
-**Multi-Model Support**: Load, view, and interact with multiple Live2D models on the same canvas.
41
-
-**Intuitive Controls**:
42
-
-**Drag** to move models.
43
-
-**Pinch** or **Scroll** to zoom.
44
-
-**Tap** on hit areas to trigger motions.
45
-
-**Dynamic UI Panel**: A responsive sidebar provides real-time control over expressions, motions, and hit-area visibility for the selected model.
46
-
-**GitHub Repository Explorer**: An integrated file explorer to browse GitHub repositories, preview model files, and import them directly using the jsDelivr CDN.
47
-
-**Changelog Modal**: A sleek, glassmorphism-style modal that holds and displays the latest project updates from `changes.html`.
48
-
-**Responsive Design**: A fluid layout that adapts seamlessly to both desktop, tablet and mobile devices.
49
-
-**Framework-Free**: Built with pure, well-organized JavaScript, css and html ensuring a lightweight and transparent codebase.
The project is organized into a clear and maintainable structure:
61
+
The project is organized into a clean, modular, and maintainable structure:
63
62
64
63
```
65
64
.
66
-
├── assets/
67
-
│ ├── icon.svg
68
-
│ ├── changes.html
69
-
│ └── screenshots/
70
-
├── css/
71
-
│ ├── styles.css
72
-
│ ├── repoexplorer.css
73
-
│ └── newsmodal.css
74
-
├── js/
75
-
│ ├── exclusions.js
76
-
│ ├── script.js
77
-
│ ├── repoexplorer.js
78
-
│ └── newsmodal.js
79
-
├── libs/
80
-
│ ├── live2d.js
81
-
│ ├── live2dcubismcore.js
82
-
│ └── extra.js
83
-
├── index.html
84
-
├── README.md
85
-
├── LICENSE
86
-
└── zToDo.txt
65
+
├── assets/ # Static assets like icons, screenshots, and changelog
66
+
├── css/ # Component-specific and global stylesheets
67
+
├── js/ # Modular JavaScript files for each feature
68
+
├── libs/ # Core Live2D and PIXI.js library files
69
+
├── index.html # Main application entry point
70
+
├── README.md # You are here!
71
+
└── LICENSE # Project license file
87
72
```
88
73
89
74
## Installation
@@ -100,52 +85,53 @@ To run the viewer locally, follow these steps:
100
85
You can open `index.html` directly in a modern browser.
101
86
102
87
3. **(Recommended) Serve locally:**
103
-
For best results and to avoid potential CORS issues when loading models, run a local web server.
88
+
For best results and to avoid potential CORS issues when loading models, run a local web server.
104
89
```bash
105
90
# If you have Python 3 installed:
106
91
python3 -m http.server 8000
107
92
108
-
# Then, open http://localhost:8000 in your browser.
93
+
# Then open http://localhost:8000 in your browser.
109
94
```
110
95
111
96
## Usage
112
97
113
-
1. **Load a Model**:
114
-
- **URL Input**: Paste the URL of a `model.json` or `.model3.json` file and click "Load URL".
115
-
- **Default Models**: Choose a pre-configured model from the dropdown and click "Load Selected".
116
-
- **File Explorer**: Click the **folder icon**in the header to open the GitHub Repository Explorer. Browse for models and import them with a single click.
98
+
1. **Load a Model:**
99
+
- **Via URL:** Paste the URL of a `.model.json` or `.model3.json` file into the input field and click **Load URL**.
100
+
- **From Defaults:** Choose a pre-configured model from the dropdown and click **Load Selected**.
101
+
- **Via GitHub Explorer:** Click the **folder icon** to open the explorer, browse a repository, and import a model file directly.
117
102
118
-
2. **Interact with the Model**:
119
-
- **Select**: Tap a model to selectit. The control panel will update accordingly.
120
-
- **Move**: Drag the selected model to reposition it.
121
-
- **Zoom**: Use the mouse wheel or pinch gestures to zoom in and out.
122
-
- **Trigger Motions**: Tap on a model's hit areas (like the head or body) to play associated motions.
103
+
2. **Interact with Models:**
104
+
- **Select:** Click on any model to selectit. The control panel will update to manage that model.
105
+
- **Move:** Click and drag the selected model to reposition it on the canvas.
106
+
- **Zoom:** Use your mouse wheel or a pinch gesture on touch devices to zoom.
107
+
- **Trigger Motions:** Tap on a model's interactive regions (hit areas) to play animations.
123
108
124
-
3. **Use the Control Panel**:
125
-
- **Show Hit Areas**: Check the box to visualize the model's interactive hit zones.
126
-
- **Expressions & Motions**: Click buttons in the corresponding sections to apply expressions or play animations.
127
-
- **Delete Model**: Click the trash icon to remove the currently selected model from the canvas.
109
+
3. **Use the Control Panel:**
110
+
- **Show Hit Areas:** Toggle the checkbox to visualize the model's interactive zones.
111
+
- **Expressions & Motions:** Click buttons to apply facial expressions or trigger full-body animations.
112
+
- **Delete Model:** Click the trash icon to remove the selected model.
128
113
129
114
## Contributing
130
115
131
-
Contributions are welcome! If you have ideas for improvements or find a bug, please feel free to:
116
+
Contributions are welcome! If you have ideas for improvements, new features, or bug fixes, please feel free to:
132
117
133
-
1. **Open an Issue**: Describe the issue or feature proposal in detail.
134
-
2. **Submit a Pull Request**: Fork the repository, make your changes, and submit a PR with a clear description of your work.
118
+
1. **Open an Issue** to discuss the change.
119
+
2. **Fork the repository** and submit a **Pull Request** with a clear description of your work.
120
+
3. **Reach out** via the listed contact methods
135
121
136
-
Please adhere to the existing code style and add comments where possible.
122
+
**Please adhere to the established code style and organizational principles of the project.**
137
123
138
124
## Contact
139
125
140
126
Feel free to reach out if you have questions or suggestions:
This project is licensed under the **MIT License**. See the [LICENSE](LICENSE) file for details.
134
+
This project is licensed under the **MIT License**. See the [LICENSE](LICENSE) file forfull details.
149
135
150
-
>**Disclaimer:**
151
-
> 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. If anyone has a version that works with Pixi.js 8.x, it'd be appreciated!
136
+
>**Note on Dependencies:**
137
+
> 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.
0 commit comments