文章目录

# 入门

示例：


代码：

<!-- 看板娘 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

<script> L2Dwidget.init({ "model": { jsonPath: "https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json", "scale": 1 }, "display": { "position": "left", "width": 150, "height": 300, "hOffset": 0, "vOffset": -20 }, "mobile": { "show": false, "scale": 0.5 }, "react": { "opacityDefault": 1, //透明度 "opacityOnHover": 0.9 //鼠标跟踪度 } }); </script>

初始化的 jsonPath 为： https://unpkg.com/2D模型全名称@1.0.5/assets/模型.model.json

例如：

  • https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
  • https://unpkg.com/live2d-widget-model-epsilon2_1@1.0.5/assets/Epsilon2.1.model.json
  • https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json
  • https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json

也可通过使用浏览器访问 https://unpkg.com/2D模型全名称@1.0.5/ 来查找对应的模型json地址

如 https://unpkg.com/live2d-widget-model-chitose@1.0.5

2D模型全名称：

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

# 进阶

# 归档


<style type="text/css"> #live2dcanvas { border: 0 !important; } </style>
    
....


<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
<script type="text/javascript"> L2Dwidget.init({"display": { "superSample": 2, "width": 200, "height": 400, "position": "right", "hOffset": 0, "vOffset": 0 } }); </script>
However, if you want to do it manually, follow the instruction below:

import the js:


<script src = "( your script path here )"></script>

Then call the function along with your config.

L2Dwidget.init({
  'config1': 'value1',
  'config2': 'value2',
});