Added pingponging to webgl_materials_cubemap_dynamic2 example.

mrdoob · mrdoob · commit 1204287cb050 · 2016-05-25T16:06:56.000-07:00
diff --git a/examples/webgl_materials_cubemap_dynamic2.html b/examples/webgl_materials_cubemap_dynamic2.html
@@ -35,10 +35,12 @@
 
 		<script>
 
-			var camera, cubeCamera, scene, renderer;
-			var cube, sphere, torus;
+			var camera, scene, renderer;
+			var cube, sphere, torus, material;
 
-			var fov = 70,
+			var count = 0, cubeCamera1, cubeCamera2;
+
+			var fov = 60,
 			isUserInteracting = false,
 			onMouseDownMouseX = 0, onMouseDownMouseY = 0,
 			lon = 0, onMouseDownLon = 0,
@@ -62,31 +64,37 @@
 
 				scene = new THREE.Scene();
 
-				var mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: texture } ) );
+				var mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 32, 16 ), new THREE.MeshBasicMaterial( { map: texture } ) );
 				mesh.scale.x = -1;
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				cubeCamera = new THREE.CubeCamera( 1, 1000, 256 );
-				cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
-				scene.add( cubeCamera );
+				cubeCamera1 = new THREE.CubeCamera( 1, 1000, 256 );
+				cubeCamera1.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
+				scene.add( cubeCamera1 );
+
+				cubeCamera2 = new THREE.CubeCamera( 1, 1000, 256 );
+				cubeCamera2.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
+				scene.add( cubeCamera2 );
 
 				document.body.appendChild( renderer.domElement );
 
 				//
 
-				var material = new THREE.MeshBasicMaterial( { envMap: cubeCamera.renderTarget.texture } );
+				material = new THREE.MeshBasicMaterial( {
+					envMap: cubeCamera2.renderTarget.texture
+				} );
 
-				sphere = new THREE.Mesh( new THREE.SphereGeometry( 20, 30, 15 ), material );
+				sphere = new THREE.Mesh( new THREE.IcosahedronGeometry( 20, 3 ), material );
 				scene.add( sphere );
 
 				cube = new THREE.Mesh( new THREE.BoxGeometry( 20, 20, 20 ), material );
 				scene.add( cube );
 
-				torus = new THREE.Mesh( new THREE.TorusKnotGeometry( 20, 5, 100, 25 ), material );
+				torus = new THREE.Mesh( new THREE.TorusKnotGeometry( 10, 5, 100, 25 ), material );
 				scene.add( torus );
 
 				//
@@ -178,23 +186,16 @@
 				phi = THREE.Math.degToRad( 90 - lat );
 				theta = THREE.Math.degToRad( lon );
 
-				sphere.position.x = Math.sin( time * 0.001 ) * 30;
-				sphere.position.y = Math.sin( time * 0.0011 ) * 30;
-				sphere.position.z = Math.sin( time * 0.0012 ) * 30;
-
-				sphere.rotation.x += 0.02;
-				sphere.rotation.y += 0.03;
-
-				cube.position.x = Math.sin( time * 0.001 + 2 ) * 30;
-				cube.position.y = Math.sin( time * 0.0011 + 2 ) * 30;
-				cube.position.z = Math.sin( time * 0.0012 + 2 ) * 30;
+				cube.position.x = Math.cos( time * 0.001 ) * 30;
+				cube.position.y = Math.sin( time * 0.001 ) * 30;
+				cube.position.z = Math.sin( time * 0.001 ) * 30;
 
 				cube.rotation.x += 0.02;
 				cube.rotation.y += 0.03;
 
-				torus.position.x = Math.sin( time * 0.001 + 4 ) * 30;
-				torus.position.y = Math.sin( time * 0.0011 + 4 ) * 30;
-				torus.position.z = Math.sin( time * 0.0012 + 4 ) * 30;
+				torus.position.x = Math.cos( time * 0.001 + 10 ) * 30;
+				torus.position.y = Math.sin( time * 0.001 + 10 ) * 30;
+				torus.position.z = Math.sin( time * 0.001 + 10 ) * 30;
 
 				torus.rotation.x += 0.02;
 				torus.rotation.y += 0.03;
@@ -207,7 +208,21 @@
 
 				sphere.visible = false; // *cough*
 
-				cubeCamera.updateCubeMap( renderer, scene );
+				// pingpong
+
+				if ( count % 2 === 0 ) {
+
+					material.envMap = cubeCamera1.renderTarget.texture;
+					cubeCamera2.updateCubeMap( renderer, scene );
+
+				} else {
+
+					material.envMap = cubeCamera2.renderTarget.texture;
+					cubeCamera1.updateCubeMap( renderer, scene );
+
+				}
+
+				count ++;
 
 				sphere.visible = true; // *cough*
 
