Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Examples: More clean up. (#23243)

* Examples: More clean up.

* Examples: Use WebGL 2 in blending demo.
Michael Herzog 3 years ago
parent
721d79d43c
commit
6f7a821dfa
7 changed files with 17 additions and 72 deletions
Unified View Show Diff Stats
  1. BIN
      examples/screenshots/webgl_loader_nrrd.jpg
  2. 1 2
      examples/webgl_framebuffer_texture.html
  3. 1 1
      examples/webgl_lensflares.html
  4. 11 65
      examples/webgl_loader_nrrd.html
  5. 1 1
      examples/webgl_materials_blending.html
  6. 1 1
      examples/webgl_materials_blending_custom.html
  7. 2 2
      examples/webxr_vr_layers.html

BIN
examples/screenshots/webgl_loader_nrrd.jpg
View File


+ 1 - 2
examples/webgl_framebuffer_texture.html
View File 

@@ -110,8 +110,7 @@
 
 
 
 				//
 
 				//
 
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 
-				renderer.setClearAlpha( 1 );
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.autoClear = false;
 
 				renderer.autoClear = false;

+ 1 - 1
examples/webgl_lensflares.html
View File 

@@ -112,7 +112,7 @@
 
 
 
 				// renderer
 
 				// renderer
 
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				renderer.outputEncoding = THREE.sRGBEncoding;

+ 11 - 65
examples/webgl_loader_nrrd.html
View File 

@@ -5,20 +5,6 @@
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<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">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
-		<style>
 
-			#inset {
 
-				width: 150px;
 
-				height: 150px;
 
-				background-color: transparent; /* or transparent; will show through only if renderer alpha: true */
 
-				border: none; /* or none; */
 
-				margin: 0;
 
-				padding: 0px;
 
-				position: absolute;
 
-				left: 20px;
 
-				bottom: 20px;
 
-				z-index: 100;
 
-			}
 
-		</style>
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>
 
@@ -44,12 +30,7 @@
 
 				camera,
 
 				camera,
 
 				controls,
 
 				controls,
 
 				scene,
 
 				scene,
 
-				renderer,
 
-				container2,
 
-				renderer2,
 
-				camera2,
 
-				axes2,
 
-				scene2;
 
+				renderer;
 
 
 
 			init();
 
 			init();
 
 			animate();
 
 			animate();
 
@@ -73,7 +54,7 @@
 
 				scene.add( dirLight );
 
 				scene.add( dirLight );
 
 
 
 				const loader = new NRRDLoader();
 
 				const loader = new NRRDLoader();
 
