Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_loader_mdd.html 2.2 KB
Newer Older
M
Examples: Added MDDLoader.  
Mugen87 已提交
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js WebGL - MDDLoader</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://threejs.org" target="_blank" rel="noopener">three.js</a> - MDDLoader
		</div>

		<script type="module">

			import * as THREE from '../build/three.module.js';

			import { MDDLoader } from './jsm/loaders/MDDLoader.js';

			var camera, scene, renderer, mixer, clock;

			init();

			function init() {

				scene = new THREE.Scene();

				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 100 );
				camera.position.set( 10, 10, 10 );
				camera.lookAt( scene.position );

				clock = new THREE.Clock();

				//

				var loader = new MDDLoader();
				loader.load( 'models/mdd/cube.mdd', function ( result ) {

					const morphTargets = result.morphTargets;
					const clip = result.clip;
					// clip.optimize(); // optional

					var geometry = new THREE.BoxBufferGeometry();
					geometry.morphAttributes.position = morphTargets; // apply morph targets
M
Update webgl_loader_mdd.html  
Michael Herzog 已提交
47 
					var material = new THREE.MeshNormalMaterial( { morphTargets: true } );
M
Examples: Added MDDLoader.  
Mugen87 已提交
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 

					var mesh = new THREE.Mesh( geometry, material );
					scene.add( mesh );

					mixer = new THREE.AnimationMixer( mesh );
					mixer.clipAction( clip ).play(); // use clip

					animate();

				} );

				//

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

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

			}

			function onWindowResize() {

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

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

			}

			function animate() {

				requestAnimationFrame( animate );

				var delta = clock.getDelta();

				if ( mixer ) mixer.update( delta );

				renderer.render( scene, camera );

			}

		</script>
	</body>
</html>