Created
June 12, 2019 22:54
-
-
Save Momijinn/0f1b0a097a1c6c68278d7832e7add179 to your computer and use it in GitHub Desktop.
TestMMD
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Miku</title> | |
| <link rel="stylesheet" href="./css/main.css" /><!-- css --> | |
| </head> | |
| <body> | |
| </body> | |
| <script src="https://cdn.rawgit.com/mrdoob/three.js/r105/build/three.js"></script> | |
| <script src="https://cdn.rawgit.com/mrdoob/three.js/r105/examples/js/libs/mmdparser.min.js"></script> | |
| <script src="https://cdn.rawgit.com/mrdoob/three.js/r103/examples/js/libs/ammo.js"></script> | |
| <script src="https://cdn.rawgit.com/mrdoob/three.js/r105/examples/js/loaders/TGALoader.js"></script> | |
| <script src="https://cdn.rawgit.com/mrdoob/three.js/r105/examples/js/loaders/MMDLoader.js"></script> | |
| <script src="https://cdn.rawgit.com/mrdoob/three.js/r105/examples/js/animation/MMDAnimationHelper.js"></script> | |
| <script src="https://cdn.rawgit.com/mrdoob/three.js/r105/examples/js/effects/OutlineEffect.js"></script> | |
| <script src="https://cdn.rawgit.com/mrdoob/three.js/r105/examples/js/animation/CCDIKSolver.js"></script> | |
| <script src="https://cdn.rawgit.com/mrdoob/three.js/r105/examples/js/animation/MMDPhysics.js"></script> | |
| <script src="./js/main.js"></script> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| margin:0; | |
| padding:0; | |
| } | |
| body{ | |
| width:100%; | |
| height:100%; | |
| overflow:hidden; | |
| } | |
| @media screen and (max-width:600px){ | |
| } | |
| @media screen and (max-width:400px){ | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let mesh, camera, scene, renderer; | |
| const windowWidth = window.innerWidth; | |
| const windowHeight = window.innerHeight; | |
| const clock = new THREE.Clock(); | |
| // set MMDloader and MMDhelper | |
| const helper = new THREE.MMDAnimationHelper({ afterglow: 2.0, resetPhysicsOnLoop: false }); | |
| const loader = new THREE.MMDLoader(); | |
| let ready = false; | |
| window.onload = function() { | |
| init(); | |
| render(); | |
| }; | |
| function init() { | |
| // create scene | |
| scene = new THREE.Scene(); | |
| // create light | |
| const ambient = new THREE.AmbientLight(0xeeeeee); | |
| scene.add(ambient); | |
| // setting renderer | |
| renderer = new THREE.WebGLRenderer({ alpha: true }); | |
| renderer.setPixelRatio(window.devicePixelRatio); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| renderer.setClearColor(0xcccccc, 0); | |
| document.body.appendChild(renderer.domElement); | |
| // create camera | |
| camera = new THREE.PerspectiveCamera(40, windowWidth / windowHeight, 1, 1000); | |
| camera.position.set(0, 18, 10); | |
| //load mmd | |
| const pmx = "./mmd/pmx/pronama/プロ生ちゃん.pmx"; | |
| loader.load(pmx, function(obj){ | |
| mesh = obj | |
| scene.add(mesh); | |
| LoadVmd('./mmd/vmd/wait.vmd'); | |
| }, | |
| onProgress, | |
| onError); | |
| // wineod resize | |
| window.addEventListener("resize", onWindowResize, false); | |
| } | |
| function onWindowResize() { | |
| windowWidth = window.innerWidth; | |
| windowHeight = window.innerHeight; | |
| camera.aspect = windowWidth / windowHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(windowWidth, windowHeight); | |
| } | |
| function render() { | |
| requestAnimationFrame(render); | |
| renderer.clear(); | |
| renderer.render(scene, camera); | |
| if ( ready ) { | |
| helper.update( clock.getDelta() ); | |
| } | |
| } | |
| /* | |
| // load VMD file | |
| // vmdPath: vmd path | |
| */ | |
| function LoadVmd( vmdPath ){ | |
| ready = false; | |
| loader.loadAnimation(vmdPath, mesh, function(anim){ | |
| helper.add(mesh,{ | |
| animation: anim, | |
| physics: true, | |
| }); | |
| const mixer = helper.objects.get( mesh ).mixer; | |
| //working | |
| mixer.addEventListener("loop", function(event){ | |
| console.log("loop"); | |
| }); | |
| //not working | |
| mixer.addEventListener("finished", function(event){ | |
| console.log("finished"); | |
| }); | |
| ready = true; | |
| }, | |
| onProgress, | |
| onError); | |
| } | |
| //MMD loading progress | |
| function onProgress( xhr ) { | |
| if ( xhr.lengthComputable ) { | |
| let percentComplete = xhr.loaded / xhr.total * 100; | |
| console.log( Math.round( percentComplete, 2 ) + '% downloaded' ); | |
| } | |
| }; | |
| // Error MMD Load | |
| function onError( xhr ) { | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment