Examples: Simplified webgl_multiple_scenes_comparison.

mrdoob · Aug 31, 2020 · 65494f3 · 65494f3
1 parent 70f0001
commit 65494f3
Showing 1 changed file with 49 additions and 80 deletions.
diff --git a/examples/webgl_multiple_scenes_comparison.html b/examples/webgl_multiple_scenes_comparison.html
@@ -6,11 +6,6 @@
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
-
-			html, body {
-				touch-action: none;
-			}
-
 			.container {
 				position: absolute;
 				width: 100%;
@@ -29,7 +24,6 @@
 
 				top: calc(50% - 20px);
 				left: calc(50% - 20px);
-
 			}
 		</style>
 	</head>
@@ -54,7 +48,8 @@
 			var sceneL, sceneR;
 
 			var sliderPos = window.innerWidth / 2;
-			var sliderMoved = false;
+
+			init();
 
 			function init() {
 
@@ -66,131 +61,105 @@
 				sceneR = new THREE.Scene();
 				sceneR.background = new THREE.Color( 0x8FBCD4 );
 
-				camera = new THREE.PerspectiveCamera( 35, container.clientWidth / container.clientHeight, 0.1, 100 );
+				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 100 );
 				camera.position.z = 6;
 
 				controls = new OrbitControls( camera, container );
 
+				var light = new THREE.HemisphereLight( 0xffffff, 0x444444, 1 );
+				light.position.set( - 2, 2, 2 );
+				sceneL.add( light.clone() );
+				sceneR.add( light.clone() );
+
 				initMeshes();
-				initLights();
+				initSlider();
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setSize( container.clientWidth, container.clientHeight );
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setScissorTest( true );
-
+				renderer.setAnimationLoop( render );
 				container.appendChild( renderer.domElement );
 
-				renderer.setAnimationLoop( function () {
-
-					render();
-
-				} );
-
-				initComparisons();
+				window.addEventListener( 'resize', onWindowResize );
 
 			}
 
 			function initMeshes() {
 
-				var geoB = new THREE.IcosahedronBufferGeometry( 1, 2 );
-				var matB = new THREE.MeshStandardMaterial();
-				var meshB = new THREE.Mesh( geoB, matB );
-				sceneL.add( meshB );
+				var geometry = new THREE.IcosahedronBufferGeometry( 1, 2 );
 
-				var geoA = new THREE.IcosahedronBufferGeometry( 1, 2 );
-				var matA = new THREE.MeshStandardMaterial( { wireframe: true } );
-				var meshA = new THREE.Mesh( geoA, matA );
-				sceneR.add( meshA );
-
-			}
+				var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
+				sceneL.add( mesh );
 
-			function initLights() {
-
-				var light = new THREE.HemisphereLight( 0xffffff, 0x444444, 1 );
-				light.position.set( - 2, 2, 2 );
-				sceneL.add( light.clone() );
-				sceneR.add( light.clone() );
+				var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { wireframe: true } ) );
+				sceneR.add( mesh );
 
 			}
 
-			function render() {
-
-				renderer.setScissor( 0, 0, sliderPos, window.innerHeight );
-				renderer.render( sceneL, camera );
-
-				renderer.setScissor( sliderPos, 0, window.innerWidth, window.innerHeight );
-				renderer.render( sceneR, camera );
+			function initSlider() {
 
-			}
+				var slider = document.querySelector( '.slider' );
 
-			function onWindowResize() {
+				function onPointerDown() {
 
-				camera.aspect = container.clientWidth / container.clientHeight;
-				camera.updateProjectionMatrix();
+					if ( event.isPrimary === false ) return;
 
-				renderer.setSize( container.clientWidth, container.clientHeight );
+					controls.enabled = false;
 
-				if ( ! sliderMoved ) sliderPos = window.innerWidth / 2;
+					window.addEventListener( 'pointermove', onPointerMove, false );
+					window.addEventListener( 'pointerup', onPointerUp, false );
 
-			}
+				}
 
-			window.addEventListener( 'resize', onWindowResize );
+				function onPointerUp() {
 
-			function initComparisons() {
+					controls.enabled = true;
 
-				var slider = document.querySelector( '.slider' );
+					window.removeEventListener( 'pointermove', onPointerMove, false );
+					window.removeEventListener( 'pointerup', onPointerUp, false );
 
-				var isPointerDown = false;
+				}
 
-				function slideReady() {
+				function onPointerMove( e ) {
 
-					if ( event.isPrimary ) {
+					if ( event.isPrimary === false ) return;
 
-						isPointerDown = true;
-						controls.enabled = false;
+					sliderPos = Math.max( 0, Math.min( window.innerWidth, e.pageX ) );
 
-					}
+					slider.style.left = sliderPos - ( slider.offsetWidth / 2 ) + "px";
 
 				}
 
-				function slideFinish() {
+				slider.addEventListener( 'pointerdown', onPointerDown );
 
-					if ( event.isPrimary ) {
+				slider.addEventListener( 'touchstart', function ( event ) {
 
-						isPointerDown = false;
-						controls.enabled = true;
-
-					}
-
-				}
+					event.preventDefault(); // prevent scrolling
 
-				function slideMove( e ) {
+				} );
 
-					if ( event.isPrimary && isPointerDown ) {
+			}
 
-						sliderMoved = true;
+			function onWindowResize() {
 
-						sliderPos = e.pageX;
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
 
-						//prevent the slider from being positioned outside the window bounds
-						if ( sliderPos < 0 ) sliderPos = 0;
-						if ( sliderPos > window.innerWidth ) sliderPos = window.innerWidth;
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-						slider.style.left = sliderPos - ( slider.offsetWidth / 2 ) + "px";
+			}
 
-					}
+			function render() {
 
-				}
+				renderer.setScissor( 0, 0, sliderPos, window.innerHeight );
+				renderer.render( sceneL, camera );
 
-				slider.addEventListener( 'pointerdown', slideReady );
-				window.addEventListener( 'pointerup', slideFinish );
-				window.addEventListener( 'pointermove', slideMove );
+				renderer.setScissor( sliderPos, 0, window.innerWidth, window.innerHeight );
+				renderer.render( sceneR, camera );
 
 			}
 
-			init();
-
 		</script>
 
 	</body>