Change PlaneGeometry from XY to XZ as it's more intuitive.

Fixed all the examples that used PlaneGeometry except webgl_terrain_dynamic.html (not sure what's going on :S).

examples/canvas_geometry_cube.html

@@ -76,7 +76,6 @@
 				// Plane
 
 				plane = new THREE.Mesh( new THREE.PlaneGeometry( 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
-				plane.rotation.x = - 90 * ( Math.PI / 180 );
 				scene.add( plane );
 
 				renderer = new THREE.CanvasRenderer();
@@ -166,7 +165,7 @@
 
 			function render() {
 
-				plane.rotation.z = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
+				plane.rotation.y = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
 				renderer.render( scene, camera );
 
 			}

examples/canvas_geometry_earth.html

@@ -62,7 +62,6 @@
 
 				mesh = new THREE.Mesh( new THREE.PlaneGeometry( 300, 300, 3, 3 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/shadow.png' ), overdraw: true } ) );
 				mesh.position.y = - 250;
-				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.add( mesh );
 
 				mesh = new THREE.Mesh( new THREE.SphereGeometry( 200, 20, 20 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ), overdraw: true } ) );

examples/canvas_geometry_terrain.html

@@ -75,14 +75,13 @@
 				for ( var i = 0, l = plane.vertices.length; i < l; i ++ ) {
 
 					var x = i % quality, y = ~~ ( i / quality );
-					plane.vertices[ i ].position.z = data[ ( x * step ) + ( y * step ) * 1024 ] * 2 - 128;
+					plane.vertices[ i ].position.y = data[ ( x * step ) + ( y * step ) * 1024 ] * 2 - 128;
 
 				}
 
 				plane.computeCentroids();
 
 				mesh = new THREE.Mesh( plane, material );
-				mesh.rotation.x = -90 * Math.PI / 180;
 				scene.add( mesh );
 
 				renderer = new THREE.CanvasRenderer();

examples/canvas_interactive_voxelpainter.html

@@ -75,8 +75,7 @@
 
 				projector = new THREE.Projector();
 
-				plane = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000, 20, 20 ), new THREE.MeshFaceMaterial() );
-				plane.rotation.x = - 90 * Math.PI / 180;
+				plane = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000 ), new THREE.MeshFaceMaterial() );
 				scene.add( plane );
 
 				mouse2D = new THREE.Vector3( 0, 10000, 0.5 );

examples/canvas_materials_depth.html

@@ -70,8 +70,6 @@
 
 				plane = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000, 10, 10 ), material );
 				plane.doubleSided = true;
-
-				plane.rotation.x = - 90 * ( Math.PI / 180 );
 				plane.position.y = - 100;
 
 				scene.add( plane );

examples/canvas_materials_video.html

@@ -108,13 +108,14 @@
 				var plane = new THREE.PlaneGeometry( 480, 204, 4, 4 );
 
 				mesh = new THREE.Mesh( plane, material );
+				mesh.rotation.x = Math.PI / 2;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.5;
 				scene.add(mesh);
 
 				mesh = new THREE.Mesh( plane, materialReflection );
 				mesh.position.y = -306;
+				mesh.rotation.x = - Math.PI / 2;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.5;
-				mesh.rotation.x = 180 * Math.PI / 180;
 				mesh.doubleSided = true;
 				scene.add( mesh );
 

examples/js/postprocessing/EffectComposer.js

