webgl_mirror_nodes.html resizable

examples/webgl_mirror_nodes.html

@@ -26,6 +26,7 @@
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ReflectorRTT } from './jsm/objects/ReflectorRTT.js';
+			import Stats from "./jsm/libs/stats.module.js";
 
 			import {
 				NodeFrame,
@@ -41,13 +42,9 @@
 				NormalMapNode,
 			} from './jsm/nodes/Nodes.js';
 
-			// scene size
-			const WIDTH = window.innerWidth;
-			const HEIGHT = window.innerHeight;
-
 			// camera
 			const VIEW_ANGLE = 45;
-			const ASPECT = WIDTH / HEIGHT;
+			let aspect = window.innerWidth / window.innerHeight;
 			const NEAR = 1;
 			const FAR = 500;
 
@@ -68,18 +65,22 @@
 
 			const frame = new NodeFrame();
 
+			let groundMirrorRenderTarget;
+			let stats;
+			let blurMirror;
+
 			function init() {
 
 				// renderer
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( WIDTH, HEIGHT );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				// 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 );
@@ -91,6 +92,23 @@
 				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 
+				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);
+				blurMirror.size = new THREE.Vector2( window.innerWidth, window.innerHeight );
+				blurMirror.updateFrame()
+				
 			}
 
 			function fillScene() {
@@ -101,7 +119,12 @@
 
 				// reflector/mirror plane
 				geometry = new THREE.PlaneGeometry( 100, 100 );
-				const groundMirror = new ReflectorRTT( geometry, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT } );
+				const groundMirror = new ReflectorRTT( geometry, { 
+					clipBias: 0.003,
+					textureWidth: window.innerWidth * window.devicePixelRatio,
+					textureHeight: window.innerHeight * window.devicePixelRatio
+				} );
+				groundMirrorRenderTarget = groundMirror.getRenderTarget()
 
 				const mask = new SwitchNode( new TextureNode( decalDiffuse ), 'w' );
 
@@ -126,8 +149,8 @@
 					OperatorNode.MUL
 				);
 
-				const blurMirror = new BlurNode( mirror );
-				blurMirror.size = new THREE.Vector2( WIDTH, HEIGHT );
+				blurMirror = new BlurNode( mirror );
+				blurMirror.size = new THREE.Vector2( window.innerWidth, window.innerHeight );
 				blurMirror.uv = new ExpressionNode( "projCoord.xyz / projCoord.q", "vec3" );
 				blurMirror.uv.keywords[ "projCoord" ] = new OperatorNode( mirror.offset, mirror.uv, OperatorNode.ADD );
 				blurMirror.radius.x = blurMirror.radius.y = 0;
@@ -263,6 +286,7 @@
 
 				render();
 
+				stats.update();
 			}
 
 			init();