Fixed examples.

examples/webgl_geometry_large_mesh.html

@@ -49,6 +49,9 @@
 
 		<script src="js/loaders/BinaryLoader.js"></script>
 
+		<script src="js/renderers/Renderer.js"></script>
+		<script src="js/renderers/CanvasRenderer.js"></script>
+
 		<script src="js/libs/stats.min.js"></script>
 
 		<script>
@@ -216,7 +219,7 @@
 			}
 
 			function render() {
-			
+
 				var time = Date.now() * 0.001;
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;

examples/webgl_interactive_lines.html

@@ -49,17 +49,10 @@
 
 				scene = new THREE.Scene();
 
-				var PI2 = Math.PI * 2;
-				var program = function ( context ) {
+				var geometry = new THREE.SphereGeometry( 5 );
+				var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
 
-					context.beginPath();
-					context.arc( 0, 0, 0.5, 0, PI2, true );
-					context.fill();
-
-				}
-
-				sphereInter = new THREE.Sprite( new THREE.SpriteMaterial( { color: 0xff0000 } ) );
-				sphereInter.scale.x = sphereInter.scale.y = 10;
+				sphereInter = new THREE.Mesh( geometry, material );
 				sphereInter.visible = false;
 				scene.add( sphereInter );
 
@@ -115,7 +108,7 @@
 
 				}
 
-				scene.add(parentTransform);
+				scene.add( parentTransform );
 
 				projector = new THREE.Projector();
 				raycaster = new THREE.Raycaster();

examples/webgl_interactive_raycasting_pointcloud.html

@@ -49,24 +49,24 @@
 			var spheres = [];
 			var spheresIndex = 0;
 			var clock;
-			
+
 			var threshold = 0.1;
-			var pointSize = 0.01;
+			var pointSize = 0.05;
 			var width = 150;
 			var length = 150;
 			var rotateY = new THREE.Matrix4().makeRotationY( 0.005 );
 
 			init();
 			animate();
-			
+
 			function generatePointCloudGeometry( color, width, length ){
-			
+
 				var geometry = new THREE.BufferGeometry();
 				var numPoints = width*length;
-				
+
 				var positions = new Float32Array( numPoints*3 );
 				var colors = new Float32Array( numPoints*3 );
-				
+
 				var k = 0;
 
 				for( var i = 0; i < width; i++ ) {
@@ -78,11 +78,11 @@
 						var x = u - 0.5;
 						var y = ( Math.cos( u * Math.PI * 8 ) + Math.sin( v * Math.PI * 8 ) ) / 20;
 						var z = v - 0.5;
-						
+
 						positions[ 3 * k ] = x;
 						positions[ 3 * k + 1 ] = y;
 						positions[ 3 * k + 2 ] = z;
-						
+
 						var intensity = ( y + 0.1 ) * 5;
 						colors[ 3 * k ] = color.r * intensity;
 						colors[ 3 * k + 1 ] = color.g * intensity;
@@ -93,32 +93,32 @@
 					}
 
 				}
-				
+
 				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
 				geometry.computeBoundingBox();
-				
+
 				return geometry;
-			
+
 			}
-			
+
 			function generatePointcloud( color, width, length ) {
-			
+
 				var geometry = generatePointCloudGeometry( color, width, length );
-				
+
 				var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
 				var pointcloud = new THREE.PointCloud( geometry, material );
-				
+
 				return pointcloud;
-				
+
 			}
-			
+
 			function generateIndexedPointcloud( color, width, length ) {
-			
+
 				var geometry = generatePointCloudGeometry( color, width, length );
 				var numPoints = width * length;
 				var indices = new Uint16Array( numPoints );
-				
+
 				var k = 0;
 
 				for( var i = 0; i < width; i++ ) {
@@ -131,22 +131,22 @@
 					}
 
 				}
-				
+
 				geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
-				
+
 				var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
 				var pointcloud = new THREE.PointCloud( geometry, material );
-				
+
 				return pointcloud;
-				
+
 			}
-			
+
 			function generateIndexedWithOffsetPointcloud( color, width, length ){
-			
+
 				var geometry = generatePointCloudGeometry( color, width, length );
 				var numPoints = width * length;
 				var indices = new Uint16Array( numPoints );
-				
+
 				var k = 0;
 
 				for( var i = 0; i < width; i++ ){
@@ -159,26 +159,26 @@
 					}
 
 				}
-				
+
 				geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
-				
+
 				var offset = { start: 0, count: indices.length, index: 0 };
 				geometry.offsets.push( offset );
-				
+
 				var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
 				var pointcloud = new THREE.PointCloud( geometry, material );
-				
+
 				return pointcloud;
-			
+
 			}