@@ -126,6 +126,7 @@ THREE.EffectComposer.camera = new THREE.OrthographicCamera( window.innerWidth /
 // shared fullscreen quad scene
 
 THREE.EffectComposer.geometry = new THREE.PlaneGeometry( 1, 1 );
+THREE.EffectComposer.geometry.applyMatrix( new THREE.Matrix4().setRotationX( Math.PI / 2 ) );
 
 THREE.EffectComposer.quad = new THREE.Mesh( THREE.EffectComposer.geometry, null );
 THREE.EffectComposer.quad.position.z = -100;

examples/misc_materials_multimaterials.html

@@ -244,6 +244,7 @@
 					mesh.position.x = i * ( size + 5 ) - ( ( materials.length - 1 ) * ( size + 5 ) / 2 );
 					mesh.position.y = FLOOR + size / 2 + bottom;
 					mesh.position.z = -100;
+					mesh.rotation.x = Math.PI / 2;
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
 					mesh.doubleSided = true;
 					scene.add( mesh );
@@ -265,6 +266,7 @@
 					mesh.position.x = i * ( size + 5 ) - ( ( materials.length - 1 ) * ( size + 5 ) / 2 );
 					mesh.position.y = FLOOR + size / 2 + bottom;
 					mesh.position.z = - 99;
+					mesh.rotation.x = Math.PI / 2;
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
 					mesh.doubleSided = true;
 					scene.add( mesh );

examples/misc_sound.html

@@ -169,7 +169,6 @@
 				var plane = new THREE.PlaneGeometry( 1000, 1000, 100, 100 );
 				mesh = new THREE.Mesh( plane, material_wireframe );
 				mesh.position.y = 0.1;
-				mesh.rotation.x = -Math.PI/2;
 				scene.add( mesh );
 
 

examples/misc_ubiquity_test.html

@@ -82,6 +82,7 @@
 
 				mesh = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
 				mesh.position.y = -500;
+				mesh.rotation.x = Math.PI / 2;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
 				mesh.doubleSided = true;
 				scene.add( mesh );

examples/webgl_animation_skinning.html

@@ -96,12 +96,10 @@
 
 				floor = new THREE.Mesh( planeSimple, matSolid );
 				floor.position.y = -10;
-				floor.rotation.x = -Math.PI/2;
 				floor.scale.set( 25, 25, 25 );
 				scene.add( floor );
 
 				floor = new THREE.Mesh( planeTesselated, matWire );
-				floor.rotation.x = -Math.PI/2;
 				floor.scale.set( 25, 25, 25 );
 				scene.add( floor );
 

examples/webgl_geometry_colors.html

@@ -76,19 +76,16 @@
 
 				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				mesh.position.y = - 250;
-				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.add( mesh );
 
 				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				mesh.position.y = - 250;
 				mesh.position.x = - 400;
-				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.add( mesh );
 
 				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				mesh.position.y = - 250;
 				mesh.position.x = 400;
-				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.add( mesh );
 
 				var faceIndices = [ 'a', 'b', 'c', 'd' ];

examples/webgl_geometry_dynamic.html

@@ -91,7 +91,7 @@
 
 				for ( i = 0, il = geometry.vertices.length; i < il; i ++ ) {
 
-					geometry.vertices[ i ].position.z = 35 * Math.sin( i/2 );
+					geometry.vertices[ i ].position.y = 35 * Math.sin( i/2 );
 
 				}
 
@@ -108,7 +108,6 @@
 				material = new THREE.MeshBasicMaterial( { color: 0x0044ff, map: texture } );
 
 				mesh = new THREE.Mesh( geometry, material );
-				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer( { clearColor: 0xaaccff, clearAlpha: 1 } );
@@ -144,7 +143,7 @@
 
 				for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
 
-					geometry.vertices[ i ].position.z = 35 * Math.sin( i / 5 + ( time + i ) / 7 );
+					geometry.vertices[ i ].position.y = 35 * Math.sin( i / 5 + ( time + i ) / 7 );
 
 				}
 

examples/webgl_geometry_terrain.html

@@ -84,7 +84,7 @@
 
 				for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
 
-					geometry.vertices[ i ].position.z = data[ i ] * 10;
+					geometry.vertices[ i ].position.y = data[ i ] * 10;
 
 				}
 
@@ -92,7 +92,6 @@
 				texture.needsUpdate = true;
 
 				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
-				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer();

examples/webgl_geometry_terrain_fog.html

@@ -87,7 +87,7 @@
 
 				for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
 
-					geometry.vertices[ i ].position.z = data[ i ] * 10;
+					geometry.vertices[ i ].position.y = data[ i ] * 10;
 
 				}
 
@@ -95,7 +95,6 @@
 				texture.needsUpdate = true;
 
 				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
-				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer( { clearColor: 0xefd1b5, clearAlpha: 1 } );

examples/webgl_geometry_text.html

@@ -233,7 +233,6 @@
 				createText();
 
 				var plane = new THREE.Mesh( new THREE.PlaneGeometry( 10000, 10000 ), new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, transparent: true } ) );
-				plane.rotation.x = -Math.PI/2;
 				plane.position.y = 100;
 				scene.add( plane );
 

examples/webgl_hdr.html

@@ -107,11 +107,7 @@
 
 			var container, stats;
 
-			var camera, scene, renderer, mesh, directionalLight;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
+			var camera, scene, renderer;
 			var materialHDR, quad;
 
 			var sign = 1, rate = 1;
