<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - morphtargets - MD2</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 { color: #fff; font-family:Monospace; font-size:13px; text-align:center; font-weight: bold; background-color: #000; margin: 0px; overflow: hidden; } #info { color:#fff; position: relative; margin: 0 auto -2.1em; top: 0px; width: 70em; padding: 5px; z-index:100; } a { color: skyblue; } #stats { position: absolute; top:0; left: 0 } #stats #fps { background: transparent !important } #stats #fps #fpsText { color: #aaa !important } #stats #fps #fpsGraph { display: none } </style> </head> <body> <div id="info"> <a href="http://threejs.org" target="_blank">three.js</a> - morphtargets - MD2 character by <a href="http://planetquake.gamespy.com/View.php?view=Quake2.Detail&id=368">Brian Collins</a> - converted by <a href="https://twitter.com/#!/oosmoxiecode">@oosmoxiecode</a>'s <a href="http://oos.moxiecode.com/blog/2012/01/md2-to-json-converter/">MD2 converter<a> </div> <script src="../build/three.min.js"></script> <script src="js/controls/OrbitControls.js"></script> <script src='js/MD2Character.js'></script> <script src='js/Detector.js'></script> <script src='js/libs/stats.min.js'></script> <script src='js/libs/dat.gui.min.js'></script> <script> if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var container, camera, scene, renderer; var character; var gui, playbackConfig = { speed: 1.0, wireframe: false }; var controls; var clock = new THREE.Clock(); init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); // CAMERA camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.set( 0, 150, 400 ); // SCENE scene = new THREE.Scene(); scene.fog = new THREE.Fog( 0x050505, 400, 1000 ); // LIGHTS scene.add( new THREE.AmbientLight( 0x222222 ) ); var light = new THREE.SpotLight( 0xffffff, 2, 1000 ); light.position.set( 200, 250, 500 ); light.castShadow = true; light.shadowMapWidth = 1024; light.shadowMapHeight = 1024; light.shadowMapDarkness = 0.95; //light.shadowCameraVisible = true; scene.add( light ); var light = new THREE.SpotLight( 0xffffff, 1.5, 500 ); light.position.set( -100, 350, 250 ); light.castShadow = true; light.shadowMapWidth = 1024; light.shadowMapHeight = 1024; light.shadowMapDarkness = 0.95; //light.shadowCameraVisible = true; scene.add( light ); // GROUND var gt = THREE.ImageUtils.loadTexture( "textures/terrain/grasslight-big.jpg" ); var gg = new THREE.PlaneBufferGeometry( 2000, 2000 ); var gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } ); var ground = new THREE.Mesh( gg, gm ); ground.rotation.x = - Math.PI / 2; ground.material.map.repeat.set( 8, 8 ); ground.material.map.wrapS = ground.material.map.wrapT = THREE.RepeatWrapping; ground.receiveShadow = true; scene.add( ground ); // RENDERER renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setClearColor( scene.fog.color ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); container.appendChild( renderer.domElement ); // renderer.gammaInput = true; renderer.gammaOutput = true; renderer.shadowMapEnabled = true; // STATS stats = new Stats(); container.appendChild( stats.domElement ); // EVENTS window.addEventListener( 'resize', onWindowResize, false ); // CONTROLS controls = new THREE.OrbitControls( camera, renderer.domElement ); controls.target.set( 0, 50, 0 ); // GUI gui = new dat.GUI(); gui.add( playbackConfig, 'speed', 0, 2 ).onChange( function() { character.setPlaybackRate( playbackConfig.speed ); } ); gui.add( playbackConfig, 'wireframe', false ).onChange( function() { character.setWireframe( playbackConfig.wireframe ); } ); // CHARACTER var config = { baseUrl: "models/animated/ratamahatta/", body: "ratamahatta.js", skins: [ "ratamahatta.png", "ctf_b.png", "ctf_r.png", "dead.png", "gearwhore.png" ], weapons: [ [ "weapon.js", "weapon.png" ], [ "w_bfg.js", "w_bfg.png" ], [ "w_blaster.js", "w_blaster.png" ], [ "w_chaingun.js", "w_chaingun.png" ], [ "w_glauncher.js", "w_glauncher.png" ], [ "w_hyperblaster.js", "w_hyperblaster.png" ], [ "w_machinegun.js", "w_machinegun.png" ], [ "w_railgun.js", "w_railgun.png" ], [ "w_rlauncher.js", "w_rlauncher.png" ], [ "w_shotgun.js", "w_shotgun.png" ], [ "w_sshotgun.js", "w_sshotgun.png" ] ] }; character = new THREE.MD2Character(); character.scale = 3; character.onLoadComplete = function() { setupSkinsGUI( character ); setupWeaponsGUI( character ); setupGUIAnimations( character ); } character.loadParts( config ); scene.add( character.root ); } // EVENT HANDLERS function onWindowResize( event ) { SCREEN_WIDTH = window.innerWidth; SCREEN_HEIGHT = window.innerHeight; renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); camera.aspect = SCREEN_WIDTH/ SCREEN_HEIGHT; camera.updateProjectionMatrix(); } // GUI function labelize( text ) { var parts = text.split( "." ); if ( parts.length > 1 ) { parts.length -= 1; return parts.join( "." ); } return text; } // function setupWeaponsGUI( character ) { var folder = gui.addFolder( "Weapons" ); var generateCallback = function( index ) { return function () { character.setWeapon( index ); }; } var guiItems = []; for ( var i = 0; i < character.weapons.length; i ++ ) { var name = character.weapons[ i ].name; playbackConfig[ name ] = generateCallback( i ); guiItems[ i ] = folder.add( playbackConfig, name ).name( labelize( name ) ); } } // function setupSkinsGUI( character ) { var folder = gui.addFolder( "Skins" ); var generateCallback = function( index ) { return function () { character.setSkin( index ); }; } var guiItems = []; for ( var i = 0; i < character.skinsBody.length; i ++ ) { var name = character.skinsBody[ i ].name; playbackConfig[ name ] = generateCallback( i ); guiItems[ i ] = folder.add( playbackConfig, name ).name( labelize( name ) ); } } // function setupGUIAnimations( character ) { var folder = gui.addFolder( "Animations" ); var generateCallback = function( animationName ) { return function () { character.setAnimation( animationName ); }; } var i = 0, guiItems = []; var animations = character.meshBody.geometry.animations; for ( var a in animations ) { playbackConfig[ a ] = generateCallback( a ); guiItems[ i ] = folder.add( playbackConfig, a, a ); i ++; } } // function animate() { requestAnimationFrame( animate ); render(); stats.update(); } function render() { var delta = clock.getDelta(); controls.update(); character.update( delta ); renderer.render( scene, camera ); } </script> </body> </html>