jomin398

mmd model Loader

Jul 21st, 2021
1,061
18 days
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import * as THREE from 'https://cdn.skypack.dev/three@v0.130.0';
  2.         import Stats from 'https://cdn.skypack.dev/three@v0.130.0/examples/jsm/libs/stats.module.js';
  3.         import {
  4.             GUI
  5.         } from 'https://cdn.skypack.dev/three@v0.130.0/examples/jsm/libs/dat.gui.module.js';
  6.         import {
  7.             OutlineEffect
  8.         } from 'https://cdn.skypack.dev/three@v0.130.0/examples/jsm/effects/OutlineEffect.js'; // './jsm/effects/OutlineEffect.js';
  9.         import {
  10.             MMDLoader
  11.         } from 'https://cdn.skypack.dev/three@v0.130.0/examples/jsm/loaders/MMDLoader.js'; // './jsm/loaders/MMDLoader.js';
  12.         import {
  13.             MMDAnimationHelper
  14.         } from 'https://cdn.skypack.dev/three@v0.130.0/examples/jsm/animation/MMDAnimationHelper.js'; //'./jsm/animation/MMDAnimationHelper.js';
  15.         import {
  16.             OrbitControls
  17.         } from 'https://cdn.skypack.dev/three@v0.130.0/examples/jsm/controls/OrbitControls.js';
  18.         let stats;
  19.         let mesh, camera, scene, renderer, effect;
  20.         let helper, ikHelper, physicsHelper;
  21.         const clock = new THREE.Clock();
  22.  
  23.         function init(cmFName, isColorTranf) {
  24.             if (!cmFName) {
  25.                 //set default model file.
  26.             cmFName = "Tda式初音ミクV4X_Ver1.00/Tda式初音ミクV4X_Ver1.00.pmx";
  27.             }
  28.             const container = document.createElement('div');
  29.             document.querySelector('#masthead div div#character-detail div').appendChild(container);
  30.             camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
  31.             camera.position.z = 30;
  32.             // scene
  33.             scene = new THREE.Scene();
  34.             scene.background = new THREE.Color(0xffffff);
  35.             if (isColorTranf) {
  36.                 scene.background = null;
  37.             };
  38.             const gridHelper = new THREE.PolarGridHelper(30, 10);
  39.             gridHelper.position.y = -10;
  40.             scene.add(gridHelper);
  41.             const ambient = new THREE.AmbientLight(0x666666);
  42.             scene.add(ambient);
  43.             const directionalLight = new THREE.DirectionalLight(0x887766);
  44.             directionalLight.position.set(-1, 1, 1).normalize();
  45.             scene.add(directionalLight);
  46.             //
  47.             renderer = new THREE.WebGLRenderer({
  48.                 antialias: true
  49.             });
  50.             renderer.setPixelRatio(window.devicePixelRatio);
  51.             renderer.setSize(window.innerWidth, window.innerHeight);
  52.             container.appendChild(renderer.domElement);
  53.             effect = new OutlineEffect(renderer);
  54.             // STATS
  55.             stats = new Stats();
  56.             document.body.appendChild(stats.dom);
  57.             // model
  58.             function onProgress(xhr) {
  59.                 if (xhr.lengthComputable) {
  60.                     const percentComplete = xhr.loaded / xhr.total * 100;
  61.                     console.log(Math.round(percentComplete, 2) + '% downloaded');
  62.                 }
  63.             }
  64.             const modelFile = './assets/models/mmd/' + cmFName;
  65.             const vmdFiles = ['./assets/exVmds/realistic standing/Realistic Standing.vmd'];
  66.             helper = new MMDAnimationHelper({
  67.                 afterglow: 2.0
  68.             });
  69.             const loader = new MMDLoader();
  70.             loader.loadWithAnimation(modelFile, vmdFiles, function(mmd) {
  71.                 mesh = mmd.mesh;
  72.                 mesh.position.y = -10;
  73.                 scene.add(mesh);
  74.                 helper.add(mesh, {
  75.                     animation: mmd.animation,
  76.                     physics: true
  77.                 });
  78.                 ikHelper = helper.objects.get(mesh).ikSolver.createHelper();
  79.                 ikHelper.visible = false;
  80.                 scene.add(ikHelper);
  81.                 physicsHelper = helper.objects.get(mesh).physics.createHelper();
  82.                 physicsHelper.visible = false;
  83.                 scene.add(physicsHelper);
  84.                 initGui();
  85.             }, onProgress, null);
  86.             const controls = new OrbitControls(camera, renderer.domElement);
  87.             controls.minDistance = 10;
  88.             controls.maxDistance = 100;
  89.             window.addEventListener('resize', onWindowResize);
  90.  
  91.             function initGui() {
  92.                 const api = {
  93.                     'animation': true,
  94.                     'ik': true,
  95.                     'outline': true,
  96.                     'physics': true,
  97.                     'show IK bones': false,
  98.                     'show rigid bodies': false
  99.                 };
  100.                 const gui = new GUI();
  101.                 gui.add(api, 'animation').onChange(function() {
  102.                     helper.enable('animation', api['animation']);
  103.                 });
  104.                 gui.add(api, 'ik').onChange(function() {
  105.                     helper.enable('ik', api['ik']);
  106.                 });
  107.                 gui.add(api, 'outline').onChange(function() {
  108.                     effect.enabled = api['outline'];
  109.                 });
  110.                 gui.add(api, 'physics').onChange(function() {
  111.                     helper.enable('physics', api['physics']);
  112.                 });
  113.                 gui.add(api, 'show IK bones').onChange(function() {
  114.                     ikHelper.visible = api['show IK bones'];
  115.                 });
  116.                 gui.add(api, 'show rigid bodies').onChange(function() {
  117.                     if (physicsHelper !== undefined) physicsHelper.visible = api['show rigid bodies'];
  118.                 });
  119.             }
  120.         }
  121.  
  122.         function onWindowResize() {
  123.             camera.aspect = window.innerWidth / window.innerHeight;
  124.             camera.updateProjectionMatrix();
  125.             effect.setSize(window.innerWidth, window.innerHeight);
  126.         }
  127.         //
  128.         function render() {
  129.             helper.update(clock.getDelta());
  130.             effect.render(scene, camera);
  131.         }
  132.  
  133.         function animate() {
  134.             requestAnimationFrame(animate);
  135.             stats.begin();
  136.             render();
  137.             stats.end();
  138.         }
  139. // this is remove function when press btn.
  140.         window.clearModel = function() {
  141.         scene.remove( mesh );
  142.        
  143.         //document.querySelector('#masthead div div#character-detail div div:nth-child(2)').remove();
  144.         }
  145.         window.readyComp = function(cmFName, isColorTranf) {
  146.             console.log("Model", "onLoad");
  147.             if (typeof Ammo == 'function') {
  148.                 Ammo().then(function() {
  149.                     init(cmFName, isColorTranf);
  150.                     animate();
  151.                 });
  152.             } else {
  153.                 init(cmFName, isColorTranf);
  154.                 animate();
  155.             }
  156.         };
RAW Paste Data