@@ -132,10 +128,6 @@
 				scene.add( camera );
 
 
-				directionalLight = new THREE.DirectionalLight( 0xffffff );
-				directionalLight.position.set( 0, 0, 1 ).normalize();
-				scene.add( directionalLight );
-
 				var texture = THREE.ImageUtils.loadTexture( "textures/memorial.png" );
 				texture.minFilter = THREE.LinearFilter;
 				texture.magFilter = THREE.NearestFilter;
@@ -156,6 +148,7 @@
 
 				quad = new THREE.Mesh( plane, materialHDR );
 				quad.position.z = -100;
+				quad.rotation.x = Math.PI / 2;
 				scene.add( quad );
 
 				renderer = new THREE.WebGLRenderer();

examples/webgl_interactive_draggablecubes.html

@@ -91,6 +91,7 @@
 				}
 
 				plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) );
+				plane.geometry.applyMatrix( new THREE.Matrix4().setRotationX( Math.PI / 2 ) );
 				plane.lookAt( camera.position );
 				plane.visible = false;
 				scene.add( plane );

examples/webgl_interactive_voxelpainter.html

@@ -89,7 +89,6 @@
 				// grid
 
 				plane = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000, 20, 20 ), new THREE.MeshBasicMaterial( { color: 0x555555, wireframe: true } ) );
-				plane.rotation.x = - 90 * Math.PI / 180;
 				scene.add( plane );
 
 				mouse2D = new THREE.Vector3( 0, 10000, 0.5 );

examples/webgl_lights_pointlights2.html

@@ -131,7 +131,6 @@
 				// GROUND
 
 				var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 800, 400, 2, 2 ), groundMaterial );
-				mesh.rotation.x = -1.57;
 				mesh.position.y = -5;
 				scene.add( mesh );
 

examples/webgl_loader_json_objconverter.html

@@ -107,9 +107,7 @@
 
 				mesh = new THREE.Mesh( geometry, xm );
 				mesh.position.set( 0, FLOOR, 0 );
-				mesh.rotation.x = Math.PI/2;
 				mesh.scale.set( 10, 10, 10 );
-				mesh.doubleSided = true;
 				scene.add( mesh );
 
 				// SPHERES
@@ -216,6 +214,7 @@
 					mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
 					mesh.position.y = FLOOR + size/2 + bottom;
 					mesh.position.z = -100;
+					mesh.rotation.x = Math.PI / 2;
 					mesh.doubleSided = true;
 					scene.add( mesh );
 
@@ -237,6 +236,7 @@
 					mesh.position.x = i * ( size + 5 ) - ( ( materials.length - 1 )* ( size + 5 )/2);
 					mesh.position.y = FLOOR + size/2 + bottom;
 					mesh.position.z = -99;
+					mesh.rotation.x = Math.PI / 2;
 					mesh.doubleSided = true;
 					scene.add( mesh );
 

examples/webgl_materials_cubemap_dynamic.html

@@ -522,7 +522,6 @@
 				groundBasic.color.setHSV( 0.1, 0.45, 0.995 );
 
 				ground = new THREE.Mesh( new THREE.PlaneGeometry( 50000, 50000 ), groundBasic );
-				ground.rotation.x = - Math.PI / 2;
 				ground.position.y = - 215;
 				scene.add( ground );
 
@@ -563,15 +562,14 @@
 				var shadowTexture = THREE.ImageUtils.loadTexture( "textures/shadowAlpha.png" );
 
 				var shadowPlane = new THREE.PlaneGeometry( 400, 400 );
-				var shadowMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.35, transparent: true,
-														  map: shadowTexture,
-														  polygonOffset: false, polygonOffsetFactor: -0.5, polygonOffsetUnits: 1 } );
+				var shadowMaterial = new THREE.MeshBasicMaterial( {
+					color: 0xff0000, opacity: 0.35, transparent: true, map: shadowTexture,
+					polygonOffset: false, polygonOffsetFactor: -0.5, polygonOffsetUnits: 1
+				} );
 
 				var shadow = new THREE.Mesh( shadowPlane, shadowMaterial );
-				shadow.rotation.x = -Math.PI/2;
-				shadow.rotation.z = Math.PI/2;
-
 				shadow.position.y = sy;
+				shadow.rotation.y = Math.PI / 2;
 
 				object.add( shadow );
 
