live2dDemo/index.html at master · summerscar/live2dDemo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Live2d Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app">
      width: <input type="text" id="twidth" value="300"><br>
      height: <input type="text" id="theight" value="400"><br>
      modelName: <input type="text" id="tmodelName" value="hijiki"><br>
      headPos: <input type="text" id="theadPos" value="0.5"><br>
      scaling: <input type="text" id="tscaling" value="2"><br>
      opacityDefault: <input type="text" id="topacityDefault" value="0.7"><br>
      opacityHover: <input type="text" id="topacityHover" value="1"><br>
      <input type="button" value="GO!" onclick="javascript:myfunc()">
      <div>
        <canvas id="live2dcanvas" width="300" height="400" style="border:dashed 1px #CCC"></canvas>
      </div>
    </div>
    <style>
      #live2dcanvas{
        width: 300;
        height: 400;
      }

    </style>
  <script type="text/javascript" src="device.min.js"></script>

  <script language="JAVASCRIPT">
  function myfunc (){
    var width = document.getElementById("twidth").value;
    var height = document.getElementById("theight").value;
    var modelName = document.getElementById("tmodelName").value;
    var headPos = document.getElementById("theadPos").value;
    var scaling = document.getElementById("tscaling").value;
    var opacityDefault = document.getElementById("topacityDefault").value;
    var opacityHover = document.getElementById("topacityHover").value;
    var modelUrl="./assets/name/name.model.json";
    document.getElementById("live2dcanvas").style.width = width + 'px';
    document.getElementById("live2dcanvas").style.height = height + 'px';
    modelUrl = modelUrl.replace(/name/g, modelName);
    console.log(modelUrl);
    // 传入id, 模型path, 重心， 缩放， 默认透明， hover透明度
    loadlive2d("live2dcanvas", modelUrl);
  }

  </script>
  <script type="text/javascript" src="bundle.js"></script></body>
  </html>