Removed the animation loop (#22062)

examples/webgl_materials_physical_transmission.html

@@ -15,8 +15,6 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import Stats from './jsm/libs/stats.module.js';
-
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
@@ -33,7 +31,6 @@
 				exposure: 1
 			};
 
-			let container, stats;
 			let camera, scene, renderer;
 
 			let hdrCubeRenderTarget;
@@ -45,20 +42,17 @@
 				.load( 'royal_esplanade_1k.hdr', function () {
 
 					init();
-					animate();
+					render();
 
 				} );
 
 			function init() {
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
-				container.appendChild( renderer.domElement );
+				document.body.appendChild( renderer.domElement );
 
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = params.exposure;
@@ -108,10 +102,8 @@
 
 				//
 
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
 				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.addEventListener( 'change', render ); // use if there is no animation loop
 				controls.minDistance = 10;
 				controls.maxDistance = 150;
 
@@ -125,6 +117,7 @@
 					.onChange( function () {
 
 						material.color.set( params.color );
+						render();
 
 					} );
 
@@ -132,6 +125,7 @@
 					.onChange( function () {
 
 						material.transmission = params.transmission;
+						render();
 
 					} );
 
@@ -139,6 +133,7 @@
 					.onChange( function () {
 
 						material.opacity = params.opacity;
+						render();
 
 					} );
 
@@ -146,6 +141,7 @@
 					.onChange( function () {
 
 						material.metalness = params.metalness;
+						render();
 
 					} );
 
@@ -153,6 +149,7 @@
 					.onChange( function () {
 
 						material.roughness = params.roughness;
+						render();
 
 					} );
 
@@ -160,6 +157,7 @@
 					.onChange( function () {
 
 						material.reflectivity = params.reflectivity;
+						render();
 
 					} );
 
@@ -168,6 +166,7 @@
 					.onChange( function () {
 
 						material.envMapIntensity = params.envMapIntensity;
+						render();
 
 					} );
 
@@ -175,6 +174,7 @@
 					.onChange( function () {
 
 						renderer.toneMappingExposure = params.exposure;
+						render();
 
 					} );
 
@@ -192,6 +192,8 @@
 
 				renderer.setSize( width, height );
 
+				render();
+
 			}
 
 			//
@@ -210,18 +212,9 @@
 
 			}
 
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				//const t = performance.now();
-
-				//mesh.rotation.x = t * 0.0002;
-				//mesh.rotation.z = - t * 0.0002;
+			function render() {
 
-				stats.begin();
 				renderer.render( scene, camera );
-				stats.end();
 
 			}