@@ -682,13 +680,13 @@
 				var shadowHeight = 1.25 * ss * ( bb.max.x - bb.min.x );
 
 				var shadowPlane = new THREE.PlaneGeometry( shadowWidth, shadowHeight );
-				var shadowMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, transparent: true,
-														  map: shadowTexture,
-														  polygonOffset: false, polygonOffsetFactor: -0.5, polygonOffsetUnits: 1 } );
+				var shadowMaterial = new THREE.MeshBasicMaterial( {
+					color: 0xffffff, opacity: 0.5, transparent: true, map: shadowTexture,
+					polygonOffset: false, polygonOffsetFactor: -0.5, polygonOffsetUnits: 1
+				} );
 
 				var shadow = new THREE.Mesh( shadowPlane, shadowMaterial );
-				shadow.rotation.x = -Math.PI/2;
-				shadow.rotation.z = Math.PI/2;
+				shadow.rotation.y = Math.PI / 2;
 				shadow.position.y = s + 10;
 
 				object.root.add( shadow );

examples/webgl_materials_grass.html

@@ -46,10 +46,9 @@
 
 				for ( var i = 0; i < 15; i ++ ) {
 
-					mesh = levels[ i ] = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTextureLevel( bitmap ) ), transparent: true, depthTest: false } ) );
+					mesh = levels[ i ] = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTextureLevel( bitmap ) ), transparent: true, depthWrite: false, depthTest: false } ) );
 					mesh.material.map.needsUpdate = true;
 
-					mesh.rotation.x = - 90 * ( Math.PI / 180 );
 					mesh.position.y = i * 0.25;
 
 					scene.add( mesh );

examples/webgl_materials_texture_filters.html

@@ -132,14 +132,10 @@
 
 
 				var meshCanvas = new THREE.Mesh( geometry, materialCanvas );
-				meshCanvas.rotation.x = Math.PI / 2;
 				meshCanvas.scale.set( 1000, 1000, 1000 );
-				meshCanvas.doubleSided = true;
 
 				var meshCanvas2 = new THREE.Mesh( geometry, materialCanvas2 );
-				meshCanvas2.rotation.x = Math.PI / 2;
 				meshCanvas2.scale.set( 1000, 1000, 1000 );
-				meshCanvas2.doubleSided = true;
 
 
 				// PAINTING
@@ -152,9 +148,12 @@
 					scene.add( meshCanvas );
 					scene2.add( meshCanvas2 );
 
-					var geometry = new THREE.PlaneGeometry( 100, 100 ),
-						mesh = new THREE.Mesh( geometry, materialPainting ),
-						mesh2 = new THREE.Mesh( geometry, materialPainting2 );
+					var geometry = new THREE.PlaneGeometry( 100, 100 );
+					var mesh = new THREE.Mesh( geometry, materialPainting );
+					var mesh2 = new THREE.Mesh( geometry, materialPainting2 );
+
+					mesh.rotation.x = Math.PI / 2;
+					mesh2.rotation.x = Math.PI / 2;
 
 					addPainting( scene, mesh );
 					addPainting( scene2, mesh2 );
@@ -162,23 +161,22 @@
 					function addPainting( zscene, zmesh ) {
 
 						zmesh.scale.x = image.width / 100;
-						zmesh.scale.y = image.height / 100;
+						zmesh.scale.z = image.height / 100;
 
 						zscene.add( zmesh );
 
 						var meshFrame = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 5 } )  );
-
+						meshFrame.rotation.x = Math.PI / 2;
 						meshFrame.scale.x = 1.1 * image.width / 100;
-						meshFrame.scale.y = 1.1 * image.height / 100;
+						meshFrame.scale.z = 1.1 * image.height / 100;
 
 						zscene.add( meshFrame );
 
-						var meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.9, transparent: true } )  );
+						var meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.75, transparent: true } )  );
 
 						meshShadow.position.z = - 1.1 * image.height/2;
 						meshShadow.scale.x = 1.1 * image.width / 100;
-						meshShadow.scale.y = 1.1 * image.height / 100;
-						meshShadow.rotation.x = -Math.PI / 2;
+						meshShadow.scale.z = 1.1 * image.height / 100;
 						zscene.add( meshShadow );
 
 						meshShadow.position.y = - 1.1 * image.height/2;

examples/webgl_morphtargets_md2.html

