Merge pull request #16827 from Mugen87/dev34

Examples: More module examples.

Author: Mugen87

examples/files.js

@@ -318,7 +318,6 @@ var files = {
 		"webgldeferred_animation"
 	],
 	"webgl2": [
-		"webgl2_loader_gltf",
 		"webgl2_materials_texture2darray",
 		"webgl2_materials_texture3d",
 		"webgl2_multisampled_renderbuffers",

examples/webgl2_loader_gltf.html

@@ -54,14 +54,25 @@
 			<a href="https://www.codeproject.com/info/cpol10.aspx" target="_blank" rel="noopener">CPOL</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<!--<script src="js/controls/OrbitControls.js"></script>-->
-
 		<script src="js/libs/jszip.min.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 		<script src="js/WebGL.js"></script>
 
-		<script>
+		<script type="module">
+			import {
+				DataTexture2DArray,
+				FileLoader,
+				Mesh,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RedFormat,
+				Scene,
+				ShaderMaterial,
+				Vector2,
+				UnsignedByteType,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			if ( WEBGL.isWebGL2Available() === false ) {
 
@@ -84,40 +95,40 @@
 				var container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
 				camera.position.z = 70;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				// width 256, height 256, depth 109, 8-bit, zip archived raw data
 
-				new THREE.FileLoader()
+				new FileLoader()
 					.setResponseType( 'arraybuffer' )
 					.load( 'textures/3d/head256x256x109.zip', function ( data ) {
 
 						var zip = new JSZip( data );
 						var array = zip.files[ 'head256x256x109' ].asUint8Array();
 
-						var texture = new THREE.DataTexture2DArray( array, 256, 256, 109 );
+						var texture = new DataTexture2DArray( array, 256, 256, 109 );
 
-						texture.format = THREE.RedFormat;
-						texture.type = THREE.UnsignedByteType;
+						texture.format = RedFormat;
+						texture.type = UnsignedByteType;
 
 						texture.needsUpdate = true;
 
-						var material = new THREE.ShaderMaterial( {
+						var material = new ShaderMaterial( {
 							uniforms: {
 								diffuse: { value: texture },
 								depth: { value: 0 },
-								size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
+								size: { value: new Vector2( planeWidth, planeHeight ) }
 							},
 							vertexShader: document.getElementById( 'vs' ).textContent.trim(),
 							fragmentShader: document.getElementById( 'fs' ).textContent.trim()
 						} );
 
-						var geometry = new THREE.PlaneBufferGeometry( planeWidth, planeHeight );
+						var geometry = new PlaneBufferGeometry( planeWidth, planeHeight );
 
-						mesh = new THREE.Mesh( geometry, material );
+						mesh = new Mesh( geometry, material );
 
 						scene.add( mesh );
 
@@ -128,7 +139,7 @@
 				var canvas = document.createElement( 'canvas' );
 				var context = canvas.getContext( 'webgl2' );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas, context: context } );
+				renderer = new WebGLRenderer( { antialias: true, canvas: canvas, context: context } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl2_materials_texture2darray.html

@@ -13,28 +13,37 @@
 	</div>
 	<div id="inset"></div>
 
-	<script src="../build/three.js"></script>
-
-	<script src="js/controls/OrbitControls.js"></script>
-
-	<script src="js/misc/Volume.js"></script>
-	<script src="js/loaders/NRRDLoader.js"></script>
-	<script src="js/shaders/VolumeShader.js"></script>
-
 	<script src="js/WebGL.js"></script>
-	<script src="js/libs/gunzip.min.js"></script>
-	<script src="js/libs/dat.gui.min.js"></script>
 
-	<script>
+	<script type="module">
+		import {
+			BackSide,
+			BoxBufferGeometry,
+			DataTexture3D,
+			FloatType,
+			LinearFilter,
+			Mesh,
+			OrthographicCamera,
+			RedFormat,
+			Scene,
+			ShaderMaterial,
+			TextureLoader,
+			UniformsUtils,
+			WebGLRenderer
+		} from "../build/three.module.js";
+
+		import { GUI } from './jsm/libs/dat.gui.module.js';
+		import { OrbitControls } from './jsm/controls/OrbitControls.js';
+		import { NRRDLoader } from './jsm/loaders/NRRDLoader.js';
+		import { VolumeRenderShader1 } from './jsm/shaders/VolumeShader.js';
 
 		if ( WEBGL.isWebGL2Available() === false ) {
 
 			document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
 
 		}
 
-		var container,
-			renderer,
+		var renderer,
 			scene,
 			camera,
 			controls,
@@ -46,69 +55,69 @@
 
 		function init() {
 
-			scene = new THREE.Scene();
+			scene = new Scene();
 
 			// Create renderer
 			var canvas = document.createElement( 'canvas' );
 			var context = canvas.getContext( 'webgl2' );
-			renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
+			renderer = new WebGLRenderer( { canvas: canvas, context: context } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			document.body.appendChild( renderer.domElement );
 
 			// Create camera (The volume renderer does not work very well with perspective yet)
 			var h = 512; // frustum height
 			var aspect = window.innerWidth / window.innerHeight;
-			camera = new THREE.OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 1000 );
+			camera = new OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 1000 );
 			camera.position.set( 0, 0, 128 );
 			camera.up.set( 0, 0, 1 ); // In our data, z is up
 
 			// Create controls
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			controls = new OrbitControls( camera, renderer.domElement );
 			controls.addEventListener( 'change', render );
 			controls.target.set( 64, 64, 128 );
 			controls.minZoom = 0.5;
 			controls.maxZoom = 4;
 			controls.update();
 
-			// scene.add( new THREE.AxesHelper( 128 ) );
+			// scene.add( new AxesHelper( 128 ) );
 
 			// Lighting is baked into the shader a.t.m.
-			// var dirLight = new THREE.DirectionalLight( 0xffffff );
+			// var dirLight = new DirectionalLight( 0xffffff );
 
 			// The gui for interaction
 			volconfig = { clim1: 0, clim2: 1, renderstyle: 'iso', isothreshold: 0.15, colormap: 'viridis' };
-			var gui = new dat.GUI();
+			var gui = new GUI();
 			gui.add( volconfig, 'clim1', 0, 1, 0.01 ).onChange( updateUniforms );
 			gui.add( volconfig, 'clim2', 0, 1, 0.01 ).onChange( updateUniforms );
 			gui.add( volconfig, 'colormap', { gray: 'gray', viridis: 'viridis' } ).onChange( updateUniforms );
 			gui.add( volconfig, 'renderstyle', { mip: 'mip', iso: 'iso' } ).onChange( updateUniforms );
 			gui.add( volconfig, 'isothreshold', 0, 1, 0.01 ).onChange( updateUniforms );
 
 			// Load the data ...
-			new THREE.NRRDLoader().load( "models/nrrd/stent.nrrd", function ( volume ) {
+			new NRRDLoader().load( "models/nrrd/stent.nrrd", function ( volume ) {
 
 				// Texture to hold the volume. We have scalars, so we put our data in the red channel.
 				// THREEJS will select R32F (33326) based on the RedFormat and FloatType.
 				// Also see https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE
 				// TODO: look the dtype up in the volume metadata
-				var texture = new THREE.DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
-				texture.format = THREE.RedFormat;
-				texture.type = THREE.FloatType;
-				texture.minFilter = texture.magFilter = THREE.LinearFilter;
+				var texture = new DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
+				texture.format = RedFormat;
+				texture.type = FloatType;
+				texture.minFilter = texture.magFilter = LinearFilter;
 				texture.unpackAlignment = 1;
 				texture.needsUpdate = true;
 
 				// Colormap textures
 				cmtextures = {
-					viridis: new THREE.TextureLoader().load( 'textures/cm_viridis.png', render ),
-					gray: new THREE.TextureLoader().load( 'textures/cm_gray.png', render )
+					viridis: new TextureLoader().load( 'textures/cm_viridis.png', render ),
+					gray: new TextureLoader().load( 'textures/cm_gray.png', render )
 				};
 
 				// Material
-				var shader = THREE.VolumeRenderShader1;
+				var shader = VolumeRenderShader1;
 
-				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+				var uniforms = UniformsUtils.clone( shader.uniforms );
 
 				uniforms[ "u_data" ].value = texture;
 				uniforms[ "u_size" ].value.set( volume.xLength, volume.yLength, volume.zLength );
@@ -117,18 +126,18 @@
 				uniforms[ "u_renderthreshold" ].value = volconfig.isothreshold; // For ISO renderstyle
 				uniforms[ "u_cmdata" ].value = cmtextures[ volconfig.colormap ];
 
-				material = new THREE.ShaderMaterial( {
+				material = new ShaderMaterial( {
 					uniforms: uniforms,
 					vertexShader: shader.vertexShader,
 					fragmentShader: shader.fragmentShader,
-					side: THREE.BackSide // The volume shader uses the backface as its "reference point"
+					side: BackSide // The volume shader uses the backface as its "reference point"
 				} );
 
 				// Mesh
-				var geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
+				var geometry = new BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
 				geometry.translate( volume.xLength / 2 - 0.5, volume.yLength / 2 - 0.5, volume.zLength / 2 - 0.5 );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				scene.add( mesh );
 
 				render();