Examples: Improved webgl_instancing_*

examples/files.js

@@ -47,8 +47,8 @@ var files = {
 		"webgl_geometry_text_shapes",
 		"webgl_geometry_text_stroke",
 		"webgl_helpers",
-		"webgl_instancing_suzanne",
 		"webgl_instancing_raycast",
+		"webgl_instancing_suzanne",
 		"webgl_interactive_buffergeometry",
 		"webgl_interactive_cubes",
 		"webgl_interactive_cubes_gpu",

examples/webgl_instancing_raycast.html

@@ -17,12 +17,10 @@
 
 	var camera, scene, renderer, stats;
 
-	var mesh, geometry;
-	var amount = parseInt( window.location.search.substr( 1 ) ) || 3;
+	var mesh;
+	var amount = parseInt( window.location.search.substr( 1 ) ) || 10;
 	var count = Math.pow( amount, 3 );
-	var object = new THREE.Object3D();
 
-	var intersection;
 	var raycaster = new THREE.Raycaster();
 	var mouse = new THREE.Vector2( 1, 1 );
 
@@ -36,21 +34,29 @@
 
 	function init() {
 
-		camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
+		camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
 		camera.position.set( amount, amount, amount );
 		camera.lookAt( 0, 0, 0 );
 
 		scene = new THREE.Scene();
 
-		geometry = new THREE.TorusKnotBufferGeometry( 0.5, 0.2, 16, 4, 2, 3 );
-		geometry.scale( 0.5, 0.5, 0.5 );
+		var light = new THREE.HemisphereLight( 0xffffff, 0x000088 );
+		light.position.set( - 1, 1.5, 1 );
+		scene.add( light );
 
-		var material = new THREE.MeshNormalMaterial( { flatShading: true } );
+		var light = new THREE.HemisphereLight( 0xffffff, 0x880000, 0.5 );
+		light.position.set( - 1, - 1.5, - 1 );
+		scene.add( light );
+
+		var geometry = new THREE.SphereBufferGeometry( 0.5 );
+		var material = new THREE.MeshPhongMaterial( { flatShading: true } );
 
 		mesh = new THREE.InstancedMesh( geometry, material, count );
 
 		var i = 0;
-		var offset = amount / 2;
+		var offset = ( amount - 1 ) / 2;
+
+		var transform = new THREE.Object3D();
 
 		for ( var x = 0; x < amount; x ++ ) {
 
@@ -58,11 +64,10 @@
 
 				for ( var z = 0; z < amount; z ++ ) {
 
-					object.position.set( offset - x, offset - y, offset - z );
-
-					object.updateMatrix();
+					transform.position.set( offset - x, offset - y, offset - z );
+					transform.updateMatrix();
 
-					mesh.setMatrixAt( i ++, object.matrix );
+					mesh.setMatrixAt( i ++, transform.matrix );
 
 				}
 
@@ -82,7 +87,7 @@
 		renderer.setSize( window.innerWidth, window.innerHeight );
 		document.body.appendChild( renderer.domElement );
 
-		var orbitControls = new OrbitControls( camera, renderer.domElement );
+		new OrbitControls( camera, renderer.domElement );
 
 		stats = new Stats();
 		document.body.appendChild( stats.dom );
@@ -122,7 +127,7 @@
 
 		raycaster.setFromCamera( mouse, camera );
 
-		intersection = raycaster.intersectObjects( scene.children );
+		var intersection = raycaster.intersectObject( mesh );
 
 		if ( intersection.length > 0 ) {
 

examples/webgl_instancing_suzanne.html

@@ -27,7 +27,7 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
 				camera.position.set( amount * 0.9, amount * 0.9, amount * 0.9 );
 				camera.lookAt( 0, 0, 0 );
 
@@ -102,7 +102,7 @@
 					mesh.rotation.y = Math.sin( time / 2 );
 
 					var i = 0;
-					var offset = amount / 2;
+					var offset = ( amount - 1 ) / 2;
 
 					for ( var x = 0; x < amount; x ++ ) {