@@ -121,7 +121,6 @@
 				var ground = new THREE.Mesh( gg, gm );
 				ground.material.map.repeat.set( 8, 8 );
 				ground.material.map.wrapS = ground.material.map.wrapT = THREE.RepeatWrapping;
-				ground.rotation.x = - Math.PI/2;
 				ground.receiveShadow = true;
 
 				scene.add( ground );

examples/webgl_morphtargets_md2_control.html

@@ -122,7 +122,6 @@
 				var ground = new THREE.Mesh( gg, gm );
 				ground.material.map.repeat.set( 64, 64 );
 				ground.material.map.wrapS = ground.material.map.wrapT = THREE.RepeatWrapping;
-				ground.rotation.x = - Math.PI/2;
 				ground.receiveShadow = true;
 
 				scene.add( ground );

examples/webgl_multiple_canvases_circle.html

@@ -230,7 +230,6 @@
 						var mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 						mesh.position.y = - 250;
 						mesh.position.x = - ( noof_balls - 1 ) / 2 *400 + i * 400;
-						mesh.rotation.x = - 90 * Math.PI / 180;
 						scene.add( mesh );
 
 					}
@@ -284,7 +283,7 @@
 
 					}
 
-					renderer = new THREE.WebGLRenderer( { antialias: true, clearColor: 0xffffff } );
+					renderer = new THREE.WebGLRenderer( { antialias: true } );
 					renderer.setSize( container.clientWidth, container.clientHeight );
 
 					container.appendChild( renderer.domElement );

examples/webgl_multiple_canvases_complex.html

@@ -136,19 +136,16 @@
 
 					mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 					mesh.position.y = - 250;
-					mesh.rotation.x = - 90 * Math.PI / 180;
 					scene.add( mesh );
 
 					mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 					mesh.position.y = - 250;
 					mesh.position.x = - 400;
-					mesh.rotation.x = - 90 * Math.PI / 180;
 					scene.add( mesh );
 
 					mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 					mesh.position.y = - 250;
 					mesh.position.x = 400;
-					mesh.rotation.x = - 90 * Math.PI / 180;
 					scene.add( mesh );
 
 					var faceIndices = [ 'a', 'b', 'c', 'd' ];
@@ -217,7 +214,7 @@
 					group3.rotation.x = 0;
 					scene.add( group3 );
 
-					renderer = new THREE.WebGLRenderer( { antialias: true, clearColor: 0xffffff } );
+					renderer = new THREE.WebGLRenderer( { antialias: true } );
 					renderer.setSize( container.clientWidth, container.clientHeight );
 
 					container.appendChild( renderer.domElement );

examples/webgl_multiple_canvases_grid.html

@@ -152,19 +152,16 @@
 
 					mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 					mesh.position.y = - 250;
-					mesh.rotation.x = - 90 * Math.PI / 180;
 					scene.add( mesh );
 
 					mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 					mesh.position.y = - 250;
 					mesh.position.x = - 400;
-					mesh.rotation.x = - 90 * Math.PI / 180;
 					scene.add( mesh );
 
 					mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 					mesh.position.y = - 250;
 					mesh.position.x = 400;
-					mesh.rotation.x = - 90 * Math.PI / 180;
 					scene.add( mesh );
 
 					var faceIndices = [ 'a', 'b', 'c', 'd' ];
@@ -233,7 +230,7 @@
 					group3.rotation.x = 0;
 					scene.add( group3 );
 
-					renderer = new THREE.WebGLRenderer( { antialias: true, clearColor: 0xffffff } );
+					renderer = new THREE.WebGLRenderer( { antialias: true } );
 					renderer.setSize( container.clientWidth, container.clientHeight );
 
 					container.appendChild( renderer.domElement );

examples/webgl_multiple_views.html

@@ -133,19 +133,16 @@
 
 				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				mesh.position.y = - 250;
-				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.add( mesh );
 
 				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				mesh.position.y = - 250;
 				mesh.position.x = - 400;
-				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.add( mesh );
 
 				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				mesh.position.y = - 250;
 				mesh.position.x = 400;
-				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.add( mesh );
 
 				var faceIndices = [ 'a', 'b', 'c', 'd' ];

examples/webgl_particles_dynamic.html

@@ -148,7 +148,6 @@
 				scene.add( parent );
 
 				var grid = new THREE.ParticleSystem( new THREE.PlaneGeometry( 15000, 15000, 64, 64 ), new THREE.ParticleBasicMaterial( { color: 0xff0000, size: 10 } ) );
