如何领养一只web看板娘

2019年04月24日阅读：658 字数：467 阅读时长：1 分钟

之前在B站以及一些大佬的博客都看到了萌萌的看板娘，emmmmm不加上我睡不着啊，所以一顿摸索发现很多都用了live2d，顺藤摸瓜找到了一份教程没错我也加上了，左下角萌萌哒

之前在B站直播以及一些大佬的博客都看到了萌萌的看板娘，emmmmm不加上我睡不着啊，所以一顿摸索发现很多都用了live2d，顺藤摸瓜找到了一份教程

没错我也加上了，左下角很可爱有木有~~~

1、Live2D Cubism 2

适用于Live2D Cubism SDK WebGL 2.0 ~ 2.1版本

参考大神的Demo：https://github.com/fghrsh/live2d_demo

Api接口：https://github.com/fghrsh/live2d_api

模型：https://github.com/Eikanya/Live2d-model 、https://github.com/xb2016/poster-girl-l2d-2233

1.1、加载本地静态model.json

下载模型文件，在web服务下，加载model.json文件即可

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Live2D Cubism SDK v2.1</title>
  <style>
    .live2d{
      width: 300px;
      height: 300px;
    }
  </style>
</head>
<body>
  <canvas id="live2d" class="live2d"></canvas>
  <script src="live2d.min.js"></script>
  <script>
    window.loadlive2d(
      'live2d', '/model/bilibili/22/model.json',
      console.log('live2d', '模型加载完成')
    )
  </script>
</body>
</html>

1.2、使用Api获取model数据

参考https://github.com/fghrsh/live2d_api编写的nodejs版本，收藏了B站直播22、33看板娘，药水制作师，超次元游戏：海王星等模型

支持模型、服装的顺序切换和随机切换

模型列表：http://api.timelessq.com/live2d/lists

模型数据：http://api.timelessq.com/live2d/get?id=100&texture=1

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Live2D Cubism SDK v2.1</title>
  <style>
    .live2d{
      width: 300px;
      height: 300px;
    }
  </style>
</head>
<body>
  <canvas id="live2d" class="live2d"></canvas>
  <script src="live2d.min.js"></script>
  <script>
    var modelId = 100
    var modelTexturesId = 1
    window.loadlive2d(
      'live2d', `//api.timelessq.com/live2d/get?id=${modelId}&texture=${modelTexturesId}&isuseCDN=true`,
      console.log('live2d', '模型 ' + modelId + '-' + modelTexturesId + ' 加载完成')
    )
  </script>
</body>
</html>

1.3、sdk支持http协议的资源

model.json文件内textures材质、motions动作等文件都是使用相对路径，如果api和这些静态资源不在一块，想直接使用绝对路径咋办

1、使用已经改好的SDK文件 https://cdn.timelessq.com/static/vendor/live2d/index.js

2、可以自行修改下Live2D_SDK文件

打开live2d.min.js 搜索

this.modelSetting.loadModelSetting(i,function(){

把

this.modelSetting.loadModelSetting(i,function(){var t=r.modelHomeDir+r.modelSetting.getModelFile();

改成

this.modelSetting.loadModelSetting(i,function(){var f=r.modelSetting.getModelFile();r.modelHomeDir=/^https?:\/\/|^\/\//i.test(f)?'':r.modelHomeDir;var t=r.modelHomeDir+r.modelSetting.getModelFile();

2、Live2D Cubism 4

Cubism 4 SDK 后续更新

评论区 (0)

还没有评论，快来抢第一吧