1
2
3
4
5

This repository has been archived by the owner before Nov 9, 2022. It is now -only.

...

The project is not actively maintained. Please try similar projects stevenjoezhang/live2d-widget

1

<script ></script>

1

git clone https://github.com/stevenjoezhang/live2d-widget.git

1

<script ></script>

1
2
3
4
5
6
7
8

live2d-widget
│  live2d.min.js      <-- 主文件
│  waifu.css          <-- 样式
├─demo
│      login.html     <-- 功能实现参考
└─src
        index.js      <-- 与login.html一起作为实现参考
        model.js      <-- 模型加载参考

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

document.body.insertAdjacentHTML, <div  >
            <div ></div>
            <canvas   ></canvas>
            <div ></div>
        </div>;

// 这里是参考了demo代码，猜想可能是担心bottom 0不生效，又赋值了一遍。因为原来的css里面有个鼠标移上去以后的浮动效果
setTimeout > 
    document.getElementById.style.bottom  0;
, 0;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

initConfigconfig
    apiPath, cdnPath   config;
    ;
   typeof    
        ;
       !cdnPath.endsWith cdnPath + ;
    typeof    
       !apiPath.endsWith apiPath + ;
    
      throw ;
  
   useCDN: useCDN, apiPath: apiPath, cdnPath: cdnPath;

1
2
3
4

const   initConfig
    // apiPath: , // 这里是api方式请求，这个api的作者服务器已经用爱发电了很多年，已经说了很多次要废弃了，但是目前还运作着。为了他，也为了保证自己少出问题，我们还是选用cdn的方式。
    cdnPath: ,
;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

async loadModelmodelId, modelTexturesId, config 
  localStorage.setItem, modelId; // 保留了demo 中本地存储配置的思路，随时可以将切换模型工具添加上
     undefined   0;
  localStorage.setItem, modelTexturesId;
   config.useCDN  // cdn load
      const   await fetch.cdnPathmodel_list.json;
      const   await response.json;
      const   modelSelectionmodelList.modelsmodelId, modelTexturesId;
      loadlive2d, .cdnPathmodel//index.json;
      console.logLive2D 模型 - 加载完成;
     // api load
      loadlive2d, .apiPathget/?id-;
      console.logLive2D 模型 - 加载完成;
  


modelSelectionobj, textureId 
  Array.isArrayobj
    textureId < obj.length
      objtextureId
    
    objMath.floorMath.random * obj.length

1
2
3
4
5

@media max-width: 768px 
    
    	display: none;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    bottom: -1000px;
    left: 0;
    line-height: 0;
    margin-bottom: -10px;
    position: fixed;
    /* transform: translateY3px;  注释掉 */
    transition: transform .3s ease-in-out, bottom 3s ease-in-out;
    z-index: 1;



    /* transform: translateY0;  注释掉 */

1
2
3
4

    height: 250px;
    width: 250px;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

window.addEventListener,  > 
  localStorage.removeItem;
  localStorage.removeItem;
    0,   ,
      localStorage.getItem,
      localStorage.getItem;
     null 
      3;
      20;
  
  loadModelmodelId, modelTexturesId, config;
;