-				grid.rotation.x = Math.PI/2;
 				grid.position.y = -400;
 				parent.add( grid );
 

examples/webgl_postprocessing.html

@@ -112,22 +112,21 @@
 				//
 
 				var materialColor = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/cube/SwedishRoyalCastle/pz.jpg" ), depthTest: false } );
-				var plane = new THREE.PlaneGeometry( 1, 1 );
 
-				quadBG = new THREE.Mesh( plane, materialColor );
+				quadBG = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), materialColor );
 				quadBG.position.z = -500;
-				quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
+				quadBG.rotation.x = Math.PI / 2;
+				quadBG.scale.set( window.innerWidth, 1, window.innerHeight );
 				sceneBG.add( quadBG );
 
 				//
 
 				var sceneMask = new THREE.Scene();
 
-				var plane = new THREE.PlaneGeometry( 1, 1 );
-
-				quadMask = new THREE.Mesh( plane, new THREE.MeshBasicMaterial( { color: 0xffaa00 } )  );
+				quadMask = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xffaa00 } )  );
 				quadMask.position.z = -300;
-				quadMask.scale.set( window.innerWidth / 2, window.innerHeight/2, 1 );
+				quadMask.rotation.x = Math.PI / 2;
+				quadMask.scale.set( window.innerWidth / 2, 1, window.innerHeight / 2 );
 				sceneMask.add( quadMask );
 
 				//

examples/webgl_postprocessing_dof.html

@@ -263,6 +263,7 @@
 
 				postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
 				postprocessing.quad.position.z = - 500;
+				postprocessing.quad.rotation.x = Math.PI / 2;
 				postprocessing.scene.add( postprocessing.quad );
 
 			}

examples/webgl_rtt.html

@@ -156,12 +156,14 @@
 
 				quad = new THREE.Mesh( plane, material );
 				quad.position.z = -100;
+				quad.rotation.x = Math.PI / 2;
 				sceneRTT.add( quad );
 
 				createMesh( new THREE.TorusGeometry( 100, 25, 15, 30 ), sceneRTT );
 
 				quad = new THREE.Mesh( plane, materialScreen );
 				quad.position.z = -100;
+				quad.rotation.x = Math.PI / 2;
 				sceneScreen.add( quad );
 
 				var n = 5,

examples/webgl_shader.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
 	<head>
-		<title>three.js webgl - materials - shaders [Monjori]</title>
+		<title>three.js webgl - shader [Monjori]</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
@@ -129,6 +129,7 @@
 					} );
 
 				mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), material );
+				mesh.geometry.applyMatrix( new THREE.Matrix4().setRotationX( Math.PI / 2 ) );
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer();

examples/webgl_shading_physical.html

@@ -196,7 +196,6 @@
 
 				var ground = new THREE.Mesh( planeGeometry, groundMaterial );
 				ground.position.set( 0, 0, 0 );
-				ground.rotation.x = -Math.PI/2;
 				ground.scale.set( 1000, 1000, 1000 );
 
 				ground.receiveShadow = true;

examples/webgl_shadowmap.html

@@ -166,6 +166,7 @@
 				var hudMesh = new THREE.Mesh( hudGeo, hudMaterial );
 				hudMesh.position.x = ( SCREEN_WIDTH - SHADOW_MAP_WIDTH / 2 ) * -0.5;
 				hudMesh.position.y = ( SCREEN_HEIGHT - SHADOW_MAP_HEIGHT / 2 ) * -0.5;
+				hudMesh.rotation.x = Math.PI / 2;
 
 				sceneHUD = new THREE.Scene();
 				sceneHUD.add( hudMesh );
@@ -186,7 +187,6 @@
 				var ground = new THREE.Mesh( geometry, planeMaterial );
 
 				ground.position.set( 0, FLOOR, 0 );
-				ground.rotation.x = -Math.PI/2;
 				ground.scale.set( 100, 100, 100 );
 
 				ground.castShadow = false;

examples/webgl_terrain_dynamic.html

@@ -419,6 +419,7 @@
 
 				quadTarget = new THREE.Mesh( plane, new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );
 				quadTarget.position.z = -500;
+				// quadTarget.rotation.x = Math.PI;
 				sceneRenderTarget.add( quadTarget );
 
 				// TERRAIN MESH
@@ -429,7 +430,6 @@
 				geometryTerrain.computeTangents();
 
 				terrain = new THREE.Mesh( geometryTerrain, mlib[ "terrain" ] );
-				terrain.rotation.set( -Math.PI/2, 0, 0 );
 				terrain.position.set( 0, -125, 0 );
 				terrain.visible = false;
 				scene.add( terrain );
@@ -631,6 +631,7 @@
 
 				var meshTmp = new THREE.Mesh( new THREE.PlaneGeometry( SCREEN_WIDTH, SCREEN_HEIGHT ), shaderMaterial );
 				meshTmp.position.z = -500;
+				// meshTmp.rotation.x = Math.PI / 2;
 				sceneTmp.add( meshTmp );
 
 				renderer.render( sceneTmp, cameraOrtho, target, true );

src/extras/geometries/PlaneGeometry.js

@@ -3,42 +3,42 @@
  * based on http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/objects/primitives/Plane.as
  */
 
-THREE.PlaneGeometry = function ( width, height, segmentsWidth, segmentsHeight ) {
+THREE.PlaneGeometry = function ( width, depth, segmentsWidth, segmentsDepth ) {
 
 	THREE.Geometry.call( this );
 
-	var ix, iy,
+	var ix, iz,
 	width_half = width / 2,
-	height_half = height / 2,
+	depth_half = depth / 2,
 	gridX = segmentsWidth || 1,
-	gridY = segmentsHeight || 1,
+	gridZ = segmentsDepth || 1,
 	gridX1 = gridX + 1,
-	gridY1 = gridY + 1,
+	gridZ1 = gridZ + 1,
 	segment_width = width / gridX,
-	segment_height = height / gridY,
-	normal = new THREE.Vector3( 0, 0, 1 );
+	segment_depth = depth / gridZ,
+	normal = new THREE.Vector3( 0, 1, 0 );
 
-	for ( iy = 0; iy < gridY1; iy++ ) {
+	for ( iz = 0; iz < gridZ1; iz ++ ) {
 
-		for ( ix = 0; ix < gridX1; ix++ ) {
+		for ( ix = 0; ix < gridX1; ix ++ ) {
 
 			var x = ix * segment_width - width_half;
-			var y = iy * segment_height - height_half;
+			var z = iz * segment_depth - depth_half;
 
-			this.vertices.push( new THREE.Vertex( new THREE.Vector3( x, - y, 0 ) ) );
+			this.vertices.push( new THREE.Vertex( new THREE.Vector3( x, 0, z ) ) );
 
 		}
 
 	}
 
-	for ( iy = 0; iy < gridY; iy++ ) {
+	for ( iz = 0; iz < gridZ; iz ++ ) {
 
-		for ( ix = 0; ix < gridX; ix++ ) {
+		for ( ix = 0; ix < gridX; ix ++ ) {
 
-			var a = ix + gridX1 * iy;
-			var b = ix + gridX1 * ( iy + 1 );
-			var c = ( ix + 1 ) + gridX1 * ( iy + 1 );
-			var d = ( ix + 1 ) + gridX1 * iy;
+			var a = ix + gridX1 * iz;
+			var b = ix + gridX1 * ( iz + 1 );
+			var c = ( ix + 1 ) + gridX1 * ( iz + 1 );
+			var d = ( ix + 1 ) + gridX1 * iz;
 
 			var face = new THREE.Face4( a, b, c, d );
 			face.normal.copy( normal );
@@ -46,11 +46,11 @@ THREE.PlaneGeometry = function ( width, height, segmentsWidth, segmentsHeight )
 
 			this.faces.push( face );
 			this.faceVertexUvs[ 0 ].push( [
-						new THREE.UV( ix / gridX, iy / gridY ),
-						new THREE.UV( ix / gridX, ( iy + 1 ) / gridY ),
-						new THREE.UV( ( ix + 1 ) / gridX, ( iy + 1 ) / gridY ),
-						new THREE.UV( ( ix + 1 ) / gridX, iy / gridY )
-					] );
+				new THREE.UV( ix / gridX, iz / gridZ ),
+				new THREE.UV( ix / gridX, ( iz + 1 ) / gridZ ),
+				new THREE.UV( ( ix + 1 ) / gridX, ( iz + 1 ) / gridZ ),
+				new THREE.UV( ( ix + 1 ) / gridX, iz / gridZ )
+			] );
 
 		}