master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_loader_vrm.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - vrm 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">
  </head>

  <body>
    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - VRMLoader<br />
      Alicia by
      <a href="https://3d.nicovideo.jp/works/td32797" target="_blank" rel="noopener">Dwango</a> /
      <a href="http://3d.nicovideo.jp/alicia/rule.html">License</a><br />
    </div>

    <script type="module">

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

      import Stats from './jsm/libs/stats.module.js';

      import { OrbitControls } from './jsm/controls/OrbitControls.js';
      import { VRMLoader } from './jsm/loaders/VRMLoader.js';

      let container, stats, controls;
      let camera, scene, renderer, light;

      init();
      animate();

      function init() {

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

        camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
        camera.position.set(0, 1.6, - 2.2);

        scene = new v3d.Scene();

        light = new v3d.HemisphereLight(0xbbbbff, 0x444422);
        light.position.set(0, 1, 0);
        scene.add(light);

        // model
        const loader = new VRMLoader();
        loader.load('models/vrm/Alicia/AliciaSolid.vrm', function(vrm) {

          // VRMLoader doesn't support VRM Unlit extension yet so
          // converting all materials to v3d.MeshBasicMaterial here as workaround so far.
          vrm.scene.traverse(function(object) {

            if (object.material) {

              if (Array.isArray(object.material)) {

                for (let i = 0, il = object.material.length; i < il; i++) {

                  const material = new v3d.MeshBasicMaterial();
                  v3d.Material.prototype.copy.call(material, object.material[i]);
                  material.color.copy(object.material[i].color);
                  material.map = object.material[i].map;
                  material.skinning = object.material[i].skinning;
                  material.morphTargets = object.material[i].morphTargets;
                  material.morphNormals = object.material[i].morphNormals;
                  object.material[i] = material;

                }

              } else {

                const material = new v3d.MeshBasicMaterial();
                v3d.Material.prototype.copy.call(material, object.material);
                material.color.copy(object.material.color);
                material.map = object.material.map;
                material.skinning = object.material.skinning;
                material.morphTargets = object.material.morphTargets;
                material.morphNormals = object.material.morphNormals;
                object.material = material;

              }

            }

          });

          scene.add(vrm.scene);

        });

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

        controls = new OrbitControls(camera, renderer.domElement);
        controls.minDistance = 1;
        controls.maxDistance = 5;
        controls.enableDamping = true;
        controls.target.set(0, 0.9, 0);
        controls.update();

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

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

      }

      function onWindowResize() {

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

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

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        controls.update(); // to support damping

        renderer.render(scene, camera);

        stats.update();

      }

    </script>

  </body>
</html>