webgl_mirror.html resizable

examples/webgl_mirror.html

@@ -26,14 +26,11 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { Reflector } from './jsm/objects/Reflector.js';
-
-			// scene size
-			const WIDTH = window.innerWidth;
-			const HEIGHT = window.innerHeight;
+			import Stats from "./jsm/libs/stats.module.js";
 
 			// camera
 			const VIEW_ANGLE = 45;
-			const ASPECT = WIDTH / HEIGHT;
+			let aspect = window.innerWidth / window.innerHeight;
 			const NEAR = 1;
 			const FAR = 500;
 
@@ -43,6 +40,9 @@
 
 			let sphereGroup, smallSphere;
 
+			let groundMirrorRenderTarget, verticalMirrorRenderTarget;
+			let stats;
+
 			init();
 			animate();
 
@@ -53,14 +53,14 @@
 				// renderer
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( WIDTH, HEIGHT );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				// scene
 				scene = new THREE.Scene();
 
 				// camera
-				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
+				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, aspect, NEAR, FAR );
 				camera.position.set( 0, 75, 160 );
 
 				cameraControls = new OrbitControls( camera, renderer.domElement );
@@ -80,10 +80,11 @@
 				geometry = new THREE.CircleGeometry( 40, 64 );
 				const groundMirror = new Reflector( geometry, {
 					clipBias: 0.003,
-					textureWidth: WIDTH * window.devicePixelRatio,
-					textureHeight: HEIGHT * window.devicePixelRatio,
+					textureWidth: window.innerWidth * window.devicePixelRatio,
+					textureHeight: window.innerHeight * window.devicePixelRatio,
 					color: 0x777777
 				} );
+				groundMirrorRenderTarget = groundMirror.getRenderTarget()
 				groundMirror.position.y = 0.5;
 				groundMirror.rotateX( - Math.PI / 2 );
 				scene.add( groundMirror );
@@ -91,10 +92,11 @@
 				geometry = new THREE.PlaneGeometry( 100, 100 );
 				const verticalMirror = new Reflector( geometry, {
 					clipBias: 0.003,
-					textureWidth: WIDTH * window.devicePixelRatio,
-					textureHeight: HEIGHT * window.devicePixelRatio,
+					textureWidth: window.innerWidth * window.devicePixelRatio,
+					textureHeight: window.innerHeight * window.devicePixelRatio,
 					color: 0x889999
 				} );
+				verticalMirrorRenderTarget = verticalMirror.getRenderTarget()
 				verticalMirror.position.y = 50;
 				verticalMirror.position.z = - 50;
 				scene.add( verticalMirror );
@@ -168,6 +170,22 @@
 				blueLight.position.set( 0, 50, 550 );
 				scene.add( blueLight );
 
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
+				window.addEventListener( "resize", onWindowResize, false );
+			}
+
+			function onWindowResize() {
+
+				aspect = window.innerWidth / window.innerHeight;
+				camera.aspect = aspect;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				groundMirrorRenderTarget.setSize(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);
+				verticalMirrorRenderTarget.setSize(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);
+
 			}
 
 			function animate() {
@@ -188,6 +206,8 @@
 
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 		</script>