<!DOCTYPE html> <html lang="en"> <head> <title>three.js - platformer demo</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 { background-color: rgb(200,200,200); margin: 0px; overflow: hidden; } #info { position: absolute; top: 0px; width: 100%; color: #ffffff; padding: 5px; font-family:Monospace; font-size:13px; font-weight: bold; text-align:center; } a { color: #ffffff; } </style> </head> <body> <div id="container"></div> <div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - platformer demo. cubemap by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a>.<br />Use arrow keys to look around and WASD to move.</div> <script src="../build/three.min.js"></script> <script> // player motion parameters var motion = { airborne : false, position : new THREE.Vector3(), velocity : new THREE.Vector3(), rotation : new THREE.Vector2(), spinning : new THREE.Vector2() }; motion.position.y = -150; // game systems code var resetPlayer = function() { if( motion.position.y < -123 ) { motion.position.set( -2, 7.7, 25 ); motion.velocity.multiplyScalar( 0 ); } }; var keyboardControls = (function() { var keys = { SP : 32, W : 87, A : 65, S : 83, D : 68, UP : 38, LT : 37, DN : 40, RT : 39 }; var keysPressed = {}; (function( watchedKeyCodes ) { var handler = function( down ) { return function( e ) { var index = watchedKeyCodes.indexOf( e.keyCode ); if( index >= 0 ) { keysPressed[watchedKeyCodes[index]] = down; e.preventDefault(); } }; } window.addEventListener( "keydown", handler( true ), false ); window.addEventListener( "keyup", handler( false ), false ); })([ keys.SP, keys.W, keys.A, keys.S, keys.D, keys.UP, keys.LT, keys.DN, keys.RT ]); var forward = new THREE.Vector3(); var sideways = new THREE.Vector3(); return function() { if( !motion.airborne ) { // look around var sx = keysPressed[keys.UP] ? 0.03 : ( keysPressed[keys.DN] ? -0.03 : 0 ); var sy = keysPressed[keys.LT] ? 0.03 : ( keysPressed[keys.RT] ? -0.03 : 0 ); if( Math.abs( sx ) >= Math.abs( motion.spinning.x ) ) motion.spinning.x = sx; if( Math.abs( sy ) >= Math.abs( motion.spinning.y ) ) motion.spinning.y = sy; // move around forward.set( Math.sin( motion.rotation.y ), 0, Math.cos( motion.rotation.y ) ); sideways.set( forward.z, 0, -forward.x ); forward.multiplyScalar( keysPressed[keys.W] ? -0.1 : (keysPressed[keys.S] ? 0.1 : 0)); sideways.multiplyScalar( keysPressed[keys.A] ? -0.1 : (keysPressed[keys.D] ? 0.1 : 0)); var combined = forward.add( sideways ); if( Math.abs( combined.x ) >= Math.abs( motion.velocity.x ) ) motion.velocity.x = combined.x; if( Math.abs( combined.y ) >= Math.abs( motion.velocity.y ) ) motion.velocity.y = combined.y; if( Math.abs( combined.z ) >= Math.abs( motion.velocity.z ) ) motion.velocity.z = combined.z; } }; })(); var jumpPads = (function() { var pads = [ new THREE.Vector3( -17.5, 8, -10 ), new THREE.Vector3( 17.5, 8, -10 ), new THREE.Vector3( 0, 8, 21 ) ]; var temp = new THREE.Vector3(); return function() { if( !motion.airborne ) { for( var j = 0, n = pads.length; j < n; j++ ) { if ( pads[j].distanceToSquared( motion.position ) < 2.3 ) { // calculate velocity towards another side of platform from jump pad position temp.copy( pads[j] ); temp.y = 0; temp.setLength( -0.8 ); temp.y = 0.7; motion.airborne = true; motion.velocity.copy( temp ); break; } } } }; })(); var applyPhysics = (function() { var timeStep = 5; var timeLeft = timeStep + 1; var birdsEye = 100; var kneeDeep = 0.4; var raycaster = new THREE.Raycaster(); raycaster.ray.direction.set( 0, -1, 0 ); var angles = new THREE.Vector2(); var displacement = new THREE.Vector3(); return function( dt ) { var platform = scene.getObjectByName( "platform", true ); if( platform ) { timeLeft += dt; // run several fixed-step iterations to approximate varying-step dt = 5; while( timeLeft >= dt ) { var time = 0.3, damping = 0.93, gravity = 0.01, tau = 2 * Math.PI; raycaster.ray.origin.copy( motion.position ); raycaster.ray.origin.y += birdsEye; var hits = raycaster.intersectObject( platform ); motion.airborne = true; // are we above, or at most knee deep in, the platform? if( ( hits.length > 0 ) && ( hits[0].face.normal.y > 0 ) ) { var actualHeight = hits[0].distance - birdsEye; // collision: stick to the surface if landing on it if( ( motion.velocity.y <= 0 ) && ( Math.abs( actualHeight ) < kneeDeep ) ) { motion.position.y -= actualHeight; motion.velocity.y = 0; motion.airborne = false; } } if( motion.airborne ) motion.velocity.y -= gravity; angles.copy( motion.spinning ).multiplyScalar( time ); if( !motion.airborne ) motion.spinning.multiplyScalar( damping ); displacement.copy( motion.velocity ).multiplyScalar( time ); if( !motion.airborne ) motion.velocity.multiplyScalar( damping ); motion.rotation.add( angles ); motion.position.add( displacement ); // limit the tilt at ±0.4 radians motion.rotation.x = Math.max( -0.4, Math.min ( +0.4, motion.rotation.x ) ); // wrap horizontal rotation to 0...2π motion.rotation.y += tau; motion.rotation.y %= tau; timeLeft -= dt; } } }; })(); var updateCamera = (function() { var euler = new THREE.Euler( 0, 0, 0, 'YXZ' ); return function() { euler.x = motion.rotation.x; euler.y = motion.rotation.y; camera.quaternion.setFromEuler( euler ); camera.position.copy( motion.position ); camera.position.y += 3.0; }; })(); // init 3D stuff function makeSkybox( urls, size ) { var skyboxCubemap = THREE.ImageUtils.loadTextureCube( urls ); skyboxCubemap.format = THREE.RGBFormat; var skyboxShader = THREE.ShaderLib['cube']; skyboxShader.uniforms['tCube'].value = skyboxCubemap; return new THREE.Mesh( new THREE.BoxGeometry( size, size, size ), new THREE.ShaderMaterial({ fragmentShader : skyboxShader.fragmentShader, vertexShader : skyboxShader.vertexShader, uniforms : skyboxShader.uniforms, depthWrite : false, side : THREE.BackSide }) ); }; function makePlatform( jsonUrl, textureUrl, textureQuality ) { var placeholder = new THREE.Object3D(); var texture = THREE.ImageUtils.loadTexture( textureUrl ); texture.minFilter = THREE.LinearFilter; texture.anisotropy = textureQuality; var loader = new THREE.JSONLoader(); loader.load( jsonUrl, function( geometry ) { geometry.computeFaceNormals(); var platform = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({ map : texture }) ); platform.name = "platform"; placeholder.add( platform ); }); return placeholder; }; var renderer = new THREE.WebGLRenderer({ antialias : true }); renderer.setPixelRatio( window.devicePixelRatio ); var camera = new THREE.PerspectiveCamera( 60, 1, 0.1, 9000 ); var scene = new THREE.Scene(); scene.add( camera ); scene.add( makeSkybox( [ 'textures/cube/skybox/px.jpg', // right 'textures/cube/skybox/nx.jpg', // left 'textures/cube/skybox/py.jpg', // top 'textures/cube/skybox/ny.jpg', // bottom 'textures/cube/skybox/pz.jpg', // back 'textures/cube/skybox/nz.jpg' // front ], 8000 )); scene.add( makePlatform( 'models/platform/platform.json', 'models/platform/platform.jpg', renderer.getMaxAnisotropy() )); // start the game var start = function( gameLoop, gameViewportSize ) { var resize = function() { var viewport = gameViewportSize(); renderer.setSize( viewport.width, viewport.height ); camera.aspect = viewport.width / viewport.height; camera.updateProjectionMatrix(); }; window.addEventListener( 'resize', resize, false ); resize(); var lastTimeStamp; var render = function( timeStamp ) { var timeElapsed = lastTimeStamp ? timeStamp - lastTimeStamp : 0; lastTimeStamp = timeStamp; // call our game loop with the time elapsed since last rendering, in ms gameLoop( timeElapsed ); renderer.render( scene, camera ); requestAnimationFrame( render ); }; requestAnimationFrame( render ); }; var gameLoop = function( dt ) { resetPlayer(); keyboardControls(); jumpPads(); applyPhysics( dt ); updateCamera(); }; var gameViewportSize = function() { return { width: window.innerWidth, height: window.innerHeight }}; document.getElementById( 'container' ).appendChild( renderer.domElement ); start( gameLoop, gameViewportSize ); </script> </body> </html>