mrdoob · pailhead · Feb 6, 2017 · Feb 7, 2017 · Feb 7, 2017 · Feb 7, 2017
diff --git a/examples/files.js b/examples/files.js
@@ -1,5 +1,7 @@
 var files = {
 	"webgl": [
+
+		"webgl_instanced_mesh",
 		"webgl_animation_cloth",
 		"webgl_animation_scene",
 		"webgl_animation_skinning_blending",

diff --git a/examples/webgl_instanced_mesh.html b/examples/webgl_instanced_mesh.html
@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - InstancedMesh example </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 {
+				font-family: Monospace;
+				background-color: #000;
+				color: #fff;
+				margin: 0px;
+				overflow: hidden;
+			}
+			#info {
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+				display:block;
+			}
+			#info a { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
+		</style>
+	</head>
+	<body>
+		<div id="info">
+		<a href="http://threejs.org" target="_blank">three.js</a> - Mesh abstraction for InstancedBufferGeometry <a href="https://github.com/pailhead">pailhead</a>
+		</div>
+
+		<script src="../build/three.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
+		<script src="js/utils/ShadowMapViewer.js"></script>
+		<script src="js/Detector.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var camera, scene, renderer, clock, stats;
+			var dirLight, spotLight;
+			var torusKnot, cube;
+			var dirLightShadowMapViewer, spotLightShadowMapViewer;
+			var objectsGrid = [];
+			var finalTriNum = 0;
+
+			init();
+
+			animate();
+
+
+			function init() {
+
+				initScene();
+				initShadowMapViewers();
+				initMisc();
+
+				document.body.appendChild( renderer.domElement );
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function initScene() {
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.set( 0, 15, 35 );
+
+				scene = new THREE.Scene();
+
+				// Lights
+
+				scene.add( new THREE.AmbientLight( 0x404040 ) );
+
+				spotLight = new THREE.SpotLight( 0xffffff );
+				spotLight.name = 'Spot Light';
+				spotLight.angle = Math.PI / 5;
+				spotLight.penumbra = 0.3;
+				spotLight.position.set( 10, 10, 5 );
+				spotLight.castShadow = true;
+				spotLight.shadow.camera.near = 8;
+				spotLight.shadow.camera.far = 30;
+				spotLight.shadow.mapSize.width = 1024;
+				spotLight.shadow.mapSize.height = 1024;
+				scene.add( spotLight );
+
+				scene.add( new THREE.CameraHelper( spotLight.shadow.camera ) );
+
+				dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				dirLight.name = 'Dir. Light';
+				dirLight.position.set( 0, 10, 0 );
+				dirLight.castShadow = true;
+				dirLight.shadow.camera.near = 1;
+				dirLight.shadow.camera.far = 10;
+				dirLight.shadow.camera.right = 15;
+				dirLight.shadow.camera.left = - 15;
+				dirLight.shadow.camera.top	= 15;
+				dirLight.shadow.camera.bottom = - 15;
+				dirLight.shadow.mapSize.width = 1024;
+				dirLight.shadow.mapSize.height = 1024;
+				scene.add( dirLight );
+
+				scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
+
+				console.log( scene );
+
+				// Geometry
+				var geometry = new THREE.TorusKnotGeometry( 25, 8, 75, 20 );
+				var material = new THREE.MeshPhongMaterial( {
+					color: 0xff0000,
+					shininess: 150,
+					specular: 0x222222,
+					shading: THREE.SmoothShading
+				} );
+
+				var colors = [ 0xff0000 , 0x00f000 , 0x0000f0 ];
+
+				var geometries = [new THREE.BoxBufferGeometry(1,1,1) , new THREE.SphereBufferGeometry(1,8,8) , new THREE.CylinderBufferGeometry(.3,.3,1,8)];
+
+				var geometriesTriNum = [];
+
+				geometries.forEach( function( g ){
+
+					geometriesTriNum.push( g.index.count / 3 );
+
+				});
+
+				for( var i = -1 ; i <= 1 ; i++ )
+					for( var j = -1 ; j <= 1 ; j++ ){
+
+						var o = new THREE.Object3D();
+
+						o.position.set( i , 0 , j );
+
+						o.position.multiplyScalar( 10 );
+
+						o.position.y = 3;
+
+						o.scale.multiplyScalar( .8 );
+
+						scene.add(o);
+
+						objectsGrid.push( o );
+
+					}
+
+				objectsGrid.forEach( function( g , gi ){
+
+					var geometry = geometries[ Math.floor( Math.random() * geometries.length ) ]; 
+					var rotate = Math.random() > 0.5 ? true : false;
+
+					colors.forEach( function(c , ci){
+
+						var cluster = new THREE.InstancedMesh( 
+
+							geometry , 
+
+							new THREE.MeshPhongMaterial( {
+								color: c,
+								shininess: 150,
+								specular: 0xffffff,
+								shading: THREE.SmoothShading
+							} ), 
+
+							function( object , i ){
+
+								object.position.x = Math.random() * 2 - 1;
+								object.position.y = Math.random() * 2 - 1;
+								object.position.z = Math.random() * 2 - 1;
+
+								object.position.multiplyScalar( 2 );
+
+								if( rotate ){
+
+									object.rotation.x = Math.random() * 2 * Math.PI;
+									object.rotation.y = Math.random() * 2 * Math.PI;
+									object.rotation.z = Math.random() * 2 * Math.PI;
+
+								}
+
+								var scale = Math.random() + .5;
+
+								scale *=.5;
+
+								object.scale.x = scale * ( Math.random() + 0.5);
+								object.scale.y = scale * ( Math.random() + 0.5);
+								object.scale.z = scale * ( Math.random() + 0.5);
+
+							},
+
+							1000,
+
+							false
+						);
+
+						finalTriNum += geometriesTriNum[ geometries.indexOf( geometry ) ] * 1000;
+
+						cluster.castShadow = true;
+						cluster.receiveShadow = true;
+						g.add( cluster );
+
+					});
+
+				 	scene.add( g );
+
+				});
+
+				console.log( 'Total triangle num: ' + finalTriNum );
+
+				var geometry = new THREE.BoxGeometry( 10, 0.15, 10 );
+				var material = new THREE.MeshPhongMaterial( {
+					color: 0xa0adaf,
+					shininess: 150,
+					specular: 0xffffff,
+					shading: THREE.SmoothShading
+				} );
+
+				var ground = new THREE.Mesh( geometry, material );
+				ground.scale.multiplyScalar( 3 );
+				ground.castShadow = false;
+				ground.receiveShadow = true;
+				scene.add( ground );
+
+			}
+
+			function initShadowMapViewers() {
+
+				dirLightShadowMapViewer = new THREE.ShadowMapViewer( dirLight );
+				dirLightShadowMapViewer.position.x = 10;
+				dirLightShadowMapViewer.position.y = 10;
+				dirLightShadowMapViewer.size.width = 256;
+				dirLightShadowMapViewer.size.height = 256;
+				dirLightShadowMapViewer.update(); //Required when setting position or size directly
+
+				spotLightShadowMapViewer = new THREE.ShadowMapViewer( spotLight );
+				spotLightShadowMapViewer.size.set( 256, 256 );
+				spotLightShadowMapViewer.position.set( 276, 10 );
+				// spotLightShadowMapViewer.update();	//NOT required because .set updates automatically
+
+			}
+
+			function initMisc() {
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setClearColor( 0x000000 );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.shadowMap.enabled = true;
+				renderer.shadowMap.type = THREE.BasicShadowMap;
+
+				// Mouse control
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, 2, 0 );
+				controls.update();
+
+				clock = new THREE.Clock();
+
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				dirLightShadowMapViewer.updateForWindowResize();
+				spotLightShadowMapViewer.updateForWindowResize();
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+				render();
+
+				stats.update();
+
+			}
+
+			function renderScene() {
+
+				renderer.render( scene, camera );
+
+			}
+
+			function renderShadowMapViewers() {
+
+				dirLightShadowMapViewer.render( renderer );
+				spotLightShadowMapViewer.render( renderer );
+
+			}
+
+			function render() {
+
+				var delta = clock.getDelta()*0.12;
+
+				renderScene();
+				renderShadowMapViewers();
+
+				objectsGrid.forEach( function(o){
+
+					o.rotation.x += 0.25 * delta;
+					o.rotation.y += 2 * delta;
+					o.rotation.z += 1 * delta;
+
+				});
+
+			}
+
+		</script>
+	</body>
+</html>
diff --git a/src/Three.js b/src/Three.js
@@ -18,6 +18,7 @@ export { SkinnedMesh } from './objects/SkinnedMesh.js';
 export { Skeleton } from './objects/Skeleton.js';
 export { Bone } from './objects/Bone.js';
 export { Mesh } from './objects/Mesh.js';
+export { InstancedMesh } from './objects/InstancedMesh.js';
 export { LineSegments } from './objects/LineSegments.js';
 export { LineLoop } from './objects/LineLoop.js';
 export { Line } from './objects/Line.js';