-			
+
 			function generateRegularPointcloud( color, width, length ) {
-			
+
 				var geometry = new THREE.Geometry();
 				var numPoints = width * length;
-				
+
 				var colors = [];
-				
+
 				var k = 0;
 
 				for( var i = 0; i < width; i++ ) {
@@ -189,31 +189,31 @@
 						var v = j / length;
 						var x = u - 0.5;
 						var y = ( Math.cos( u * Math.PI * 8 ) + Math.sin( v * Math.PI * 8) ) / 20;
-						var z = v - 0.5;	
+						var z = v - 0.5;
 						var v = new THREE.Vector3( x,y,z );
-						
+
 						var intensity = ( y + 0.1 ) * 7;
 						colors[ 3 * k ] = color.r * intensity;
 						colors[ 3 * k + 1 ] = color.g * intensity;
 						colors[ 3 * k + 2 ] = color.b * intensity;
-						
+
 						geometry.vertices.push( v );
 						colors[ k ] = ( color.clone().multiplyScalar( intensity ) );
-						
+
 						k++;
 
 					}
 
 				}
-				
+
 				geometry.colors = colors;
 				geometry.computeBoundingBox();
-				
+
 				var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
 				var pointcloud = new THREE.PointCloud( geometry, material );
-				
+
 				return pointcloud;
-			
+
 			}
 
 			function init() {
@@ -221,7 +221,7 @@
 				container = document.getElementById( 'container' );
 
 				scene = new THREE.Scene();
-				
+
 				clock = new THREE.Clock();
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
@@ -234,35 +234,35 @@
 				pcBuffer.scale.set( 10,10,10 );
 				pcBuffer.position.set( -5,0,5 );
 				scene.add( pcBuffer );
-					
+
 				var pcIndexed = generateIndexedPointcloud( new THREE.Color( 0,1,0 ), width, length );
 				pcIndexed.scale.set( 10,10,10 );
 				pcIndexed.position.set( 5,0,5 );
 				scene.add( pcIndexed );
-			
+
 				var pcIndexedOffset = generateIndexedWithOffsetPointcloud( new THREE.Color( 0,1,1 ), width, length );
 				pcIndexedOffset.scale.set( 10,10,10 );
 				pcIndexedOffset.position.set( 5,0,-5 );
 				scene.add( pcIndexedOffset );
-				
+
 				var pcRegular = generateRegularPointcloud( new THREE.Color( 1,0,1 ), width, length );
 				pcRegular.scale.set( 10,10,10 );
 				pcRegular.position.set( -5,0,-5 );
 				scene.add( pcRegular );
 
 				pointclouds = [ pcBuffer, pcIndexed, pcIndexedOffset, pcRegular ];
-				
+
 				//
-				
+
 				var sphereGeometry = new THREE.SphereGeometry( 0.1, 32, 32 );
 				var sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, shading: THREE.FlatShading } );
-				
-				for ( var i = 0; i < 40; i++ ) { 
-				
+
+				for ( var i = 0; i < 40; i++ ) {
+
 					var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
 					scene.add( sphere );
 					spheres.push( sphere );
-				
+
 				}
 
 				//
@@ -289,7 +289,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-			
+
 			}
 
 			function onDocumentMouseMove( event ) {
@@ -318,41 +318,41 @@
 				stats.update();
 
 			}
-			
+
 			var toggle = 0;
