Examples: Clean up webgl_buffergeometry_compression.html (#25118)

* Clean up

* Updated screenshot

examples/webgl_buffergeometry_compression.html

@@ -65,7 +65,7 @@
 
 			// materials
 			const lineMaterial = new THREE.LineBasicMaterial( { color: 0xaaaaaa, transparent: true, opacity: 0.8 } );
-			const meshMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x111111 } );
+			const meshMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, side: THREE.DoubleSide } );
 
 			// texture
 			const texture = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
@@ -80,6 +80,7 @@
 			function init() {
 
 				//
+
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -92,18 +93,18 @@
 
 				scene = new THREE.Scene();
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 10000000 );
-				camera.position.x = 2 * radius;
-				camera.position.y = 2 * radius;
-				camera.position.z = 2 * radius;
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.setScalar( 2 * radius );
 
 				controls = new OrbitControls( camera, renderer.domElement );
+				controls.enablePan = false;
+				controls.enableZoom = false;
 
 				//
 
-				lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
-				lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
-				lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
+				lights[ 0 ] = new THREE.DirectionalLight( 0xffffff, 0.7 );
+				lights[ 1 ] = new THREE.DirectionalLight( 0xffffff, 0.7 );
+				lights[ 2 ] = new THREE.DirectionalLight( 0xffffff, 0.7 );
 
 				lights[ 0 ].position.set( 0, 2 * radius, 0 );
 				lights[ 1 ].position.set( 2 * radius, - 2 * radius, 2 * radius );
@@ -122,10 +123,11 @@
 				let geom = newGeometry( data );
 
 				const mesh = new THREE.Mesh( geom, meshMaterial );
+				scene.add( mesh );
+
 				const lineSegments = new THREE.LineSegments( new THREE.WireframeGeometry( geom ), lineMaterial );
 				lineSegments.visible = data.wireframe;
 
-				scene.add( mesh );
 				scene.add( lineSegments );
 
 				//
@@ -140,13 +142,13 @@
 						case 'Icosahedron':
 							return new THREE.IcosahedronGeometry( radius, data.detail );
 						case 'Cylinder':
-							return new THREE.CylinderGeometry( radius, radius, radius * 2, data.detail * 6 );
+							return new THREE.CylinderGeometry( radius / 1.5 , radius / 1.5, radius, data.detail * 6 );
 						case 'Teapot':
-							return new TeapotGeometry( radius, data.detail * 3, true, true, true, true, true );
+							return new TeapotGeometry( radius / 1.5, data.detail * 3, true, true, true, true, true );
 						case 'TorusKnot':
-							return new THREE.TorusKnotGeometry( radius, 10, data.detail * 20, data.detail * 6, 3, 4 );
+							return new THREE.TorusKnotGeometry( radius / 2, 10, data.detail * 30, data.detail * 6, 3, 4 );
 
-		}
+					}
 
 				}
 
@@ -154,15 +156,10 @@
 
 					geom = newGeometry( data );
 
-					updateGroupGeometry(
-						mesh,
-						lineSegments,
-						geom,
-						data );
+					updateGroupGeometry( mesh, lineSegments, geom, data );
 
 				}
 
-				// updateLineSegments
 				function updateLineSegments() {
 
 					lineSegments.visible = data.wireframe;
@@ -214,20 +211,8 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-			}
 
-			//
-			function updateLightsPossition() {
-
-				lights.forEach( light => {
-
-					const direction = light.position.clone();
-					direction.applyAxisAngle( new THREE.Vector3( 1, 1, 0 ), data.rotationSpeed / 180 * Math.PI );
-					light.position.add( direction.sub( light.position ) );
-
-				} );
+				camera.updateProjectionMatrix();
 
 			}
 
@@ -237,9 +222,6 @@
 
 				requestAnimationFrame( animate );
 
-				controls.update();
-				updateLightsPossition();
-
 				renderer.render( scene, camera );
 
 				if ( statsEnabled ) stats.update();
@@ -251,12 +233,15 @@
 			function updateGroupGeometry( mesh, lineSegments, geometry, data ) {
 
 				// dispose first
+
 				lineSegments.geometry.dispose();
 				mesh.geometry.dispose();
+				mesh.material.dispose();
+				if ( mesh.material.map ) mesh.material.map.dispose();
 
 				lineSegments.geometry = new THREE.WireframeGeometry( geometry );
 				mesh.geometry = geometry;
-				mesh.material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x111111 } );
+				mesh.material = new THREE.MeshPhongMaterial( { color: 0xffffff, side: THREE.DoubleSide } );
 				mesh.material.map = data.texture ? texture : null;
 
 				if ( data[ 'QuantizePosEncoding' ] ) {
@@ -285,6 +270,7 @@
 			function computeGPUMemory( mesh ) {
 
 				// Use BufferGeometryUtils to do memory calculation
+
 				memoryDisplay.setValue( BufferGeometryUtils.estimateBytesUsed( mesh.geometry ) + ' bytes' );
 
 			}