master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_loader_mmd.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - loaders - MMD loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
    <style>
      body {
        background-color: #fff;
        color: #444;
      }
      a {
        color: #08f;
      }
    </style>
  </head>

  <body>
    <div id="info">
    <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - MMDLoader test<br />
    <a href="https://github.com/mrdoob/three.js/tree/master/examples/models/mmd#readme" target="_blank" rel="noopener">MMD Assets license</a><br />
    Copyright
    <a href="https://sites.google.com/view/evpvp/" target="_blank" rel="noopener">Model Data</a>
    <a href="http://www.nicovideo.jp/watch/sm13147122" target="_blank" rel="noopener">Dance Data</a>
    </div>

    <script src="js/libs/ammo.wasm.js"></script>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';

      import Stats from './jsm/libs/stats.module.js';
      import { GUI } from './jsm/libs/dat.gui.module.js';

      import { OrbitControls } from './jsm/controls/OrbitControls.js';
      import { OutlineEffect } from './jsm/effects/OutlineEffect.js';
      import { MMDLoader } from './jsm/loaders/MMDLoader.js';
      import { MMDAnimationHelper } from './jsm/animation/MMDAnimationHelper.js';

      let stats;

      let mesh, camera, scene, renderer, effect;
      let helper, ikHelper, physicsHelper;

      const clock = new v3d.Clock();

      Ammo().then(function(AmmoLib) {

        Ammo = AmmoLib;

        init();
        animate();

      });


      function init() {

        const container = document.createElement('div');
        document.body.appendChild(container);

        camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.z = 30;

        // scene

        scene = new v3d.Scene();
        scene.background = new v3d.Color(0xffffff);

        const gridHelper = new v3d.PolarGridHelper(30, 10);
        gridHelper.position.y = - 10;
        scene.add(gridHelper);

        const ambient = new v3d.AmbientLight(0x666666);
        scene.add(ambient);

        const directionalLight = new v3d.DirectionalLight(0x887766);
        directionalLight.position.set(- 1, 1, 1).normalize();
        scene.add(directionalLight);

        //

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        effect = new OutlineEffect(renderer);

        // STATS

        stats = new Stats();
        container.appendChild(stats.dom);

        // model

        function onProgress(xhr) {

          if (xhr.lengthComputable) {

            const percentComplete = xhr.loaded / xhr.total * 100;
            console.log(Math.round(percentComplete, 2) + '% downloaded');

          }

        }


        const modelFile = 'models/mmd/miku/miku_v2.pmd';
        const vmdFiles = ['models/mmd/vmds/wavefile_v2.vmd'];

        helper = new MMDAnimationHelper({
          afterglow: 2.0
        });

        const loader = new MMDLoader();

        loader.loadWithAnimation(modelFile, vmdFiles, function(mmd) {

          mesh = mmd.mesh;
          mesh.position.y = - 10;
          scene.add(mesh);

          helper.add(mesh, {
            animation: mmd.animation,
            physics: true
          });

          ikHelper = helper.objects.get(mesh).ikSolver.createHelper();
          ikHelper.visible = false;
          scene.add(ikHelper);

          physicsHelper = helper.objects.get(mesh).physics.createHelper();
          physicsHelper.visible = false;
          scene.add(physicsHelper);

          initGui();

        }, onProgress, null);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.minDistance = 10;
        controls.maxDistance = 100;

        window.addEventListener('resize', onWindowResize, false);

        function initGui() {

          const api = {
            'animation': true,
            'ik': true,
            'outline': true,
            'physics': true,
            'show IK bones': false,
            'show rigid bodies': false
          };

          const gui = new GUI();

          gui.add(api, 'animation').onChange(function() {

            helper.enable('animation', api['animation']);

          });

          gui.add(api, 'ik').onChange(function() {

            helper.enable('ik', api['ik']);

          });

          gui.add(api, 'outline').onChange(function() {

            effect.enabled = api['outline'];

          });

          gui.add(api, 'physics').onChange(function() {

            helper.enable('physics', api['physics']);

          });

          gui.add(api, 'show IK bones').onChange(function() {

            ikHelper.visible = api['show IK bones'];

          });

          gui.add(api, 'show rigid bodies').onChange(function() {

            if (physicsHelper !== undefined) physicsHelper.visible = api['show rigid bodies'];

          });

        }

      }

      function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        effect.setSize(window.innerWidth, window.innerHeight);

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        stats.begin();
        render();
        stats.end();

      }

      function render() {

        helper.update(clock.getDelta());
        effect.render(scene, camera);

      }

    </script>

  </body>
</html>