javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
							<!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">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - platformer demo. cubemap by <a href="http://www.zfight.com/" target="_blank" rel="noopener">Jochum Skoglund</a>.<br />Use arrow keys to look around, WASD to move and SPACE to jump.</div>

		<script type="module">
			import {
				CubeTextureLoader,
				Euler,
				Object3D,
				ObjectLoader,
				PerspectiveCamera,
				Raycaster,
				RGBFormat,
				Scene,
				Vector2,
				Vector3,
				WebGLRenderer
			} from "../build/three.module.js";

			// player motion parameters

			var motion = {
				airborne: false,
				position: new Vector3(), velocity: new Vector3(),
				rotation: new Vector2(), spinning: new 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 Vector3();
				var sideways = new 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;

						//jump
 						var vy = keysPressed[ keys.SP ] ? 0.7 : 0;
 						motion.velocity.y += vy;

					}

				};

			} )();

			var jumpPads = ( function () {

				var pads = [ new Vector3( - 17.5, 8, - 10 ), new Vector3( 17.5, 8, - 10 ), new Vector3( 0, 8, 21 ) ];
				var temp = new 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 Raycaster();
				raycaster.ray.direction.set( 0, - 1, 0 );

				var angles = new Vector2();
				var displacement = new 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 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 makePlatform( url ) {

				var placeholder = new Object3D();

				var loader = new ObjectLoader();
				loader.load( url, function ( platform ) {

					placeholder.add( platform );

				} );

				return placeholder;

			}

			var renderer = new WebGLRenderer( { antialias: true } );
			renderer.setPixelRatio( window.devicePixelRatio );
			document.body.appendChild( renderer.domElement );

			var camera = new PerspectiveCamera( 60, 1, 0.1, 9000 );

			var scene = new Scene();

			var envMap = new CubeTextureLoader().load( [
				'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
			] );
			envMap.format = RGBFormat;

			scene.background = envMap;

			scene.add( makePlatform(
				'models/json/platform/platform.json'
			) );

			// 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

				};

			};

			start( gameLoop, gameViewportSize );
		</script>
	</body>
</html>