Merge pull request #251 from nmai/master

Fixed and updated examples to three.js v73

examples/body.html

@@ -19,15 +19,13 @@
 	Physijs.scripts.ammo = 'examples/js/ammo.js';
 
 	var initScene, render, applyForce, setMousePosition, mouse_position,
-		ground_material, box_material,
-		projector, renderer, render_stats, physics_stats, scene, ground, light, camera, box, boxes = [];
+		ground_material, box_material, loader,
+		renderer, render_stats, physics_stats, scene, ground, light, camera, box, boxes = [];
 
 	initScene = function() {
-		projector = new THREE.Projector;
-
 		renderer = new THREE.WebGLRenderer({ antialias: true });
 		renderer.setSize( window.innerWidth, window.innerHeight );
-		renderer.shadowMapEnabled = true;
+		renderer.shadowMap.enabled = true;
 		renderer.shadowMapSoft = true;
 		document.getElementById( 'viewport' ).appendChild( renderer.domElement );
 
@@ -79,18 +77,21 @@
 		light.shadowMapWidth = light.shadowMapHeight = 2048;
 		light.shadowDarkness = .7;
 		scene.add( light );
+
+		// Loader
+		loader = new THREE.TextureLoader();
 
 		// Materials
 		ground_material = Physijs.createMaterial(
-			new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'images/rocks.jpg' ) }),
+			new THREE.MeshLambertMaterial({ map: loader.load( 'images/rocks.jpg' ) }),
 			.8, // high friction
 			.4 // low restitution
 		);
 		ground_material.map.wrapS = ground_material.map.wrapT = THREE.RepeatWrapping;
 		ground_material.map.repeat.set( 3, 3 );
 
 		box_material = Physijs.createMaterial(
-			new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'images/plywood.jpg' ) }),
+			new THREE.MeshLambertMaterial({ map: loader.load( 'images/plywood.jpg' ) }),
 			.4, // low friction
 			.6 // high restitution
 		);
@@ -150,7 +151,7 @@
 			-( ( evt.clientY / renderer.domElement.clientHeight ) * 2 - 1 ),
 			.5
 		);
-		projector.unprojectVector( vector, camera );
+		vector.unproject( camera );
 		vector.sub( camera.position ).normalize();
 
 		var coefficient = (box.position.y - camera.position.y) / vector.y

examples/collisions.html

@@ -18,13 +18,13 @@
 	Physijs.scripts.worker = '../physijs_worker.js';
 	Physijs.scripts.ammo = 'examples/js/ammo.js';
 
-	var initScene, render, _boxes = [], spawnBox,
+	var initScene, render, _boxes = [], spawnBox, loader,
 		renderer, render_stats, physics_stats, scene, ground_material, ground, light, camera;
 
 	initScene = function() {
 		renderer = new THREE.WebGLRenderer({ antialias: true });
 		renderer.setSize( window.innerWidth, window.innerHeight );
-		renderer.shadowMapEnabled = true;
+		renderer.shadowMap.enabled = true;
 		renderer.shadowMapSoft = true;
 		document.getElementById( 'viewport' ).appendChild( renderer.domElement );
 
@@ -75,10 +75,13 @@
 		light.shadowMapWidth = light.shadowMapHeight = 2048;
 		light.shadowDarkness = .7;
 		scene.add( light );
+
+		// Loader
+		loader = new THREE.TextureLoader();
 
 		// Ground
 		ground_material = Physijs.createMaterial(
-			new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'images/rocks.jpg' ) }),
+			new THREE.MeshLambertMaterial({ map: loader.load( 'images/rocks.jpg' ) }),
 			.8, // high friction
 			.3 // low restitution
 		);
@@ -133,7 +136,7 @@
 				var box, material;
 
 				material = Physijs.createMaterial(
-					new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'images/plywood.jpg' ) }),
+					new THREE.MeshLambertMaterial({ map: loader.load( 'images/plywood.jpg' ) }),
 					.6, // medium friction
 					.3 // low restitution
 				);

examples/compound.html

@@ -19,12 +19,12 @@
 	Physijs.scripts.ammo = 'examples/js/ammo.js';
 
 	var initScene, render, renderer, render_stats, physics_stats, scene, ground, light, camera, spawnChair,
-		ground_material, chair_material;
+		ground_material, chair_material, loader;
 
 	initScene = function() {
 		renderer = new THREE.WebGLRenderer({ antialias: true });
 		renderer.setSize( window.innerWidth, window.innerHeight );
-		renderer.shadowMapEnabled = true;
+		renderer.shadowMap.enabled = true;
 		renderer.shadowMapSoft = true;
 		document.getElementById( 'viewport' ).appendChild( renderer.domElement );
 
@@ -75,18 +75,21 @@
 		light.shadowMapWidth = light.shadowMapHeight = 2048;
 		light.shadowDarkness = .7;
 		scene.add( light );
+
+		// Loader
+		loader = new THREE.TextureLoader();
 
 		// Materials
 		ground_material = Physijs.createMaterial(
-			new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'images/rocks.jpg' ) }),
+			new THREE.MeshLambertMaterial({ map: loader.load( 'images/rocks.jpg' ) }),
 			.8, // high friction
 			.4 // low restitution
 		);
 		ground_material.map.wrapS = ground_material.map.wrapT = THREE.RepeatWrapping;
 		ground_material.map.repeat.set( 3, 3 );
 
 		chair_material = Physijs.createMaterial(
-			new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'images/wood.jpg' ) }),
+			new THREE.MeshLambertMaterial({ map: loader.load( 'images/wood.jpg' ) }),
 			.6, // medium friction
 			.2 // low restitution
 		);

