|
@@ -38,96 +38,122 @@
|
|
// player motion parameters
|
|
// player motion parameters
|
|
|
|
|
|
var motion = {
|
|
var motion = {
|
|
- airborne : false,
|
|
|
|
- position : new THREE.Vector3(), velocity : new THREE.Vector3(),
|
|
|
|
- rotation : new THREE.Vector2(), spinning : new THREE.Vector2()
|
|
|
|
|
|
+ airborne: false,
|
|
|
|
+ position: new THREE.Vector3(), velocity: new THREE.Vector3(),
|
|
|
|
+ rotation: new THREE.Vector2(), spinning: new THREE.Vector2()
|
|
};
|
|
};
|
|
|
|
|
|
- motion.position.y = -150;
|
|
|
|
|
|
+ motion.position.y = - 150;
|
|
|
|
|
|
|
|
|
|
// game systems code
|
|
// game systems code
|
|
|
|
|
|
- var resetPlayer = function() {
|
|
|
|
- if( motion.position.y < -123 ) {
|
|
|
|
- motion.position.set( -2, 7.7, 25 );
|
|
|
|
|
|
+ var resetPlayer = function () {
|
|
|
|
+
|
|
|
|
+ if ( motion.position.y < - 123 ) {
|
|
|
|
+
|
|
|
|
+ motion.position.set( - 2, 7.7, 25 );
|
|
motion.velocity.multiplyScalar( 0 );
|
|
motion.velocity.multiplyScalar( 0 );
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
+
|
|
};
|
|
};
|
|
|
|
|
|
- var keyboardControls = (function() {
|
|
|
|
|
|
+ var keyboardControls = ( function () {
|
|
|
|
|
|
- var keys = { SP : 32, W : 87, A : 65, S : 83, D : 68, UP : 38, LT : 37, DN : 40, RT : 39 };
|
|
|
|
|
|
+ var keys = { SP: 32, W: 87, A: 65, S: 83, D: 68, UP: 38, LT: 37, DN: 40, RT: 39 };
|
|
|
|
|
|
var keysPressed = {};
|
|
var keysPressed = {};
|
|
|
|
|
|
- (function( watchedKeyCodes ) {
|
|
|
|
- var handler = function( down ) {
|
|
|
|
- return function( e ) {
|
|
|
|
|
|
+ ( function ( watchedKeyCodes ) {
|
|
|
|
+
|
|
|
|
+ var handler = function ( down ) {
|
|
|
|
+
|
|
|
|
+ return function ( e ) {
|
|
|
|
+
|
|
var index = watchedKeyCodes.indexOf( e.keyCode );
|
|
var index = watchedKeyCodes.indexOf( e.keyCode );
|
|
- if( index >= 0 ) {
|
|
|
|
- keysPressed[watchedKeyCodes[index]] = down; e.preventDefault();
|
|
|
|
|
|
+ if ( index >= 0 ) {
|
|
|
|
+
|
|
|
|
+ keysPressed[ watchedKeyCodes[ index ] ] = down; e.preventDefault();
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
+
|
|
};
|
|
};
|
|
|
|
+
|
|
};
|
|
};
|
|
window.addEventListener( "keydown", handler( true ), false );
|
|
window.addEventListener( "keydown", handler( true ), false );
|
|
window.addEventListener( "keyup", handler( false ), 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
|
|
keys.SP, keys.W, keys.A, keys.S, keys.D, keys.UP, keys.LT, keys.DN, keys.RT
|
|
- ]);
|
|
|
|
|
|
+ ] );
|
|
|
|
|
|
var forward = new THREE.Vector3();
|
|
var forward = new THREE.Vector3();
|
|
var sideways = new THREE.Vector3();
|
|
var sideways = new THREE.Vector3();
|
|
|
|
|
|
- return function() {
|
|
|
|
- if( !motion.airborne ) {
|
|
|
|
|
|
+ return function () {
|
|
|
|
+
|
|
|
|
+ if ( ! motion.airborne ) {
|
|
|
|
|
|
// look around
|
|
// 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 );
|
|
|
|
|
|
+ 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;
|
|
|
|
|
|
+ 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
|
|
// move around
|
|
forward.set( Math.sin( motion.rotation.y ), 0, Math.cos( motion.rotation.y ) );
|
|
forward.set( Math.sin( motion.rotation.y ), 0, Math.cos( motion.rotation.y ) );
|
|
- sideways.set( forward.z, 0, -forward.x );
|
|
|
|
|
|
+ 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));
|
|
|
|
|
|
+ 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 );
|
|
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;
|
|
|
|
|
|
+ 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
|
|
//jump
|
|
- var vy = keysPressed[keys.SP] ? 0.7 : 0;
|
|
|
|
|
|
+ var vy = keysPressed[ keys.SP ] ? 0.7 : 0;
|
|
motion.velocity.y += vy;
|
|
motion.velocity.y += vy;
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
+
|
|
};
|
|
};
|
|
- })();
|
|
|
|
|
|
|
|
- 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 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();
|
|
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 ) {
|
|
|
|
|
|
+ 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
|
|
// 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;
|
|
|
|
|
|
+ temp.copy( pads[ j ] ); temp.y = 0; temp.setLength( - 0.8 ); temp.y = 0.7;
|
|
|
|
|
|
motion.airborne = true; motion.velocity.copy( temp ); break;
|
|
motion.airborne = true; motion.velocity.copy( temp ); break;
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
+
|
|
};
|
|
};
|
|
- })();
|
|
|
|
|
|
|
|
- var applyPhysics = (function() {
|
|
|
|
|
|
+ } )();
|
|
|
|
+
|
|
|
|
+ var applyPhysics = ( function () {
|
|
|
|
+
|
|
var timeStep = 5;
|
|
var timeStep = 5;
|
|
var timeLeft = timeStep + 1;
|
|
var timeLeft = timeStep + 1;
|
|
|
|
|
|
@@ -135,21 +161,22 @@
|
|
var kneeDeep = 0.4;
|
|
var kneeDeep = 0.4;
|
|
|
|
|
|
var raycaster = new THREE.Raycaster();
|
|
var raycaster = new THREE.Raycaster();
|
|
- raycaster.ray.direction.set( 0, -1, 0 );
|
|
|
|
|
|
+ raycaster.ray.direction.set( 0, - 1, 0 );
|
|
|
|
|
|
var angles = new THREE.Vector2();
|
|
var angles = new THREE.Vector2();
|
|
var displacement = new THREE.Vector3();
|
|
var displacement = new THREE.Vector3();
|
|
|
|
|
|
- return function( dt ) {
|
|
|
|
|
|
+ return function ( dt ) {
|
|
|
|
+
|
|
var platform = scene.getObjectByName( "platform", true );
|
|
var platform = scene.getObjectByName( "platform", true );
|
|
- if( platform ) {
|
|
|
|
|
|
+ if ( platform ) {
|
|
|
|
|
|
timeLeft += dt;
|
|
timeLeft += dt;
|
|
|
|
|
|
// run several fixed-step iterations to approximate varying-step
|
|
// run several fixed-step iterations to approximate varying-step
|
|
|
|
|
|
dt = 5;
|
|
dt = 5;
|
|
- while( timeLeft >= dt ) {
|
|
|
|
|
|
+ while ( timeLeft >= dt ) {
|
|
|
|
|
|
var time = 0.3, damping = 0.93, gravity = 0.01, tau = 2 * Math.PI;
|
|
var time = 0.3, damping = 0.93, gravity = 0.01, tau = 2 * Math.PI;
|
|
|
|
|
|
@@ -162,47 +189,57 @@
|
|
|
|
|
|
// are we above, or at most knee deep in, the platform?
|
|
// 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;
|
|
|
|
|
|
+ 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
|
|
// collision: stick to the surface if landing on it
|
|
|
|
|
|
- if( ( motion.velocity.y <= 0 ) && ( Math.abs( actualHeight ) < kneeDeep ) ) {
|
|
|
|
|
|
+ if ( ( motion.velocity.y <= 0 ) && ( Math.abs( actualHeight ) < kneeDeep ) ) {
|
|
|
|
+
|
|
motion.position.y -= actualHeight;
|
|
motion.position.y -= actualHeight;
|
|
motion.velocity.y = 0;
|
|
motion.velocity.y = 0;
|
|
motion.airborne = false;
|
|
motion.airborne = false;
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
|
|
- if( motion.airborne ) motion.velocity.y -= gravity;
|
|
|
|
|
|
+ if ( motion.airborne ) motion.velocity.y -= gravity;
|
|
|
|
|
|
angles.copy( motion.spinning ).multiplyScalar( time );
|
|
angles.copy( motion.spinning ).multiplyScalar( time );
|
|
- if( !motion.airborne ) motion.spinning.multiplyScalar( damping );
|
|
|
|
|
|
+ if ( ! motion.airborne ) motion.spinning.multiplyScalar( damping );
|
|
|
|
|
|
displacement.copy( motion.velocity ).multiplyScalar( time );
|
|
displacement.copy( motion.velocity ).multiplyScalar( time );
|
|
- if( !motion.airborne ) motion.velocity.multiplyScalar( damping );
|
|
|
|
|
|
+ if ( ! motion.airborne ) motion.velocity.multiplyScalar( damping );
|
|
|
|
|
|
motion.rotation.add( angles );
|
|
motion.rotation.add( angles );
|
|
motion.position.add( displacement );
|
|
motion.position.add( displacement );
|
|
|
|
|
|
// limit the tilt at ±0.4 radians
|
|
// limit the tilt at ±0.4 radians
|
|
|
|
|
|
- motion.rotation.x = Math.max( -0.4, Math.min ( +0.4, motion.rotation.x ) );
|
|
|
|
|
|
+ motion.rotation.x = Math.max( - 0.4, Math.min( + 0.4, motion.rotation.x ) );
|
|
|
|
|
|
// wrap horizontal rotation to 0...2π
|
|
// wrap horizontal rotation to 0...2π
|
|
|
|
|
|
motion.rotation.y += tau; motion.rotation.y %= tau;
|
|
motion.rotation.y += tau; motion.rotation.y %= tau;
|
|
|
|
|
|
timeLeft -= dt;
|
|
timeLeft -= dt;
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
+
|
|
};
|
|
};
|
|
- })();
|
|
|
|
|
|
|
|
- var updateCamera = (function() {
|
|
|
|
|
|
+ } )();
|
|
|
|
+
|
|
|
|
+ var updateCamera = ( function () {
|
|
|
|
+
|
|
var euler = new THREE.Euler( 0, 0, 0, 'YXZ' );
|
|
var euler = new THREE.Euler( 0, 0, 0, 'YXZ' );
|
|
|
|
|
|
- return function() {
|
|
|
|
|
|
+ return function () {
|
|
|
|
+
|
|
euler.x = motion.rotation.x;
|
|
euler.x = motion.rotation.x;
|
|
euler.y = motion.rotation.y;
|
|
euler.y = motion.rotation.y;
|
|
camera.quaternion.setFromEuler( euler );
|
|
camera.quaternion.setFromEuler( euler );
|
|
@@ -210,13 +247,16 @@
|
|
camera.position.copy( motion.position );
|
|
camera.position.copy( motion.position );
|
|
|
|
|
|
camera.position.y += 3.0;
|
|
camera.position.y += 3.0;
|
|
|
|
+
|
|
};
|
|
};
|
|
- })();
|
|
|
|
|
|
+
|
|
|
|
+ } )();
|
|
|
|
|
|
|
|
|
|
// init 3D stuff
|
|
// init 3D stuff
|
|
|
|
|
|
function makePlatform( jsonUrl, textureUrl, textureQuality ) {
|
|
function makePlatform( jsonUrl, textureUrl, textureQuality ) {
|
|
|
|
+
|
|
var placeholder = new THREE.Object3D();
|
|
var placeholder = new THREE.Object3D();
|
|
|
|
|
|
var texture = new THREE.TextureLoader().load( textureUrl );
|
|
var texture = new THREE.TextureLoader().load( textureUrl );
|
|
@@ -224,21 +264,23 @@
|
|
texture.anisotropy = textureQuality;
|
|
texture.anisotropy = textureQuality;
|
|
|
|
|
|
var loader = new THREE.JSONLoader();
|
|
var loader = new THREE.JSONLoader();
|
|
- loader.load( jsonUrl, function( geometry ) {
|
|
|
|
|
|
+ loader.load( jsonUrl, function ( geometry ) {
|
|
|
|
|
|
geometry.computeFaceNormals();
|
|
geometry.computeFaceNormals();
|
|
|
|
|
|
- var platform = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({ map : texture }) );
|
|
|
|
|
|
+ var platform = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
|
|
|
|
|
|
platform.name = "platform";
|
|
platform.name = "platform";
|
|
|
|
|
|
placeholder.add( platform );
|
|
placeholder.add( platform );
|
|
- });
|
|
|
|
|
|
+
|
|
|
|
+ } );
|
|
|
|
|
|
return placeholder;
|
|
return placeholder;
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
|
|
- var renderer = new THREE.WebGLRenderer( { antialias : true } );
|
|
|
|
|
|
+ var renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
document.body.appendChild( renderer.domElement );
|
|
document.body.appendChild( renderer.domElement );
|
|
|
|
|
|
@@ -252,7 +294,7 @@
|
|
'textures/cube/skybox/py.jpg', // top
|
|
'textures/cube/skybox/py.jpg', // top
|
|
'textures/cube/skybox/ny.jpg', // bottom
|
|
'textures/cube/skybox/ny.jpg', // bottom
|
|
'textures/cube/skybox/pz.jpg', // back
|
|
'textures/cube/skybox/pz.jpg', // back
|
|
- 'textures/cube/skybox/nz.jpg' // front
|
|
|
|
|
|
+ 'textures/cube/skybox/nz.jpg' // front
|
|
] );
|
|
] );
|
|
envMap.format = THREE.RGBFormat;
|
|
envMap.format = THREE.RGBFormat;
|
|
|
|
|
|
@@ -262,24 +304,28 @@
|
|
'models/platform/platform.json',
|
|
'models/platform/platform.json',
|
|
'models/platform/platform.jpg',
|
|
'models/platform/platform.jpg',
|
|
renderer.capabilities.getMaxAnisotropy()
|
|
renderer.capabilities.getMaxAnisotropy()
|
|
- ));
|
|
|
|
|
|
+ ) );
|
|
|
|
|
|
|
|
|
|
// start the game
|
|
// start the game
|
|
|
|
|
|
- var start = function( gameLoop, gameViewportSize ) {
|
|
|
|
- var resize = function() {
|
|
|
|
|
|
+ var start = function ( gameLoop, gameViewportSize ) {
|
|
|
|
+
|
|
|
|
+ var resize = function () {
|
|
|
|
+
|
|
var viewport = gameViewportSize();
|
|
var viewport = gameViewportSize();
|
|
renderer.setSize( viewport.width, viewport.height );
|
|
renderer.setSize( viewport.width, viewport.height );
|
|
camera.aspect = viewport.width / viewport.height;
|
|
camera.aspect = viewport.width / viewport.height;
|
|
camera.updateProjectionMatrix();
|
|
camera.updateProjectionMatrix();
|
|
|
|
+
|
|
};
|
|
};
|
|
|
|
|
|
window.addEventListener( 'resize', resize, false );
|
|
window.addEventListener( 'resize', resize, false );
|
|
resize();
|
|
resize();
|
|
|
|
|
|
var lastTimeStamp;
|
|
var lastTimeStamp;
|
|
- var render = function( timeStamp ) {
|
|
|
|
|
|
+ var render = function ( timeStamp ) {
|
|
|
|
+
|
|
var timeElapsed = lastTimeStamp ? timeStamp - lastTimeStamp : 0; lastTimeStamp = timeStamp;
|
|
var timeElapsed = lastTimeStamp ? timeStamp - lastTimeStamp : 0; lastTimeStamp = timeStamp;
|
|
|
|
|
|
// call our game loop with the time elapsed since last rendering, in ms
|
|
// call our game loop with the time elapsed since last rendering, in ms
|
|
@@ -287,23 +333,33 @@
|
|
|
|
|
|
renderer.render( scene, camera );
|
|
renderer.render( scene, camera );
|
|
requestAnimationFrame( render );
|
|
requestAnimationFrame( render );
|
|
|
|
+
|
|
};
|
|
};
|
|
|
|
|
|
requestAnimationFrame( render );
|
|
requestAnimationFrame( render );
|
|
|
|
+
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
- var gameLoop = function( dt ) {
|
|
|
|
|
|
+ var gameLoop = function ( dt ) {
|
|
|
|
+
|
|
resetPlayer();
|
|
resetPlayer();
|
|
keyboardControls();
|
|
keyboardControls();
|
|
jumpPads();
|
|
jumpPads();
|
|
applyPhysics( dt );
|
|
applyPhysics( dt );
|
|
updateCamera();
|
|
updateCamera();
|
|
|
|
+
|
|
};
|
|
};
|
|
|
|
|
|
- var gameViewportSize = function() { return {
|
|
|
|
- width: window.innerWidth, height: window.innerHeight
|
|
|
|
- }};
|
|
|
|
|
|
+ var gameViewportSize = function () {
|
|
|
|
+
|
|
|
|
+ return {
|
|
|
|
+
|
|
|
|
+ width: window.innerWidth, height: window.innerHeight
|
|
|
|
+
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ };
|
|
|
|
|
|
start( gameLoop, gameViewportSize );
|
|
start( gameLoop, gameViewportSize );
|
|
</script>
|
|
</script>
|