-				loader.load( "models/nrrd/I.nrrd", function ( volume ) {
 
+				loader.load( 'models/nrrd/I.nrrd', function ( volume ) {
 
 
 
 					//box helper to see the extend of the volume
 
 					//box helper to see the extend of the volume
 
 					const geometry = new THREE.BoxGeometry( volume.xLength, volume.yLength, volume.zLength );
 
 					const geometry = new THREE.BoxGeometry( volume.xLength, volume.yLength, volume.zLength );
 
@@ -97,38 +78,38 @@
 
 					const sliceX = volume.extractSlice( 'x', Math.floor( volume.RASDimensions[ 0 ] / 2 ) );
 
 					const sliceX = volume.extractSlice( 'x', Math.floor( volume.RASDimensions[ 0 ] / 2 ) );
 
 					scene.add( sliceX.mesh );
 
 					scene.add( sliceX.mesh );
 
 
 
-					gui.add( sliceX, "index", 0, volume.RASDimensions[ 0 ], 1 ).name( "indexX" ).onChange( function () {
 
+					gui.add( sliceX, 'index', 0, volume.RASDimensions[ 0 ], 1 ).name( 'indexX' ).onChange( function () {
 
 
 
 						sliceX.repaint.call( sliceX );
 
 						sliceX.repaint.call( sliceX );
 
 
 
 					} );
 
 					} );
 
-					gui.add( sliceY, "index", 0, volume.RASDimensions[ 1 ], 1 ).name( "indexY" ).onChange( function () {
 
+					gui.add( sliceY, 'index', 0, volume.RASDimensions[ 1 ], 1 ).name( 'indexY' ).onChange( function () {
 
 
 
 						sliceY.repaint.call( sliceY );
 
 						sliceY.repaint.call( sliceY );
 
 
 
 					} );
 
 					} );
 
-					gui.add( sliceZ, "index", 0, volume.RASDimensions[ 2 ], 1 ).name( "indexZ" ).onChange( function () {
 
+					gui.add( sliceZ, 'index', 0, volume.RASDimensions[ 2 ], 1 ).name( 'indexZ' ).onChange( function () {
 
 
 
 						sliceZ.repaint.call( sliceZ );
 
 						sliceZ.repaint.call( sliceZ );
 
 
 
 					} );
 
 					} );
 
 
 
-					gui.add( volume, "lowerThreshold", volume.min, volume.max, 1 ).name( "Lower Threshold" ).onChange( function () {
 
+					gui.add( volume, 'lowerThreshold', volume.min, volume.max, 1 ).name( 'Lower Threshold' ).onChange( function () {
 
 
 
 						volume.repaintAllSlices();
 
 						volume.repaintAllSlices();
 
 
 
 					} );
 
 					} );
 
-					gui.add( volume, "upperThreshold", volume.min, volume.max, 1 ).name( "Upper Threshold" ).onChange( function () {
 
+					gui.add( volume, 'upperThreshold', volume.min, volume.max, 1 ).name( 'Upper Threshold' ).onChange( function () {
 
 
 
 						volume.repaintAllSlices();
 
 						volume.repaintAllSlices();
 
 
 
 					} );
 
 					} );
 
-					gui.add( volume, "windowLow", volume.min, volume.max, 1 ).name( "Window Low" ).onChange( function () {
 
+					gui.add( volume, 'windowLow', volume.min, volume.max, 1 ).name( 'Window Low' ).onChange( function () {
 
 
 
 						volume.repaintAllSlices();
 
 						volume.repaintAllSlices();
 
 
 
 					} );
 
 					} );
 
-					gui.add( volume, "windowHigh", volume.min, volume.max, 1 ).name( "Window High" ).onChange( function () {
 
+					gui.add( volume, 'windowHigh', volume.min, volume.max, 1 ).name( 'Window High' ).onChange( function () {
 
 
 
 						volume.repaintAllSlices();
 
 						volume.repaintAllSlices();
 
 
 
@@ -139,7 +120,7 @@
 
 				const vtkmaterial = new THREE.MeshLambertMaterial( { wireframe: false, side: THREE.DoubleSide, color: 0xff0000 } );
 
 				const vtkmaterial = new THREE.MeshLambertMaterial( { wireframe: false, side: THREE.DoubleSide, color: 0xff0000 } );
 
 
 
 				const vtkloader = new VTKLoader();
 
 				const vtkloader = new VTKLoader();
 
-				vtkloader.load( "models/vtk/liver.vtk", function ( geometry ) {
 
+				vtkloader.load( 'models/vtk/liver.vtk', function ( geometry ) {
 
 
 
 					geometry.computeVertexNormals();
 
 					geometry.computeVertexNormals();
 
 
 
@@ -148,7 +129,7 @@
 
 					const visibilityControl = {
 
 					const visibilityControl = {
 
 						visible: true
 
 						visible: true
 
 					};
 
 					};
 
-					gui.add( visibilityControl, "visible" ).name( "Model Visible" ).onChange( function () {
 
+					gui.add( visibilityControl, 'visible' ).name( 'Model Visible' ).onChange( function () {
 
 
 
 						mesh.visible = visibilityControl.visible;
 
 						mesh.visible = visibilityControl.visible;
 
 						renderer.render( scene, camera );
 
 						renderer.render( scene, camera );
 
@@ -178,8 +159,6 @@
 
 
 
 				const gui = new GUI();
 
 				const gui = new GUI();
 
 
 
-				setupInset();
 
-
 
 				window.addEventListener( 'resize', onWindowResize );
 
 				window.addEventListener( 'resize', onWindowResize );
 
 
 
 			}
 
 			}
 
@@ -201,45 +180,12 @@
 
 
 
 				controls.update();
 
 				controls.update();
 
 
 
-				//copy position of the camera into inset
 
-				camera2.position.copy( camera.position );
 
-				camera2.position.sub( controls.target );
 
-				camera2.position.setLength( 300 );
 
-				camera2.lookAt( scene2.position );
 
-
 
 				renderer.render( scene, camera );
 
 				renderer.render( scene, camera );
 
-				renderer2.render( scene2, camera2 );
 
 
 
 				stats.update();
 
 				stats.update();
 
 
 
 			}
 
 			}
 
 
 
-			function setupInset() {
 
-
 
-				const insetWidth = 150, insetHeight = 150;
 
-				container2 = document.getElementById( 'inset' );
 
-				container2.width = insetWidth;
 
-				container2.height = insetHeight;
 
-
 
-				// renderer
 
-				renderer2 = new THREE.WebGLRenderer( { alpha: true } );
 
-				renderer2.setClearColor( 0x000000, 0 );
 
-				renderer2.setSize( insetWidth, insetHeight );
 
-				container2.appendChild( renderer2.domElement );
 
-
 
-				// scene
 
-				scene2 = new THREE.Scene();
 
-
 
-				// camera
 
-				camera2 = new THREE.PerspectiveCamera( 50, insetWidth / insetHeight, 1, 1000 );
 
-				camera2.up = camera.up; // important!
 
-
 
-				// axes
 
-				axes2 = new THREE.AxesHelper( 100 );
 
-				scene2.add( axes2 );
 
-
 
-			}
 
-
 
 		</script>
 
 		</script>
 
 
 
 	</body>
 
 	</body>

+ 1 - 1
examples/webgl_materials_blending.html
View File 

@@ -114,7 +114,7 @@
 
 				}
 
 				}
 
 
 
 				const canvas = document.createElement( 'canvas' );
 
 				const canvas = document.createElement( 'canvas' );
 
-				const context = canvas.getContext( 'webgl', { alpha: false } ); // TODO Remove workaround
 
+				const context = canvas.getContext( 'webgl2', { alpha: false } ); // TODO Remove workaround
 
 
 
 				// RENDERER
 
 				// RENDERER

+ 1 - 1
examples/webgl_materials_blending_custom.html
View File 

@@ -299,7 +299,7 @@
 
 				// RENDERER
 
 				// RENDERER
 
 
 
 				const canvas = document.createElement( 'canvas' );
 
 				const canvas = document.createElement( 'canvas' );
 
-				const context = canvas.getContext( 'webgl', { alpha: false } ); // TODO Remove workaround
 
+				const context = canvas.getContext( 'webgl2', { alpha: false } ); // TODO Remove workaround
 
 
 
 				renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
 
 				renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setPixelRatio( window.devicePixelRatio );

+ 2 - 2
examples/webxr_vr_layers.html
View File 

@@ -112,7 +112,7 @@
 
 
 
 				//
 
 				//
 
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: false, alpha: true } );
 
+				renderer = new THREE.WebGLRenderer( { antialias: false } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setClearAlpha( 1 );
 
 				renderer.setClearAlpha( 1 );
 
 				renderer.setClearColor( new THREE.Color( 0 ), 0 );
 
 				renderer.setClearColor( new THREE.Color( 0 ), 0 );
 
@@ -375,7 +375,7 @@
 
 								session.renderState.layers[ 0 ]
 
 								session.renderState.layers[ 0 ]
 
 							]
 
 							]
 
 						} );
 
 						} );
 
-						
+
 
 						video.play();
 
 						video.play();
 
 
 
 					} );
 
 					} );