live2d+live2dcubismcore+pixi实现二次元看板娘交互动画效果代码-html代码-BFW代码库

live2d+live2dcubismcore+pixi实现二次元看板娘交互动画效果代码

代码语言：html

所属分类：动画

代码描述：live2d+live2dcubismcore+pixi实现二次元看板娘交互动画效果代码

代码标签： live2d live2dcubismcore pixi 二次元看板娘交互动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
<style>
#control {
  position: absolute;
  top: 8px;
  left: 24px;
  color: #fff;
  font-size: 18px;
}
</style>

  
  
</head>

<body >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/live2dcubismcore.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/live2d.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.6.5.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi-live2d-display.index.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi-live2d-display.extra.js"></script>

<canvas id=canvas></canvas>

<div id="control"></div>
 
  
      <script  >
const cubism2Model =
"//repo.bfw.wiki/bfwrepo/images/live2d/live2d-widget-model-shizuku/assets/shizuku.model.json";
const cubism4Model =
"//repo.bfw.wiki/bfwrepo/images/live2dm3/Haru/Haru.model3.json";

const live2d = PIXI.live2d;

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


  const models = await Promise.all([
  live2d.Live2DModel.from(cubism2Model),
  live2d.Live2DModel.from(cubism4Model)]);


  models.forEach(model => {
    app.stage.addChild(model);

    const scaleX = innerWidth * 0.4 / model.width;
    const scaleY = innerHeight * 0.8 / model.height;

    // fit the window
    model.scale.set(Math.min(scaleX, scaleY));

    model.y = innerHeight * 0.1;

    draggable(model);
    addFrame(model);
    addHitAreaFrames(model);
  });
 

  const model2 = models[0];
  const model4 = models[1];
 console.log(model4);


  model2.x = (innerWidth - model2.width - model4.width) / 2;
  model4.x = model2.x + model2.width;

  // handle tapping

  model2.on("hit", hitAreas => {
    if (hitAreas.includes("body")) {
        model2.........完整代码请登录后点击上方下载按钮下载查看