examples/constraints_car.html

@@ -20,15 +20,13 @@
 
 	var initScene, render,
 		ground_material, car_material, wheel_material, wheel_geometry,
-		projector, renderer, render_stats, physics_stats, scene, ground_geometry, ground, light, camera,
+		loader, renderer, render_stats, physics_stats, scene, ground_geometry, ground, light, camera,
 		car = {};
 
 	initScene = function() {
-		projector = new THREE.Projector;
-
 		renderer = new THREE.WebGLRenderer({ antialias: true });
 		renderer.setSize( window.innerWidth, window.innerHeight );
-		renderer.shadowMapEnabled = true;
+		renderer.shadowMap.enabled = true;
 		renderer.shadowMapSoft = true;
 		document.getElementById( 'viewport' ).appendChild( renderer.domElement );
 
@@ -79,10 +77,13 @@
 		light.shadowMapWidth = light.shadowMapHeight = 2048;
 		light.shadowDarkness = .7;
 		scene.add( light );
+
+		// Loader
+		loader = new THREE.TextureLoader();
 
 		// Materials
 		ground_material = Physijs.createMaterial(
-			new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'images/rocks.jpg' ) }),
+			new THREE.MeshLambertMaterial({ map: loader.load( 'images/rocks.jpg' ) }),
 			.8, // high friction
 			.4 // low restitution
 		);

examples/heightfield.html

@@ -20,15 +20,15 @@
 	Physijs.scripts.worker = '../physijs_worker.js';
 	Physijs.scripts.ammo = 'examples/js/ammo.js';
 
-	var initScene, render, createShape, NoiseGen,
+	var initScene, render, createShape, NoiseGen, loader,
 		renderer, render_stats, physics_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.shadowMap.enabled = true;
 		renderer.shadowMapSoft = true;
 		document.getElementById( 'viewport' ).appendChild( renderer.domElement );
 
@@ -79,10 +79,13 @@
 		light.shadowMapWidth = light.shadowMapHeight = 2048;
 		light.shadowDarkness = .7;
 		scene.add( light );
+
+		// Loader
+		loader = new THREE.TextureLoader();
 
 		// Materials
 		ground_material = Physijs.createMaterial(
-			new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'images/grass.png' ) }),
+			new THREE.MeshLambertMaterial({ map: loader.load( 'images/grass.png' ) }),
 			.8, // high friction
 			.4 // low restitution
 		);

examples/jenga.html

@@ -18,15 +18,15 @@
 	Physijs.scripts.worker = '../physijs_worker.js';
 	Physijs.scripts.ammo = 'examples/js/ammo.js';
 
-	var initScene, initEventHandling, render, createTower,
+	var initScene, initEventHandling, render, createTower, loader,
 		renderer, render_stats, physics_stats, scene, dir_light, am_light, camera,
 		table, blocks = [], table_material, block_material, intersect_plane,
 		selected_block = null, mouse_position = new THREE.Vector3, block_offset = new THREE.Vector3, _i, _v3 = new THREE.Vector3;
 
 	initScene = function() {
 		renderer = new THREE.WebGLRenderer({ antialias: true });
 		renderer.setSize( window.innerWidth, window.innerHeight );
-		renderer.shadowMapEnabled = true;
+		renderer.shadowMap.enabled = true;
 		renderer.shadowMapSoft = true;
 		document.getElementById( 'viewport' ).appendChild( renderer.domElement );
 
@@ -95,18 +95,21 @@
 		dir_light.shadowMapWidth = dir_light.shadowMapHeight = 2048;
 		dir_light.shadowDarkness = .5;
 		scene.add( dir_light );
+
+		// Loader
+		loader = new THREE.TextureLoader();
 
 		// Materials
 		table_material = Physijs.createMaterial(
-			new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'images/wood.jpg' ), ambient: 0xFFFFFF }),
+			new THREE.MeshLambertMaterial({ map: loader.load( 'images/wood.jpg' )}),
 			.9, // high friction
 			.2 // low restitution
 		);
 		table_material.map.wrapS = table_material.map.wrapT = THREE.RepeatWrapping;
 		table_material.map.repeat.set( 5, 5 );
 
 		block_material = Physijs.createMaterial(
-			new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'images/plywood.jpg' ), ambient: 0xFFFFFF }),
+			new THREE.MeshLambertMaterial({ map: loader.load( 'images/plywood.jpg' )}),
 			.4, // medium friction
 			.4 // medium restitution
 		);
@@ -174,7 +177,6 @@
 
 	initEventHandling = (function() {
 		var _vector = new THREE.Vector3,
-			projector = new THREE.Projector(),
 			handleMouseDown, handleMouseMove, handleMouseUp;
 
 		handleMouseDown = function( evt ) {
@@ -186,7 +188,7 @@
 				1
 			);
 
-			projector.unprojectVector( _vector, camera );
+			_vector.unproject( camera );
 
 			ray = new THREE.Raycaster( camera.position, _vector.sub( camera.position ).normalize() );
 			intersections = ray.intersectObjects( blocks );
@@ -219,7 +221,7 @@
 					-( evt.clientY / window.innerHeight ) * 2 + 1,
 					1
 				);
-				projector.unprojectVector( _vector, camera );
+				_vector.unproject( camera );
 
 				ray = new THREE.Raycaster( camera.position, _vector.sub( camera.position ).normalize() );
 				intersection = ray.intersectObject( intersect_plane );