新增Live2D板块，增加web服务驱动live2d

Ikaros-521 · Jun 18, 2023 · a7474af · a7474af
2 parents e14f4c5 + 5331763
commit a7474af
Show file tree

Hide file tree

Showing 157 changed files with 133,913 additions and 159 deletions.
diff --git a/.gitignore b/.gitignore
@@ -196,3 +196,5 @@ venv/
 
 output/
 .idea
+
+branch/
diff --git a/Live2D/README.md b/Live2D/README.md
@@ -0,0 +1,46 @@
+# CyberWaifu Server - <u>Live2D</u>
+
+## Getting Started
+
+```shell
+cd CyberWaifu/Server/Live2D
+
+python -m http.server
+# http://127.0.0.1:8000
+```
+
+## Custom Live2D Model
+
+Put your Live2D model in `live2d-model/` as a directory
+
+Open `js/bundle.js`
+
+```javascript
+// At Line 1163 (You can also search "Hiyori" in this file to locate)
+// ............
+e.ModelDir = ["Hiyori"]
+// ............
+```
+
+Modify it
+
+```javascript
+e.ModelDir = ["<Your Live2D model directory name>"]
+```
+
+Re-run the http server to check if it works properly
+
+```shell
+python -m http.server
+# http://127.0.0.1:8000
+```
+
+## References
+
+[Download Live2D Cubism SDK for Web - Live2D Cubism](https://www.live2d.com/en/download/cubism-sdk/download-web/)
+
+[Live2D Sample Model Collection - Live2D Cubism](https://www.live2d.com/en/download/sample-data/)
+
+......and more, thanks.
+
+*I am because we are.*
diff --git a/Live2D/css/live2d.css b/Live2D/css/live2d.css
@@ -0,0 +1,288 @@
+#option1,#option2,#option3 {
+    display: none;
+}
+#controller {
+    position: absolute;
+    right: 50px;
+    top: 10px;
+}
+
+#controller div {
+    background: #ffaaa5;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    cursor: pointer;
+    text-align: center;
+    transition: all .2s linear;
+    margin-top: 10px;
+}
+#controller :first-child {
+    margin-top: 0;
+}
+#controller div:hover {
+    box-shadow: 0px 2px 6px #ccc;
+}
+#controller div span {
+    color: azure;
+    font-size: 14px;
+    line-height: 24px;
+}
+
+#landlord {
+    user-select: none;
+    /* position: fixed; 
+    left: 30px;
+    bottom: 0; */
+    z-index: 10000;
+    font-size: 0;
+    transition: all .3s ease-in-out;
+    /* width: 560px;
+    height: 500px; */
+    width: 320px;
+    height: 380px;
+    /* width: 100% !important;
+    height: 100% !important;  */
+    margin: 0 auto;
+    background-color: #1E1E1E00;
+}
+
+html{    
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin:0;
+}
+
+body{    
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin:0;
+}
+
+.message {
+    opacity: 0;
+    width: 300px;
+    height: auto;
+    margin: auto;
+    padding: 7px;
+    top: -20px;
+    left: 50%;
+    margin-left: -150px;
+    text-align: center;
+    border: 1px solid rgba(255,137,255,.4);
+    border-radius: 12px;
+    background-color: rgba(255,137,255,.2);
+    box-shadow: 0 3px 15px 2px rgba(255,137,255,.4);
+    font-size: 13px;
+    font-weight: 400;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    overflow: hidden;
+    position: absolute;
+    animation-delay: 5s;
+    animation-duration: 50s;
+    animation-iteration-count: infinite;
+    animation-name: shake;
+    animation-timing-function: ease-in-out;
+}
+@keyframes shake {
+    2% {
+        transform: translate(0.5px, -1.5px) rotate(-0.5deg);
+    }
+
+    4% {
+        transform: translate(0.5px, 1.5px) rotate(1.5deg);
+    }
+
+    6% {
+        transform: translate(1.5px, 1.5px) rotate(1.5deg);
+    }
+
+    8% {
+        transform: translate(2.5px, 1.5px) rotate(0.5deg);
+    }
+
+    10% {
+        transform: translate(0.5px, 2.5px) rotate(0.5deg);
+    }
+
+    12% {
+        transform: translate(1.5px, 1.5px) rotate(0.5deg);
+    }
+
+    14% {
+        transform: translate(0.5px, 0.5px) rotate(0.5deg);
+    }
+
+    16% {
+        transform: translate(-1.5px, -0.5px) rotate(1.5deg);
+    }
+
+    18% {
+        transform: translate(0.5px, 0.5px) rotate(1.5deg);
+    }
+
+    20% {
+        transform: translate(2.5px, 2.5px) rotate(1.5deg);
+    }
+
+    22% {
+        transform: translate(0.5px, -1.5px) rotate(1.5deg);
+    }
+
+    24% {
+        transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
+    }
+
+    26% {
+        transform: translate(1.5px, 0.5px) rotate(1.5deg);
+    }
+
+    28% {
+        transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
+    }
+
+    30% {
+        transform: translate(1.5px, -0.5px) rotate(-0.5deg);
+    }
+
+    32% {
+        transform: translate(2.5px, -1.5px) rotate(1.5deg);
+    }
+
+    34% {
+        transform: translate(2.5px, 2.5px) rotate(-0.5deg);
+    }
+
+    36% {
+        transform: translate(0.5px, -1.5px) rotate(0.5deg);
+    }
+
+    38% {
+        transform: translate(2.5px, -0.5px) rotate(-0.5deg);
+    }
+
+    40% {
+        transform: translate(-0.5px, 2.5px) rotate(0.5deg);
+    }
+
+    42% {
+        transform: translate(-1.5px, 2.5px) rotate(0.5deg);
+    }
+
+    44% {
+        transform: translate(-1.5px, 1.5px) rotate(0.5deg);
+    }
+
+    46% {
+        transform: translate(1.5px, -0.5px) rotate(-0.5deg);
+    }
+
+    48% {
+        transform: translate(2.5px, -0.5px) rotate(0.5deg);
+    }
+
+    50% {
+        transform: translate(-1.5px, 1.5px) rotate(0.5deg);
+    }
+
+    52% {
+        transform: translate(-0.5px, 1.5px) rotate(0.5deg);
+    }
+
+    54% {
+        transform: translate(-1.5px, 1.5px) rotate(0.5deg);
+    }
+
+    56% {
+        transform: translate(0.5px, 2.5px) rotate(1.5deg);
+    }
+
+    58% {
+        transform: translate(2.5px, 2.5px) rotate(0.5deg);
+    }
+
+    60% {
+        transform: translate(2.5px, -1.5px) rotate(1.5deg);
+    }
+
+    62% {
+        transform: translate(-1.5px, 0.5px) rotate(1.5deg);
+    }
+
+    64% {
+        transform: translate(-1.5px, 1.5px) rotate(1.5deg);
+    }
+
+    66% {
+        transform: translate(0.5px, 2.5px) rotate(1.5deg);
+    }
+
+    68% {
+        transform: translate(2.5px, -1.5px) rotate(1.5deg);
+    }
+
+    70% {
+        transform: translate(2.5px, 2.5px) rotate(0.5deg);
+    }
+
+    72% {
+        transform: translate(-0.5px, -1.5px) rotate(1.5deg);
+    }
+
+    74% {
+        transform: translate(-1.5px, 2.5px) rotate(1.5deg);
+    }
+
+    76% {
+        transform: translate(-1.5px, 2.5px) rotate(1.5deg);
+    }
+
+    78% {
+        transform: translate(-1.5px, 2.5px) rotate(0.5deg);
+    }
+
+    80% {
+        transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
+    }
+
+    82% {
+        transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
+    }
+
+    84% {
+        transform: translate(-0.5px, 0.5px) rotate(1.5deg);
+    }
+
+    86% {
+        transform: translate(2.5px, 1.5px) rotate(0.5deg);
+    }
+
+    88% {
+        transform: translate(-1.5px, 0.5px) rotate(1.5deg);
+    }
+
+    90% {
+        transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
+    }
+
+    92% {
+        transform: translate(-1.5px, -1.5px) rotate(1.5deg);
+    }
+
+    94% {
+        transform: translate(0.5px, 0.5px) rotate(-0.5deg);
+    }
+
+    96% {
+        transform: translate(2.5px, -0.5px) rotate(-0.5deg);
+    }
+
+    98% {
+        transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
+    }
+
+    0%, 100% {
+        transform: translate(0, 0) rotate(0);
+    }
+}