Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_loader_mmd.html 6.2 KB
Newer Older
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 
<!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">
		<style>
			body {
				font-family: Monospace;
				background-color: #fff;
				color: #000;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				color: #000;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;
			}
			#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
		</style>
	</head>

	<body>
		<div id="info">
		<a href="http://threejs.org" target="_blank">three.js</a> - MMDLoader test<br />
		Copyright
T
MMDLoader enhancement  
takahiro 已提交
32 33 
		<a href="http://www.geocities.jp/higuchuu4/index_e.htm" target="_blank">Model Data</a>
		<a href="http://www.nicovideo.jp/watch/sm13147122" target="_blank">Dance Data</a>
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
34 35 
		</div>
W
Examples: three.min.js -> three.js  
WestLangley 已提交
36 
		<script src="../build/three.js"></script>
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
37
T
Use MMD Parser (#10110)  
Takahiro 已提交
38 
		<script src="js/libs/mmdparser.min.js"></script>
T
Physics support for THREE.MMDLoader.  
takahiro 已提交
39 
		<script src="js/libs/ammo.js"></script>
T
Export OutlineDrawingPass from MMDHelper to make it reusable (#9868)  
Takahiro 已提交
40
T
MMDLoader enhancement  
takahiro 已提交
41 
		<script src="js/loaders/TGALoader.js"></script>
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
42 
		<script src="js/loaders/MMDLoader.js"></script>
T
Export OutlineDrawingPass from MMDHelper to make it reusable (#9868)  
Takahiro 已提交
43 
		<script src="js/effects/OutlineEffect.js"></script>
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
44 
		<script src="js/animation/CCDIKSolver.js"></script>
T
Physics support for THREE.MMDLoader.  
takahiro 已提交
45 
		<script src="js/animation/MMDPhysics.js"></script>
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
46
T
MMD example enhancement (#10023)  
Takahiro 已提交
47 48 
		<script src="js/controls/OrbitControls.js"></script>
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
49 50 
		<script src="js/Detector.js"></script>
		<script src="js/libs/stats.min.js"></script>
T
MMD example enhancement (#10023)  
Takahiro 已提交
51 
		<script src="js/libs/dat.gui.min.js"></script>
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
52 53 54 55 56 

		<script>

			var container, stats;
T
MMDLoader enhancement  
takahiro 已提交
57 
			var mesh, camera, scene, renderer;
T
Add CCDIKHelper (#9996)  
Takahiro 已提交
58 
			var helper, ikHelper, physicsHelper;
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
59
T
Physics support for THREE.MMDLoader.  
takahiro 已提交
60 
			var mouseX = 0, mouseY = 0;
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			var clock = new THREE.Clock();

			init();
			animate();

			function init() {

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

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
T
MMD example enhancement (#10023)  
Takahiro 已提交
76 
				camera.position.z = 30;
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
77 78 79 80 81 

				// scene

				scene = new THREE.Scene();
T
Add missing semicolon in webgl_loader_mmd  
Tristan Valcke 已提交
82 
				var gridHelper = new THREE.GridHelper( 100, 100 );
T
MMD example enhancement (#10023)  
Takahiro 已提交
83 84 85 
				gridHelper.position.y = -10;
				scene.add( gridHelper );
T
MMDLoader enhancement  
takahiro 已提交
86 
				var ambient = new THREE.AmbientLight( 0x666666 );
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
87 88 
				scene.add( ambient );
T
MMDLoader enhancement  
takahiro 已提交
89 
				var directionalLight = new THREE.DirectionalLight( 0x887766 );
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
90 91 92 
				directionalLight.position.set( -1, 1, 1 ).normalize();
				scene.add( directionalLight );
T
MMDLoader enhancement  
takahiro 已提交
93 94 
				//
T
Add antialias option for WebGLRenderer to MMD examples (#9667)  
Takahiro 已提交
95 
				renderer = new THREE.WebGLRenderer( { antialias: true } );
T
MMDLoader enhancement  
takahiro 已提交
96 97 98 99 100 
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setClearColor( new THREE.Color( 0xffffff ) );
				container.appendChild( renderer.domElement );
T
MMD example enhancement (#10023)  
Takahiro 已提交
101 102 103 104 105 
				// STATS

				stats = new Stats();
				container.appendChild( stats.dom );
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
106 107 108 109 110 111 112 113 114 115 116 117 
				// model

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

				var onError = function ( xhr ) {
				};
T
MMDLoader enhancement  
takahiro 已提交
118 
				var modelFile = 'models/mmd/miku/miku_v2.pmd';
T
MMD assets license (#10062)  
Takahiro 已提交
119 
				var vmdFiles = [ 'models/mmd/vmds/wavefile_v2.vmd' ];
T
MMDLoader enhancement  
takahiro 已提交
120 121 122 

				helper = new THREE.MMDHelper( renderer );
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
123 
				var loader = new THREE.MMDLoader();
T
MMDLoader enhancement  
takahiro 已提交
124 125 

				loader.load( modelFile, vmdFiles, function ( object ) {
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
126 127 128 

					mesh = object;
					mesh.position.y = -10;
T
MMD example enhancement (#10023)  
Takahiro 已提交
129 
					scene.add( mesh );
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
130
T
MMDLoader enhancement  
takahiro 已提交
131 132 
					helper.add( mesh );
					helper.setAnimation( mesh );
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
133
T
MMD example enhancement (#10023)  
Takahiro 已提交
134 135 136 
					/*
					 * Note: create CCDIKHelper after calling helper.setAnimation()
					 */
T
Add CCDIKHelper (#9996)  
Takahiro 已提交
137 
					ikHelper = new THREE.CCDIKHelper( mesh );
T
MMD example enhancement (#10023)  
Takahiro 已提交
138 
					ikHelper.visible = false;
T
Add CCDIKHelper (#9996)  
Takahiro 已提交
139 140 
					scene.add( ikHelper );
T
MMDLoader enhancement  
takahiro 已提交
141 
					/*
T
MMDPhysics improvement (#9989)  
Takahiro 已提交
142 143 
					 * Note: You're recommended to call helper.setPhysics()
					 *       after calling helper.setAnimation().
T
MMDLoader enhancement  
takahiro 已提交
144 
			 		 */
T
MMD example enhancement (#10023)  
Takahiro 已提交
145 146 147 148 
					helper.setPhysics( mesh );
					physicsHelper = new THREE.MMDPhysicsHelper( mesh );
					physicsHelper.visible = false;
					scene.add( physicsHelper );
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
149
T
Clean up some Animation related codes for MMDLoader  
takahiro 已提交
150 
					helper.unifyAnimationDuration( { afterglow: 2.0 } );
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
151
T
MMD example enhancement (#10023)  
Takahiro 已提交
152 
					initGui();
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
153
T
MMDLoader enhancement  
takahiro 已提交
154 
				}, onProgress, onError );
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
155
T
MMD example enhancement (#10023)  
Takahiro 已提交
156 157 
				var controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.update();
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
158 159 160 

				window.addEventListener( 'resize', onWindowResize, false );
T
MMD example enhancement (#10023)  
Takahiro 已提交
161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 
				function initGui () {

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

					var gui = new dat.GUI();

					gui.add( api, 'animation' ).onChange( function () {
						helper.doAnimation = api[ 'animation' ];
					} );

					gui.add( api, 'gradient mapping' ).onChange( function () {

						for ( var i = 0, il = mesh.material.materials.length; i < il; i ++ ) {

							var material = mesh.material.materials[ i ].uniforms.celShading.value = api[ 'gradient mapping' ] ? 1 : 0;

						}

					} );

					gui.add( api, 'ik' ).onChange( function () {
						helper.doIk = api[ 'ik' ];
					} );

					gui.add( api, 'outline' ).onChange( function () {
						helper.doOutlineDrawing = api[ 'outline' ];
					} );

					gui.add( api, 'physics' ).onChange( function () {
						helper.enablePhysics( 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' ];
					} );

				}
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
211 212 213 214 215 216 217 218 219 220 
			}

			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
T
Export OutlineDrawingPass from MMDHelper to make it reusable (#9868)  
Takahiro 已提交
221 
				helper.setSize( window.innerWidth, window.innerHeight );
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
222 223 224 225 226 227 228 229 

			}

			//

			function animate() {

				requestAnimationFrame( animate );
T
MMD example enhancement (#10023)  
Takahiro 已提交
230 231 

				stats.begin();
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
232 
				render();
T
MMD example enhancement (#10023)  
Takahiro 已提交
233 
				stats.end();
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
234 235 236 237 238 

			}

			function render() {
T
Physics support for THREE.MMDLoader.  
takahiro 已提交
239 240 
				if ( mesh ) {
T
MMDLoader enhancement  
takahiro 已提交
241 
					helper.animate( clock.getDelta() );
T
MMD example enhancement (#10023)  
Takahiro 已提交
242 243 
					if ( physicsHelper.visible ) physicsHelper.update();
					if ( ikHelper.visible ) ikHelper.update();
T
MMDLoader enhancement  
takahiro 已提交
244 
					helper.render( scene, camera );
T
Physics support for THREE.MMDLoader.  
takahiro 已提交
245
T
MMDLoader enhancement  
takahiro 已提交
246 
				} else {
T
Physics support for THREE.MMDLoader.  
takahiro 已提交
247
T
MMDLoader enhancement  
takahiro 已提交
248 
					renderer.render( scene, camera );
T
Physics support for THREE.MMDLoader.  
takahiro 已提交
249 250 251 252 253 

				}

			}
T
THREE.MMDLoader and its example implementation.  
takahiro 已提交
254 255 256 257 
		</script>

	</body>
</html>