Doodle3D-Slicer/three.js-master/examples/misc_fps.html

325 lines
9.0 KiB
HTML
Raw Normal View History

2015-06-12 15:58:26 +02:00
<!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>