danpaldev/mmd_loader.html

## mmd_loader.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>three.js 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>
    <script src="jsm/libs/ammo.wasm.js"></script>

    <script type="importmap">
      {
        "imports": {
          "three": "./build/three.module.js",
          "three/addons/": "./jsm/"
        }
      }
    </script>

    <script type="module">
      import * as THREE from "three";

      import { GUI } from "three/addons/libs/lil-gui.module.min.js";

      import { OutlineEffect } from "three/addons/effects/OutlineEffect.js";
      import { MMDLoader } from "three/addons/loaders/MMDLoader.js";
      import { MMDAnimationHelper } from "three/addons/animation/MMDAnimationHelper.js";
      import { OrbitControls } from "three/addons/controls/OrbitControls.js";

      let camera, scene, renderer, effect;
      let mesh, helper;
      let controls;

      Ammo().then(function (AmmoLib) {
        Ammo = AmmoLib;

        init();
        animate();
      });

      function setCameraPositionByDegrees(degrees) {
        const radians = THREE.MathUtils.degToRad(degrees);
        const distance = 5.0;
        const height = 8.0;
        const x = distance * Math.sin(radians);
        const z = distance * Math.cos(radians);
        return { x: x, y: height, z: z };
      }

      function init() {
        const container = document.createElement("div");
        document.body.appendChild(container);

        const frustumSize = 20;

        const aspect = window.innerWidth / window.innerHeight;

        camera = new THREE.OrthographicCamera(
          (frustumSize * aspect) / -2,
          (frustumSize * aspect) / 2,
          frustumSize / 2,
          frustumSize / -2,
          1,
          1000
        );

        const cameraPosition = setCameraPositionByDegrees(0);
        camera.position.set(
          cameraPosition.x,
          cameraPosition.y,
          cameraPosition.z
        );

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

        const ambient = new THREE.AmbientLight(0xaaaaaa, 4.1);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
        directionalLight.position.set(0, 0, -1);
        scene.add(directionalLight);

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

        effect = new OutlineEffect(renderer);

        controls = new OrbitControls(camera, renderer.domElement);
        controls.target.set(0, 8, 0);
        controls.update();

        function onProgress(xhr) {
          if (xhr.lengthComputable) {
            const percentComplete = (xhr.loaded / xhr.total) * 100;
            console.log(Math.round(percentComplete, 2) + "% downloaded");
          }
        }

        const modelFile = "models/mmd/cat_girl/ヨッシー式ラインクラフト.pmx";

        helper = new MMDAnimationHelper();

        const loader = new MMDLoader();

        loader.load(
          modelFile,
          function (object) {
            mesh = object;
            console.log(mesh);
            mesh.position.y = -10;

            scene.add(mesh);

            initGui();
          },
          onProgress,
          null
        );

        window.addEventListener("resize", onWindowResize);
      }

      function initGui() {
        const gui = new GUI();
        const morphs = gui.addFolder("Morphs");
        const morphTargetDictionary = mesh.morphTargetDictionary;
        const morphTargetInfluences = mesh.morphTargetInfluences;

        Object.keys(morphTargetDictionary).forEach((key) => {
          const index = morphTargetDictionary[key];
          gui.add(morphTargetInfluences, index, 0, 1, 0.01).name(key);
        });

        morphs.open();
      }

      function onWindowResize() {
        const aspect = window.innerWidth / window.innerHeight;
        camera.left = (-frustumSize * aspect) / 2;
        camera.right = (frustumSize * aspect) / 2;
        camera.top = frustumSize / 2;
        camera.bottom = -frustumSize / 2;

        camera.updateProjectionMatrix();

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

      function animate() {
        requestAnimationFrame(animate);
        controls.update();
        render();
      }

      function render() {
        effect.render(scene, camera);
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>three.js 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>
	<script src="jsm/libs/ammo.wasm.js"></script>

	<script type="importmap">
	{
	"imports": {
	"three": "./build/three.module.js",
	"three/addons/": "./jsm/"
	}
	}
	</script>

	<script type="module">
	import * as THREE from "three";

	import { GUI } from "three/addons/libs/lil-gui.module.min.js";

	import { OutlineEffect } from "three/addons/effects/OutlineEffect.js";
	import { MMDLoader } from "three/addons/loaders/MMDLoader.js";
	import { MMDAnimationHelper } from "three/addons/animation/MMDAnimationHelper.js";
	import { OrbitControls } from "three/addons/controls/OrbitControls.js";

	let camera, scene, renderer, effect;
	let mesh, helper;
	let controls;

	Ammo().then(function (AmmoLib) {
	Ammo = AmmoLib;

	init();
	animate();
	});

	function setCameraPositionByDegrees(degrees) {
	const radians = THREE.MathUtils.degToRad(degrees);
	const distance = 5.0;
	const height = 8.0;
	const x = distance * Math.sin(radians);
	const z = distance * Math.cos(radians);
	return { x: x, y: height, z: z };
	}

	function init() {
	const container = document.createElement("div");
	document.body.appendChild(container);

	const frustumSize = 20;

	const aspect = window.innerWidth / window.innerHeight;

	camera = new THREE.OrthographicCamera(
	(frustumSize * aspect) / -2,
	(frustumSize * aspect) / 2,
	frustumSize / 2,
	frustumSize / -2,
	1,
	1000
	);

	const cameraPosition = setCameraPositionByDegrees(0);
	camera.position.set(
	cameraPosition.x,
	cameraPosition.y,
	cameraPosition.z
	);

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

	const ambient = new THREE.AmbientLight(0xaaaaaa, 4.1);

	const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
	directionalLight.position.set(0, 0, -1);
	scene.add(directionalLight);

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

	effect = new OutlineEffect(renderer);

	controls = new OrbitControls(camera, renderer.domElement);
	controls.target.set(0, 8, 0);
	controls.update();

	function onProgress(xhr) {
	if (xhr.lengthComputable) {
	const percentComplete = (xhr.loaded / xhr.total) * 100;
	console.log(Math.round(percentComplete, 2) + "% downloaded");
	}
	}

	const modelFile = "models/mmd/cat_girl/ヨッシー式ラインクラフト.pmx";

	helper = new MMDAnimationHelper();

	const loader = new MMDLoader();

	loader.load(
	modelFile,
	function (object) {
	mesh = object;
	console.log(mesh);
	mesh.position.y = -10;

	scene.add(mesh);

	initGui();
	},
	onProgress,
	null
	);

	window.addEventListener("resize", onWindowResize);
	}

	function initGui() {
	const gui = new GUI();
	const morphs = gui.addFolder("Morphs");
	const morphTargetDictionary = mesh.morphTargetDictionary;
	const morphTargetInfluences = mesh.morphTargetInfluences;

	Object.keys(morphTargetDictionary).forEach((key) => {
	const index = morphTargetDictionary[key];
	gui.add(morphTargetInfluences, index, 0, 1, 0.01).name(key);
	});

	morphs.open();
	}

	function onWindowResize() {
	const aspect = window.innerWidth / window.innerHeight;
	camera.left = (-frustumSize * aspect) / 2;
	camera.right = (frustumSize * aspect) / 2;
	camera.top = frustumSize / 2;
	camera.bottom = -frustumSize / 2;

	camera.updateProjectionMatrix();

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

	function animate() {
	requestAnimationFrame(animate);
	controls.update();
	render();
	}

	function render() {
	effect.render(scene, camera);
	}
	</script>
	</body>
	</html>