-			
-			function render() { 
-			
+
+			function render() {
+
 				camera.applyMatrix( rotateY );
 				camera.updateMatrixWorld( true );
-				
+
 				vector.set( mouse.x, mouse.y, 0.1 );
 
 				projector.unprojectVector( vector, camera );
 
 				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
-				
+
 				var intersections = raycaster.intersectObjects( pointclouds );
 				intersection = ( intersections.length ) > 0 ? intersections[ 0 ] : null;
-				
+
 				if ( toggle > 0.02 && intersection !== null) {
-				
+
 					spheres[ spheresIndex ].position.copy( intersection.point );
 					spheres[ spheresIndex ].scale.set( 1, 1, 1 );
 					spheresIndex = ( spheresIndex + 1 ) % spheres.length;
-					
+
 					toggle = 0;
-				
+
 				}
-				
+
 				for ( var i = 0; i < spheres.length; i++ ) {
-					
+
 					var sphere = spheres[ i ];
 					sphere.scale.multiplyScalar( 0.98 );
 					sphere.scale.clampScalar( 0.01, 1 );
-				
+
 				}
-				
+
 				toggle += clock.getDelta();
 
 				renderer.render( scene, camera );

examples/webgl_loader_json_objconverter.html

@@ -37,6 +37,8 @@
 
 		<script src="../build/three.min.js"></script>
 		<script src="js/loaders/DDSLoader.js"></script>
+		<script src="js/renderers/Renderer.js"></script>
+		<script src="js/renderers/CanvasRenderer.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>

examples/webgl_materials_texture_compressed.html

@@ -38,7 +38,6 @@
 		</div>
 
 		<script src="../build/three.min.js"></script>
-		<script src="js/loaders/CompressedTextureLoader.js"></script>
 		<script src="js/loaders/DDSLoader.js"></script>
 
 		<script src="js/Detector.js"></script>
@@ -72,7 +71,7 @@
 				*/
 
 				var loader = new THREE.DDSLoader();
-				
+
 				var map1 = loader.load( 'textures/compressed/disturb_dxt1_nomip.dds' );
 				map1.minFilter = map1.magFilter = THREE.LinearFilter;
 				map1.anisotropy = 4;
@@ -122,7 +121,7 @@
 				var material6 = new THREE.MeshBasicMaterial( { envMap: cubemap3 } );
 				var material7 = new THREE.MeshBasicMaterial( { map: map5 } );
 				var material8 = new THREE.MeshBasicMaterial( { map: map6 } );
-				
+
 
 				var mesh = new THREE.Mesh( new THREE.TorusGeometry( 100, 50, 32, 16 ), material1 );
 				mesh.position.x = -600;

examples/webgl_postprocessing_dof2.html

@@ -149,7 +149,7 @@ Use WEBGL Depth buffer support?
 
 				// Focusing Floor
 
-				// var planeGeometry = new THREE.PlaneGeometry( 500, 500, 1, 1 );
+				// var planeGeometry = new THREE.PlaneBufferGeometry( 500, 500, 1, 1 );
 
 				// var planeMat = new THREE.MeshPhongMaterial(
 				// 	{  map: texture }
@@ -161,14 +161,15 @@ Use WEBGL Depth buffer support?
 				// scene.add(plane);
 
 				// Plane particles
-				var planePiece = new THREE.PlaneGeometry( 10, 10, 1, 1 );
+				var planePiece = new THREE.PlaneBufferGeometry( 10, 10, 1, 1 );
 
 				var planeMat = new THREE.MeshPhongMaterial( {
 						color: 0xffffff * 0.4,
 						shininess: 0.5,
-						specular: 0xffffff ,
+						specular: 0xffffff,
 						envMap: textureCube,
-						side: THREE.DoubleSide } );
+						side: THREE.DoubleSide
+				} );
 
 				var rand = Math.random;
 
@@ -238,7 +239,7 @@ Use WEBGL Depth buffer support?
 
 					mesh.position.set(
 						(Math.random() - 0.5) * 200,
-						Math.random() * 50, 
+						Math.random() * 50,
 						(Math.random() - 0.5)  * 200
 					);
 
@@ -444,7 +445,7 @@ Use WEBGL Depth buffer support?
 
 				} );
 
-				postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
+				postprocessing.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
 				postprocessing.quad.position.z = - 500;
 				postprocessing.scene.add( postprocessing.quad );
 

examples/webgldeferred_animation.html

@@ -67,10 +67,9 @@
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			var SCALE = 0.75;
-			var MARGIN = 100;
 
 			var WIDTH = window.innerWidth;
-			var HEIGHT = window.innerHeight - 2 * MARGIN;
+			var HEIGHT = window.innerHeight;
 
 			var NEAR = 1.0, FAR = 350.0;
 			var VIEW_ANGLE = 45;
@@ -117,10 +116,6 @@
 
 				renderer = new THREE.WebGLDeferredRenderer( { width: WIDTH, height: HEIGHT, scale: SCALE, brightness: 2, antialias: true } );
 
-				renderer.domElement.style.position = "absolute";
-				renderer.domElement.style.top = MARGIN + "px";
-				renderer.domElement.style.left = "0px";
-
 				var container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 

examples/webgldeferred_arealights.html

@@ -69,10 +69,9 @@
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			var SCALE = 1;
-			var MARGIN = 100;
 
 			var WIDTH = window.innerWidth;
-			var HEIGHT = window.innerHeight - 2 * MARGIN;
+			var HEIGHT = window.innerHeight;
 
 			var NEAR = 1.0, FAR = 350.0;
 			var VIEW_ANGLE = 40;
@@ -110,10 +109,6 @@
 
 				renderer = new THREE.WebGLDeferredRenderer( { width: WIDTH, height: HEIGHT, scale: SCALE, antialias: true, tonemapping: THREE.FilmicOperator, brightness: 2.5 } );
 
-				renderer.domElement.style.position = "absolute";
-				renderer.domElement.style.top = MARGIN + "px";
-				renderer.domElement.style.left = "0px";
-
 				var container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 

examples/webgldeferred_pointlights.html

@@ -69,10 +69,9 @@
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			var SCALE = 1;
-			var MARGIN = 100;
 
 			var WIDTH = window.innerWidth;
-			var HEIGHT = window.innerHeight - 2 * MARGIN;
+			var HEIGHT = window.innerHeight;
 
 			var NEAR = 1.0, FAR = 350.0;
 			var VIEW_ANGLE = 45;
@@ -111,10 +110,6 @@
 
 				renderer = new THREE.WebGLDeferredRenderer( { width: WIDTH, height: HEIGHT, scale: SCALE, antialias: true } );
 
-				renderer.domElement.style.position = "absolute";
-				renderer.domElement.style.top = MARGIN + "px";
-				renderer.domElement.style.left = "0px";
-
 				var container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );