Simplified skyboxes handling in examples.

examples/webgl_materials_cars.html

@@ -138,7 +138,7 @@
 			var container, stats;
 
 			var camera, scene, renderer;
-			var cameraCube, sceneCube, cubeTarget;
+			var cameraCube, sceneCube;
 
 			var m, mi;
 
@@ -168,10 +168,9 @@
 				// CAMERAS
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
-				cameraCube = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
-				cubeTarget = new THREE.Vector3( 0, 0, 0 );
-
 				scene.add( camera );
+
+				cameraCube = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 				sceneCube.add( cameraCube );
 
 				// LIGHTS
@@ -609,20 +608,13 @@
 
 				var timer = -0.0002 * Date.now();
 
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-
 				camera.position.x = 1000 * Math.cos( timer );
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.z = 1000 * Math.sin( timer );
 
 				camera.lookAt( scene.position );
+				cameraCube.rotation.copy( camera.rotation );
 
-				cubeTarget.x = - camera.position.x;
-				cubeTarget.y = - camera.position.y;
-				cubeTarget.z = - camera.position.z;
-
-				cameraCube.lookAt( cubeTarget );
-
-				renderer.clear();
 				renderer.render( sceneCube, cameraCube );
 				renderer.render( scene, camera );
 

examples/webgl_materials_cars_anaglyph.html

@@ -596,9 +596,8 @@
 
 				var timer = -0.0002 * Date.now();
 
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-
 				camera.position.x = 1000 * Math.cos( timer );
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.z = 1000 * Math.sin( timer );
 
 				camera.lookAt( scene.position );

examples/webgl_materials_cubemap.html

@@ -47,9 +47,9 @@
 			var container, stats;
 
 			var camera, scene, renderer;
-			var cameraCube, sceneCube, cubeTarget;
+			var cameraCube, sceneCube;
 
-			var mesh, zmesh, lightMesh, geometry;
+			var mesh, lightMesh, geometry;
 
 			var loader;
 
@@ -76,11 +76,9 @@
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 2000;
+				scene.add( camera );
 
 				cameraCube = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100 );
-				cubeTarget = new THREE.Vector3( 0, 0, 0 );
-
-				scene.add( camera );
 				sceneCube.add( cameraCube );
 
 				// LIGHTS
@@ -207,21 +205,15 @@
 
 				var timer = -0.0002 * Date.now();
 
+				lightMesh.position.x = 1500 * Math.cos( timer );
+				lightMesh.position.z = 1500 * Math.sin( timer );
+
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.lookAt( scene.position );
+				cameraCube.rotation.copy( camera.rotation );
 
-				cubeTarget.x = - camera.position.x;
-				cubeTarget.y = - camera.position.y;
-				cubeTarget.z = - camera.position.z;
-
-				cameraCube.lookAt( cubeTarget );
-
-				lightMesh.position.x = 1500 * Math.cos( timer );
-				lightMesh.position.z = 1500 * Math.sin( timer );
-
-				renderer.clear();
 				renderer.render( sceneCube, cameraCube );
 				renderer.render( scene, camera );
 

examples/webgl_materials_cubemap_balls_reflection.html

@@ -46,9 +46,9 @@
 			var container;
 
 			var camera, scene, renderer;
-			var cameraCube, sceneCube, cubeTarget;
+			var cameraCube, sceneCube;
 
-			var mesh, zmesh, lightMesh, geometry;
+			var mesh, lightMesh, geometry;
 			var spheres = [];
 
 			var directionalLight, pointLight;
@@ -74,12 +74,12 @@
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
+				scene.add( camera );
 
 				cameraCube = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
-
 				cubeTarget = new THREE.Vector3( 0, 0, 0 );
 
-				scene.add( camera );
+
 				sceneCube.add( cameraCube );
 
 				var geometry = new THREE.SphereGeometry( 100, 32, 16 );
@@ -159,17 +159,6 @@
 
 				var timer = 0.0001 * Date.now();
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-
-				camera.lookAt( scene.position );
-
-				cubeTarget.x = - camera.position.x;
-				cubeTarget.y = - camera.position.y;
-				cubeTarget.z = - camera.position.z;
-
-				cameraCube.lookAt( cubeTarget );
-
 				for ( var i = 0, il = spheres.length; i < il; i ++ ) {
 
 					var sphere = spheres[ i ];
@@ -179,7 +168,12 @@
 
 				}
 
-				renderer.clear();
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+				camera.lookAt( scene.position );
+				cameraCube.rotation.copy( camera.rotation );
+
 				renderer.render( sceneCube, cameraCube );
 				renderer.render( scene, camera );
 

examples/webgl_materials_cubemap_balls_reflection_anaglyph.html

@@ -47,7 +47,7 @@
 
 			var camera, scene, renderer;
 
-			var mesh, zmesh, lightMesh, geometry;
+			var mesh, lightMesh, geometry;
 			var spheres = [];
 
 			var directionalLight, pointLight;

examples/webgl_materials_cubemap_balls_refraction.html

@@ -46,9 +46,9 @@
 			var container;
 
 			var camera, scene, renderer;
-			var cameraCube, sceneCube, cubeTarget;
+			var cameraCube, sceneCube;
 
-			var mesh, zmesh, lightMesh, geometry;
+			var mesh, lightMesh, geometry;
 			var spheres = [];
 
 			var directionalLight, pointLight;
@@ -73,11 +73,9 @@
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
+				scene.add( camera );
 
 				cameraCube = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
-				cubeTarget = new THREE.Vector3( 0, 0, 0 );
-
-				scene.add( camera );
 				sceneCube.add( cameraCube );
 
 				var geometry = new THREE.SphereGeometry( 100, 32, 16 );
@@ -157,17 +155,6 @@
 
 				var timer = 0.0001 * Date.now();
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-
-				camera.lookAt( scene.position );
-
-				cubeTarget.x = - camera.position.x;
-				cubeTarget.y = - camera.position.y;
-				cubeTarget.z = - camera.position.z;
-
-				cameraCube.lookAt( cubeTarget );
-
 				for ( var i = 0, il = spheres.length; i < il; i ++ ) {
 
 					var sphere = spheres[ i ];
@@ -177,7 +164,12 @@
 
 				}
 
-				renderer.clear();
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+				camera.lookAt( scene.position );
+				cameraCube.rotation.copy( camera.rotation );
+
 				renderer.render( sceneCube, cameraCube );
 				renderer.render( scene, camera );
 

examples/webgl_materials_cubemap_balls_refraction_crosseyed.html

@@ -50,7 +50,7 @@
 
 			var camera, scene, renderer;
 
-			var mesh, zmesh, lightMesh, geometry;
+			var mesh, lightMesh, geometry;
 			var spheres = [];
 
 			var directionalLight, pointLight;