examples/heightfield.html

<!DOCTYPE html>

<html>

<head>
	<title>Heightfield - Physijs</title>
	
	<link rel="stylesheet" type="text/css" href="css/styles.css" />
	
	<script type="text/javascript" src="js/Three.js"></script>
	<script type="text/javascript" src="js/stats.js"></script>
	<script type="text/javascript" src="js/tween.js"></script>
	<script type="text/javascript" src="js/simplex-noise.js"></script>
	<script type="text/javascript" src="../physi.js"></script>
	
	<script type="text/javascript">
	
	'use strict';
	
	Physijs.scripts.worker = '../physijs_worker.js';
	Physijs.scripts.ammo = 'examples/js/ammo.js';
	
	var initScene, render, createShape, NoiseGen,
		renderer, stats, scene, light, ground, ground_geometry, ground_material, camera;
	
	initScene = function() {
		TWEEN.start();
		
		renderer = new THREE.WebGLRenderer({ antialias: true });
		renderer.setSize( window.innerWidth, window.innerHeight );
		renderer.shadowMapEnabled = true;
		renderer.shadowMapSoft = true;
		document.getElementById( 'viewport' ).appendChild( renderer.domElement );
		
		stats = new Stats();
		stats.domElement.style.position = 'absolute';
		stats.domElement.style.top = '0px';
		stats.domElement.style.zIndex = 100;
		document.getElementById( 'viewport' ).appendChild( stats.domElement );
		
		scene = new Physijs.Scene;
		scene.setGravity({ x: 0, y: -10, z: 0 });
		
		camera = new THREE.PerspectiveCamera(
			35,
			window.innerWidth / window.innerHeight,
			1,
			1000
		);
		camera.position.set( 60, 50, 60 );
		camera.lookAt( scene.position );
		scene.add( camera );
		
		// Light
		light = new THREE.DirectionalLight( 0xFFFFFF );
		light.position.set( 20, 40, -15 );
		light.target.position.copy( scene.position );
		light.castShadow = true;
		light.shadowCameraLeft = -60;
		light.shadowCameraTop = -60;
		light.shadowCameraRight = 60;
		light.shadowCameraBottom = 60;
		light.shadowCameraNear = 20;
		light.shadowCameraFar = 200;
		light.shadowBias = -.0001
		light.shadowMapWidth = light.shadowMapHeight = 2048;
		light.shadowDarkness = .7;
		scene.add( light );
		
		// Materials
		ground_material = Physijs.createMaterial(
			new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'images/grass.png' ) }),
			.8, // high friction
			.4 // low restitution
		);
		ground_material.map.wrapS = ground_material.map.wrapT = THREE.RepeatWrapping;
		ground_material.map.repeat.set( 2.5, 2.5 );
		
		// Ground
		NoiseGen = new SimplexNoise;
		
		ground_geometry = new THREE.PlaneGeometry( 75, 75, 50, 50 );
		for ( var i = 0; i < ground_geometry.vertices.length; i++ ) {
			var vertex = ground_geometry.vertices[i];
			vertex.y = NoiseGen.noise( vertex.x / 10, vertex.z / 10 ) * 2;
		}
		ground_geometry.computeFaceNormals();
		ground_geometry.computeVertexNormals();
		
		// If your plane is not square as far as face count then the HeightfieldMesh
		// takes two more arguments at the end: # of x faces and # of z faces that were passed to THREE.PlaneMaterial
		ground = new Physijs.HeightfieldMesh(
			ground_geometry,
			ground_material,
			0 // mass
		);
		ground.receiveShadow = true;
		scene.add( ground );
		
		requestAnimationFrame( render );
		
		createShape();
	};
	
	render = function() {
		scene.simulate(undefined, 2);
		renderer.render( scene, camera );
		stats.update();
		requestAnimationFrame( render );
	};
	
	createShape = (function() {
		var addshapes = true,
			shapes = 0,
			box_geometry = new THREE.CubeGeometry( 3, 3, 3 ),
			sphere_geometry = new THREE.SphereGeometry( 1.5, 32, 32 ),
			cylinder_geometry = new THREE.CylinderGeometry( 2, 2, 1, 32 ),
			cone_geometry = new THREE.CylinderGeometry( 0, 2, 4, 32 ),
			octahedron_geometry = new THREE.OctahedronGeometry( 1.7, 1 ),
			torus_geometry = new THREE.TorusKnotGeometry ( 1.7, .2, 32, 4 ),
			doCreateShape;
		
		setTimeout(
			function addListener() {
				var button = document.getElementById( 'stop' );
				if ( button ) {
					button.addEventListener( 'click', function() { addshapes = false; } );
				} else {
					setTimeout( addListener );
				}
			}
		);
			
		doCreateShape = function() {
			var shape, material = new THREE.MeshLambertMaterial({ opacity: 0, transparent: true });
			
			switch ( Math.floor(Math.random() * 2) ) {
				case 0:
					shape = new Physijs.BoxMesh(
						box_geometry,
						material
					);
					break;
				
				case 1:
					shape = new Physijs.SphereMesh(
						sphere_geometry,
						material,
						undefined,
						{ restitution: Math.random() * 1.5 }
					);
					break;
			}
				
			shape.material.color.setRGB( Math.random() * 100 / 100, Math.random() * 100 / 100, Math.random() * 100 / 100 );
			shape.castShadow = true;
			shape.receiveShadow = true;
			
			shape.position.set(
				Math.random() * 30 - 15,
				20,
				Math.random() * 30 - 15
			);
			
			shape.rotation.set(
				Math.random() * Math.PI,
				Math.random() * Math.PI,
				Math.random() * Math.PI
			);
			
			if ( addshapes ) {
				shape.addEventListener( 'ready', createShape );
			}
			scene.add( shape );
			
			new TWEEN.Tween(shape.material).to({opacity: 1}, 500).start();
			
			document.getElementById('shapecount').textContent = (++shapes) + ' shapes created';
		};
		
		return function() {
			setTimeout( doCreateShape, 250 );
		};
	})();
	
	window.onload = initScene;
	
	</script>
</head>

<body>
	<div id="heading">
		<h1>Heightfield in Physijs</h1>
		<p>
			Heightmapped Terrain -
			<span id="shapecount"></span> <button id="stop">Stop adding shapes</button><br />
		</p>
	</div>
	<div id="viewport"></div>
</body>

</html>