wlLive2d

Appearance

组件加载 ​

当您需要加载模型时, 您可以在 wl-live2d 中导入 wlLive2d 方法, 当这个方法被调用时将根据您传入的配置选项来加载组件, 该方法返回一个实例对象, 您可以从 ULive2dController 这个实例对象中调用其中所有方法

参数: ​

参数名类型描述
optionsDLive2dOptions配置选项

返回值类型: ​

返回值是一个 ULive2dController 实例对象, 该实例对象中包含了对组件模块操作的所有方法和事件

用法: ​

html
<!DOCTYPE html>
<html lang="en">
<body>
  <script type="module">
    //import wlLive2d from '../../dist/es/index.js';
    import { wlLive2d } from 'https://fastly.jsdelivr.net/npm/wl-live2d/dist/es/index.js';

    wlLive2d({
      models: [
        {
          path: 'https://fastly.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json',
          scale: 0.6,
          position: { x: 0, y: 0 }
        },
        {
          path: 'https://fastly.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json',
          position: { x: 20, y: 10 }
        },
        {
          path: 'https://fastly.jsdelivr.net/gh/Eikanya/Live2d-model/%E5%B4%A9%E5%9D%8F%E5%AD%A6%E5%9B%AD2/yiselin/model.json',
          scale: 1
        },
        {
          path: 'https://fastly.jsdelivr.net/gh/Eikanya/Live2d-model/%E5%B0%91%E5%A5%B3%E5%89%8D%E7%BA%BF%20girls%20Frontline/live2dold/old/kp31/normal/model.json'
        }
      ]
    });
  </script>
</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<body>
  <!--<script src="../../dist/es/index.js" type="module"></script>-->
  <script src="https://fastly.jsdelivr.net/npm/wl-live2d/dist/es/index.js" type="module"></script>
  <script type="module">
    wlLive2d({
      models: [
        {
          path: 'https://fastly.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json',
          scale: 0.6,
          position: { x: 0, y: 0 }
        },
        {
          path: 'https://fastly.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json',
          position: { x: 20, y: 10 }
        },
        {
          path: 'https://fastly.jsdelivr.net/gh/Eikanya/Live2d-model/%E5%B4%A9%E5%9D%8F%E5%AD%A6%E5%9B%AD2/yiselin/model.json',
          scale: 1
        },
        {
          path: 'https://fastly.jsdelivr.net/gh/Eikanya/Live2d-model/%E5%B0%91%E5%A5%B3%E5%89%8D%E7%BA%BF%20girls%20Frontline/live2dold/old/kp31/normal/model.json'
        }
      ]
    });
  </script>
</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<body>
  <!-- <script src="../../dist/umd/index.js"></script>-->
  <script src="https://fastly.jsdelivr.net/npm/wl-live2d/dist/umd/index.js"></script>
  <script>
    wlLive2d({
      models: [
        {
          path: 'https://fastly.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json',
          scale: 0.6,
          position: { x: 0, y: 0 }
        },
        {
          path: 'https://fastly.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json',
          position: { x: 20, y: 10 }
        },
        {
          path: 'https://fastly.jsdelivr.net/gh/Eikanya/Live2d-model/%E5%B4%A9%E5%9D%8F%E5%AD%A6%E5%9B%AD2/yiselin/model.json',
          scale: 1
        },
        {
          path: 'https://fastly.jsdelivr.net/gh/Eikanya/Live2d-model/%E5%B0%91%E5%A5%B3%E5%89%8D%E7%BA%BF%20girls%20Frontline/live2dold/old/kp31/normal/model.json'
        }
      ]
    });
  </script>
</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<body>
  <!--<script src="../../packages/live2dcubism4core.min.js"></script>-->
  <script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
  <script src="https://fastly.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
  <script src="https://fastly.jsdelivr.net/npm/pixi.js@6.5.10/dist/browser/pixi.min.js"></script>
  <script src="https://fastly.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>
  <canvas id=canvas></canvas>
  <script>
    const cubism2Model = 'https://fastly.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json';
    const cubism4Model = 'https://fastly.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json';

    (async function main() {
      const app = new PIXI.Application({
        view: document.getElementById('canvas'),
        autoStart: true,
        resizeTo: window
      });

      const model2 = await PIXI.live2d.Live2DModel.from(cubism2Model);
      const model4 = await PIXI.live2d.Live2DModel.from(cubism4Model);

      app.stage.addChild(model2);
      app.stage.addChild(model4);

      model2.scale.set(0.3);
      model4.scale.set(0.25);

      model4.x = 300;
    })();
  
  </script>
</body>
</html>

©️ MIT License