홈 탐색 도움말
로그인
javascript
/
three.js
의 미러 https://github.com/tazdij/three.js.git
2
0
포크 0
파일 이슈 0 위키
소스 검색

Examples: More module examples.

Mugen87 6 년 전
부모
ba64657a52
커밋
827e18d562
44개의 변경된 파일과 2332개의 추가작업 그리고 1983개의 파일을 삭제
분할 보기 변경상태 보기
  1. 0 1
      examples/files.js
  2. 0 131
      examples/webgl2_loader_gltf.html
  3. 27 16
      examples/webgl2_materials_texture2darray.html
  4. 42 33
      examples/webgl2_materials_texture3d.html
  5. 47 32
      examples/webgl2_multisampled_renderbuffers.html
  6. 19 10
      examples/webgl2_sandbox.html
  7. 23 21
      examples/webgl_shader2.html
  8. 46 37
      examples/webgl_shaders_ocean.html
  9. 23 37
      examples/webgl_shaders_ocean2.html
  10. 24 25
      examples/webgl_shaders_sky.html
  11. 96 88
      examples/webgl_shaders_tonemapping.html
  12. 58 40
      examples/webgl_shaders_vector.html
  13. 73 52
      examples/webgl_shading_physical.html
  14. 49 41
      examples/webgl_shadowmap.html
  15. 39 31
      examples/webgl_shadowmap_pcss.html
  16. 49 40
      examples/webgl_shadowmap_performance.html
  17. 48 35
      examples/webgl_shadowmap_pointlight.html
  18. 42 35
      examples/webgl_shadowmap_viewer.html
  19. 76 58
      examples/webgl_shadowmesh.html
  20. 38 23
      examples/webgl_simple_gi.html
  21. 36 21
      examples/webgl_skinning_simple.html
  22. 33 20
      examples/webgl_sprites.html
  23. 72 58
      examples/webgl_terrain_dynamic.html
  24. 28 13
      examples/webgl_test_memory.html
  25. 27 12
      examples/webgl_test_memory2.html
  26. 308 289
      examples/webgl_tiled_forward.html
  27. 81 70
      examples/webgl_tonemapping.html
  28. 23 15
      examples/webgl_trails.html
  29. 26 22
      examples/webgl_video_panorama_equirectangular.html
  30. 146 136
      examples/webgl_water.html
  31. 86 87
      examples/webgl_water_flowmap.html
  32. 48 42
      examples/webgldeferred_animation.html
  33. 44 26
      examples/webvr_ballshooter.html
  34. 44 26
      examples/webvr_cubes.html
  35. 44 23
      examples/webvr_dragging.html
  36. 27 14
      examples/webvr_lorenzattractor.html
  37. 65 44
      examples/webvr_paint.html
  38. 78 69
      examples/webvr_panorama.html
  39. 59 43
      examples/webvr_rollercoaster.html
  40. 46 33
      examples/webvr_sandbox.html
  41. 47 32
      examples/webvr_sculpt.html
  42. 27 17
      examples/webvr_video.html
  43. 67 49
      examples/webvr_vive_paint.html
  44. 51 36
      examples/webvr_vive_sculpt.html

+ 0 - 1
examples/files.js
파일 보기 

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

+ 0 - 131
examples/webgl2_loader_gltf.html
파일 보기 

@@ -1,131 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - glTF loader (module version)</title>
 
-		<meta charset="utf-8">
 
-		<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">
 
-	</head>
 
-
 
-	<body>
 
-		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader (module version)<br />
 
-			Battle Damaged Sci-fi Helmet by
 
-			<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
 
-		</div>
 
-
 
-		<script type="module">
 
-			import {
 
-				CubeTextureLoader,
 
-				PerspectiveCamera,
 
-				Scene,
 
-				WebGLRenderer
 
-			} from "../build/three.module.js";
 
-
 
-			import Stats from './jsm/libs/stats.module.js';
 
-
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
 
-			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
 
-
 
-			var container, stats, controls;
 
-			var camera, scene, renderer;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
 
-				camera.position.set( - 1.8, 0.9, 2.7 );
 
-
 
-				controls = new OrbitControls( camera );
 
-				controls.target.set( 0, - 0.2, - 0.2 );
 
-				controls.update();
 
-
 
-				scene = new Scene();
 
-
 
-				var urls = [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ];
 
-				var loader = new CubeTextureLoader().setPath( 'textures/cube/Bridge2/' );
 
-				loader.load( urls, function ( texture ) {
 
-
 
-					var pmremGenerator = new PMREMGenerator( texture );
 
-					pmremGenerator.update( renderer );
 
-
 
-					var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
 
-					pmremCubeUVPacker.update( renderer );
 
-
 
-					var envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
 
-
 
-					// model
 
-
 
-					var loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
 
-					loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
 
-
 
-						gltf.scene.traverse( function ( child ) {
 
-
 
-							if ( child.isMesh ) {
 
-
 
-								child.material.envMap = envMap;
 
-
 
-							}
 
-
 
-						} );
 
-
 
-						scene.add( gltf.scene );
 
-
 
-					} );
 
-
 
-					pmremGenerator.dispose();
 
-					pmremCubeUVPacker.dispose();
 
-
 
-					scene.background = texture;
 
-
 
-				} );
 
-
 
-				var canvas = document.createElement( 'canvas' );
 
-				var context = canvas.getContext( 'webgl2' );
 
-
 
-				renderer = new WebGLRenderer( { canvas: canvas, context: context } );
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				renderer.gammaOutput = true;
 
-				container.appendChild( renderer.domElement );
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-				// stats
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-				stats.update();
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 27 - 16
examples/webgl2_materials_texture2darray.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 );

+ 42 - 33
examples/webgl2_materials_texture3d.html
파일 보기 

@@ -13,19 +13,29 @@
 
 	</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 ) {
 
 
@@ -33,8 +43,7 @@
 
 
 		}
 
 
-		var container,
 
-			renderer,
 
+		var renderer,
 
 			scene,
 
 			camera,
 
 			controls,
 
@@ -46,12 +55,12 @@
 
 
 		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 );
 
@@ -59,26 +68,26 @@
 
 			// 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 );
 
@@ -86,29 +95,29 @@
 
 			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();

+ 47 - 32
examples/webgl2_multisampled_renderbuffers.html
파일 보기 

@@ -33,16 +33,31 @@
 
 		<div id="container">
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
 		<script src="js/WebGL.js"></script>
 
 
-		<script src="js/shaders/CopyShader.js"></script>
 
-
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
 
-		<script src="js/postprocessing/RenderPass.js"></script>
 
-		<script src="js/postprocessing/ShaderPass.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				Clock,
 
+				Color,
 
+				DirectionalLight,
 
+				HemisphereLight,
 
+				PerspectiveCamera,
 
+				Fog,
 
+				Group,
 
+				IcosahedronBufferGeometry,
 
+				Mesh,
 
+				MeshStandardMaterial,
 
+				RGBFormat,
 
+				Scene,
 
+				Vector2,
 
+				WebGLRenderer,
 
+				WebGLMultisampleRenderTarget
 
+			} from "../build/three.module.js";
 
+
 
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
 
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
 
 
 			if ( WEBGL.isWebGL2Available() === false ) {
 
 
@@ -50,7 +65,7 @@
 
 
 			}
 
 
-			var camera, scene, renderer, clock, group;
 
+			var camera, scene, renderer, clock, group, container;
 
 
 			var composer1, composer2;
 
 
@@ -59,37 +74,37 @@
 
 
 			function init() {
 
 
-				var container = document.getElementById( 'container' );
 
+				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.PerspectiveCamera( 45, ( container.offsetWidth * 0.5 ) / container.offsetHeight, 1, 2000 );
 
+				camera = new PerspectiveCamera( 45, ( container.offsetWidth * 0.5 ) / container.offsetHeight, 1, 2000 );
 
 				camera.position.z = 500;
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
-				scene.fog = new THREE.Fog( 0xcccccc, 100, 1500 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xffffff );
 
+				scene.fog = new Fog( 0xcccccc, 100, 1500 );
 
 
-				clock = new THREE.Clock();
 
+				clock = new Clock();
 
 
 				//
 
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 
+				var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
 
 				hemiLight.position.set( 0, 1000, 0 );
 
 				scene.add( hemiLight );
 
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
 
+				var dirLight = new DirectionalLight( 0xffffff, 0.8 );
 
 				dirLight.position.set( - 3000, 1000, - 1000 );
 
 				scene.add( dirLight );
 
 
 				//
 
 
-				group = new THREE.Group();
 
+				group = new Group();
 
 
-				var geometry = new THREE.IcosahedronBufferGeometry( 10, 2 );
 
-				var material = new THREE.MeshStandardMaterial( { color: 0xee0808, flatShading: true } );
 
+				var geometry = new IcosahedronBufferGeometry( 10, 2 );
 
+				var material = new MeshStandardMaterial( { color: 0xee0808, flatShading: true } );
 
 
 				for ( var i = 0; i < 100; i ++ ) {
 
 
-					var mesh = new THREE.Mesh( geometry, material );
 
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 500 - 250;
 
 					mesh.position.y = Math.random() * 500 - 250;
 
 					mesh.position.z = Math.random() * 500 - 250;
 
@@ -105,7 +120,7 @@
 
 				var canvas = document.createElement( 'canvas' );
 
 				var context = canvas.getContext( 'webgl2', { antialias: false } );
 
 
-				renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
 
+				renderer = new WebGLRenderer( { canvas: canvas, context: context } );
 
 				renderer.autoClear = false;
 
 				renderer.setSize( container.offsetWidth, container.offsetHeight );
 
 				container.appendChild( renderer.domElement );
 
@@ -113,25 +128,25 @@
 
 				//
 
 
 				var parameters = {
 
-					format: THREE.RGBFormat,
 
+					format: RGBFormat,
 
 					stencilBuffer: false
 
 				};
 
 
-				var size = renderer.getDrawingBufferSize( new THREE.Vector2() );
 
-				var renderTarget = new THREE.WebGLMultisampleRenderTarget( size.width, size.height, parameters );
 
+				var size = renderer.getDrawingBufferSize( new Vector2() );
 
+				var renderTarget = new WebGLMultisampleRenderTarget( size.width, size.height, parameters );
 
 
-				var renderPass = new THREE.RenderPass( scene, camera );
 
-				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
 
+				var renderPass = new RenderPass( scene, camera );
 
+				var copyPass = new ShaderPass( CopyShader );
 
 
 				//
 
 
-				composer1 = new THREE.EffectComposer( renderer, renderTarget );
 
+				composer1 = new EffectComposer( renderer, renderTarget );
 
 				composer1.addPass( renderPass );
 
 				composer1.addPass( copyPass );
 
 
 				//
 
 
-				composer2 = new THREE.EffectComposer( renderer );
 
+				composer2 = new EffectComposer( renderer );
 
 				composer2.addPass( renderPass );
 
 				composer2.addPass( copyPass );
 
 
@@ -146,9 +161,9 @@
 
 				camera.aspect = ( container.offsetWidth * 0.5 ) / container.offsetHeight;
 
 				camera.updateProjectionMatrix();
 
 
-				renderer.setSize( container.offsetWidth, container.offsetHeight  );
 
-				composer1.setSize( container.offsetWidth, container.offsetHeight  );
 
-				composer2.setSize( container.offsetWidth, container.offsetHeight  );
 
+				renderer.setSize( container.offsetWidth, container.offsetHeight );
 
+				composer1.setSize( container.offsetWidth, container.offsetHeight );
 
+				composer2.setSize( container.offsetWidth, container.offsetHeight );
 
 
 			}

+ 19 - 10
examples/webgl2_sandbox.html
파일 보기 

@@ -10,20 +10,29 @@
 
 	<body>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl2 sandbox</div>
 
 
-		<script type="module">
 
+		<script src="js/WebGL.js"></script>
 
 
-			import { PerspectiveCamera } from '../src/cameras/PerspectiveCamera.js';
 
-			import { SphereBufferGeometry } from '../src/geometries/SphereGeometry.js';
 
-			import { MeshNormalMaterial } from '../src/materials/MeshNormalMaterial.js';
 
-			import { PointLight } from '../src/lights/PointLight.js';
 
-			import { Color } from '../src/math/Color.js';
 
-			import { Mesh } from '../src/objects/Mesh.js';
 
-			import { Fog } from '../src/scenes/Fog.js';
 
-			import { Scene } from '../src/scenes/Scene.js';
 
-			import { WebGLRenderer } from '../src/renderers/WebGLRenderer.js';
 
+		<script type="module">
 
+			import {
 
+				Color,
 
+				PerspectiveCamera,
 
+				Fog,
 
+				Mesh,
 
+				MeshNormalMaterial,
 
+				PointLight,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
+			if ( WEBGL.isWebGL2Available() === false ) {
 
+
 
+				document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
 
+
 
+			}
 
+
 
 			//
 
 
 			var camera, scene, renderer;

+ 23 - 21
examples/webgl_shader2.html
파일 보기 

@@ -11,11 +11,6 @@
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - shader material demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank" rel="noopener">Monjori by Mic</a></div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
 		<script id="fragment_shader4" type="x-shader/x-fragment">
 
 
 			uniform float time;
 
@@ -136,13 +131,20 @@
 
 
 		</script>
 
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				Clock,
 
+				Mesh,
 
+				PerspectiveCamera,
 
+				RepeatWrapping,
 
+				Scene,
 
+				ShaderMaterial,
 
+				TextureLoader,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
 			var container, stats;
 
 
@@ -157,14 +159,14 @@
 
 
 				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 3000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 3000 );
 
 				camera.position.z = 4;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				clock = new THREE.Clock();
 
+				clock = new Clock();
 
 
-				var geometry = new THREE.BoxBufferGeometry( 0.75, 0.75, 0.75 );
 
+				var geometry = new BoxBufferGeometry( 0.75, 0.75, 0.75 );
 
 
 				uniforms1 = {
 
 					"time": { value: 1.0 }
 
@@ -172,10 +174,10 @@
 
 
 				uniforms2 = {
 
 					"time": { value: 1.0 },
 
-					"texture": { value: new THREE.TextureLoader().load( 'textures/disturb.jpg' ) }
 
+					"texture": { value: new TextureLoader().load( 'textures/disturb.jpg' ) }
 
 				};
 
 
-				uniforms2[ "texture" ].value.wrapS = uniforms2[ "texture" ].value.wrapT = THREE.RepeatWrapping;
 
+				uniforms2[ "texture" ].value.wrapS = uniforms2[ "texture" ].value.wrapT = RepeatWrapping;
 
 
 				var params = [
 
 					[ 'fragment_shader1', uniforms1 ],
 
@@ -186,7 +188,7 @@
 
 
 				for ( var i = 0; i < params.length; i ++ ) {
 
 
-					var material = new THREE.ShaderMaterial( {
 
+					var material = new ShaderMaterial( {
 
 
 						uniforms: params[ i ][ 1 ],
 
 						vertexShader: document.getElementById( 'vertexShader' ).textContent,
 
@@ -194,14 +196,14 @@
 
 
 					} );
 
 
-					var mesh = new THREE.Mesh( geometry, material );
 
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.x = i - ( params.length - 1 ) / 2;
 
 					mesh.position.y = i % 2 - 0.5;
 
 					scene.add( mesh );
 
 
 				}
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				container.appendChild( renderer.domElement );

+ 46 - 37
examples/webgl_shaders_ocean.html
파일 보기 

@@ -13,23 +13,32 @@
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl ocean
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/objects/Water.js"></script>
 
-		<script src="js/objects/Sky.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				Color,
 
+				CubeCamera,
 
+				DirectionalLight,
 
+				DoubleSide,
 
+				Float32BufferAttribute,
 
+				IcosahedronBufferGeometry,
 
+				LinearMipMapLinearFilter,
 
+				Mesh,
 
+				MeshStandardMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				RepeatWrapping,
 
+				Scene,
 
+				TextureLoader,
 
+				VertexColors,
 
+				WebGLRenderer
 
+			} 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 { Water } from './jsm/objects/Water.js';
 
+			import { Sky } from './jsm/objects/Sky.js';
 
 
 			var container, stats;
 
 			var camera, scene, renderer, light;
 
@@ -44,37 +53,37 @@
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
 
 				//
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				//
 
 
-				camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
 
+				camera = new PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
 
 				camera.position.set( 30, 30, 100 );
 
 
 				//
 
 
-				light = new THREE.DirectionalLight( 0xffffff, 0.8 );
 
+				light = new DirectionalLight( 0xffffff, 0.8 );
 
 				scene.add( light );
 
 
 				// Water
 
 
-				var waterGeometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
 
+				var waterGeometry = new PlaneBufferGeometry( 10000, 10000 );
 
 
-				water = new THREE.Water(
 
+				water = new Water(
 
 					waterGeometry,
 
 					{
 
 						textureWidth: 512,
 
 						textureHeight: 512,
 
-						waterNormals: new THREE.TextureLoader().load( 'textures/waternormals.jpg', function ( texture ) {
 
+						waterNormals: new TextureLoader().load( 'textures/waternormals.jpg', function ( texture ) {
 
 
-							texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 
+							texture.wrapS = texture.wrapT = RepeatWrapping;
 
 
 						} ),
 
 						alpha: 1.0,
 
@@ -92,7 +101,7 @@
 
 
 				// Skybox
 
 
-				var sky = new THREE.Sky();
 
+				var sky = new Sky();
 
 
 				var uniforms = sky.material.uniforms;
 
 
@@ -108,9 +117,9 @@
 
 					azimuth: 0.205
 
 				};
 
 
-				var cubeCamera = new THREE.CubeCamera( 0.1, 1, 512 );
 
+				var cubeCamera = new CubeCamera( 0.1, 1, 512 );
 
 				cubeCamera.renderTarget.texture.generateMipmaps = true;
 
-				cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
 
+				cubeCamera.renderTarget.texture.minFilter = LinearMipMapLinearFilter;
 
 
 				scene.background = cubeCamera.renderTarget;
 
 
@@ -134,11 +143,11 @@
 
 
 				//
 
 
-				var geometry = new THREE.IcosahedronBufferGeometry( 20, 1 );
 
+				var geometry = new IcosahedronBufferGeometry( 20, 1 );
 
 				var count = geometry.attributes.position.count;
 
 
 				var colors = [];
 
-				var color = new THREE.Color();
 
+				var color = new Color();
 
 
 				for ( var i = 0; i < count; i += 3 ) {
 
 
@@ -150,22 +159,22 @@
 
 
 				}
 
 
-				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
+				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
 
-				var material = new THREE.MeshStandardMaterial( {
 
-					vertexColors: THREE.VertexColors,
 
+				var material = new MeshStandardMaterial( {
 
+					vertexColors: VertexColors,
 
 					roughness: 0.0,
 
 					flatShading: true,
 
 					envMap: cubeCamera.renderTarget.texture,
 
-					side: THREE.DoubleSide
 
+					side: DoubleSide
 
 				} );
 
 
-				sphere = new THREE.Mesh( geometry, material );
 
+				sphere = new Mesh( geometry, material );
 
 				scene.add( sphere );
 
 
 				//
 
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.maxPolarAngle = Math.PI * 0.495;
 
 				controls.target.set( 0, 10, 0 );
 
 				controls.minDistance = 40.0;
 
@@ -179,7 +188,7 @@
 
 
 				// GUI
 
 
-				var gui = new dat.GUI();
 
+				var gui = new GUI();
 
 
 				var folder = gui.addFolder( 'Sky' );
 
 				folder.add( parameters, 'inclination', 0, 0.5, 0.0001 ).onChange( updateSun );

+ 23 - 37
examples/webgl_shaders_ocean2.html
파일 보기 

@@ -7,41 +7,28 @@
 
 	</head>
 
 	<body>
 
 		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl ocean simulation<br/>
 
-			current simulation framebuffers type is <span id="type-status"></span><br/>
 
-			change type to <span id="change-type"></span>
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl ocean simulation
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/shaders/OceanShaders.js"></script>
 
-		<script src="js/misc/Ocean.js"></script>
 
+		<script type="module">
 
+			import {
 
+				PerspectiveCamera,
 
+				Scene,
 
+				Vector3,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
-		<script>
 
-			var stats = new Stats();
 
-			document.body.appendChild( stats.dom );
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
-			var lastTime = ( new Date() ).getTime();
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { Ocean } from './jsm/misc/Ocean.js';
 
 
-			var types = { 'float': 'half-float', 'half-float': 'float' };
 
-			var hash = document.location.hash.substr( 1 );
 
-			if ( ! ( hash in types ) ) hash = 'half-float';
 
-
 
-			document.getElementById( 'type-status' ).innerHTML = hash;
 
-			document.getElementById( 'change-type' ).innerHTML = '<a href="#" onclick="return change(\'' + types[ hash ] + '\')">' + types[ hash ] + '</a>';
 
+			var stats = new Stats();
 
+			document.body.appendChild( stats.dom );
 
 
 			var lastTime = ( new Date() ).getTime();
 
 
-			function change( n ) {
 
-
 
-				location.hash = n;
 
-				location.reload();
 
-				return false;
 
-
 
-			}
 
-
 
 			var DEMO = {
 
 				ms_Renderer: null,
 
 				ms_Camera: null,
 
@@ -51,21 +38,21 @@
 
 
 				Initialize: function () {
 
 
-					this.ms_Renderer = new THREE.WebGLRenderer();
 
+					this.ms_Renderer = new WebGLRenderer();
 
 					this.ms_Renderer.setPixelRatio( window.devicePixelRatio );
 
 					this.ms_Renderer.context.getExtension( 'OES_texture_float' );
 
 					this.ms_Renderer.context.getExtension( 'OES_texture_float_linear' );
 
 
 					document.body.appendChild( this.ms_Renderer.domElement );
 
 
-					this.ms_Scene = new THREE.Scene();
 
+					this.ms_Scene = new Scene();
 
 
-					this.ms_Camera = new THREE.PerspectiveCamera( 55.0, window.innerWidth / window.innerHeight, 0.5, 300000 );
 
+					this.ms_Camera = new PerspectiveCamera( 55.0, window.innerWidth / window.innerHeight, 0.5, 300000 );
 
 					this.ms_Camera.position.set( 450, 350, 450 );
 
 					this.ms_Camera.lookAt( 0, 0, 0 );
 
 
 					// Initialize Orbit control
 
-					this.ms_Controls = new THREE.OrbitControls( this.ms_Camera, this.ms_Renderer.domElement );
 
+					this.ms_Controls = new OrbitControls( this.ms_Camera, this.ms_Renderer.domElement );
 
 					this.ms_Controls.userPan = false;
 
 					this.ms_Controls.userPanSpeed = 0.0;
 
 					this.ms_Controls.minDistance = 0;
 
@@ -78,17 +65,17 @@
 
 					var gres = res / 2;
 
 					var origx = - gsize / 2;
 
 					var origz = - gsize / 2;
 
-					this.ms_Ocean = new THREE.Ocean( this.ms_Renderer, this.ms_Camera, this.ms_Scene,
 
+					this.ms_Ocean = new Ocean( this.ms_Renderer, this.ms_Camera, this.ms_Scene,
 
 						{
 
-							USE_HALF_FLOAT: hash === 'half-float',
 
+							USE_HALF_FLOAT: false,
 
 							INITIAL_SIZE: 256.0,
 
 							INITIAL_WIND: [ 10.0, 10.0 ],
 
 							INITIAL_CHOPPINESS: 1.5,
 
 							CLEAR_COLOR: [ 1.0, 1.0, 1.0, 0.0 ],
 
 							GEOMETRY_ORIGIN: [ origx, origz ],
 
 							SUN_DIRECTION: [ - 1.0, 1.0, 1.0 ],
 
-							OCEAN_COLOR: new THREE.Vector3( 0.004, 0.016, 0.047 ),
 
-							SKY_COLOR: new THREE.Vector3( 3.2, 9.6, 12.8 ),
 
+							OCEAN_COLOR: new Vector3( 0.004, 0.016, 0.047 ),
 
+							SKY_COLOR: new Vector3( 3.2, 9.6, 12.8 ),
 
 							EXPOSURE: 0.35,
 
 							GEOMETRY_RESOLUTION: gres,
 
 							GEOMETRY_SIZE: gsize,
 
@@ -100,7 +87,7 @@
 
 					this.ms_Ocean.materialOcean.uniforms[ "u_cameraPosition" ] = { value: this.ms_Camera.position };
 
 					this.ms_Scene.add( this.ms_Ocean.oceanMesh );
 
 
-					var gui = new dat.GUI();
 
+					var gui = new GUI();
 
 					gui.add( this.ms_Ocean, "size", 100, 5000 ).onChange( function ( v ) {
 
 
 						this.object.size = v;
 
@@ -188,7 +175,6 @@
 
 					this.ms_Ocean.materialOcean.uniforms[ "u_viewMatrix" ].value = this.ms_Camera.matrixWorldInverse;
 
 					this.ms_Ocean.materialOcean.uniforms[ "u_cameraPosition" ].value = this.ms_Camera.position;
 
 					this.ms_Ocean.materialOcean.depthTest = true;
 
-					//this.ms_Scene.__lights[1].position.x = this.ms_Scene.__lights[1].position.x + 0.01;
 
 					this.Display();
 
 
 				},

+ 24 - 25
examples/webgl_shaders_sky.html
파일 보기 

@@ -14,21 +14,20 @@
 
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/objects/Sky.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				GridHelper,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { Sky } from './jsm/objects/Sky.js';
 
 
 			var camera, controls, scene, renderer;
 
 
@@ -40,14 +39,14 @@
 
 			function initSky() {
 
 
 				// Add Sky
 
-				sky = new THREE.Sky();
 
+				sky = new Sky();
 
 				sky.scale.setScalar( 450000 );
 
 				scene.add( sky );
 
 
 				// Add Sun Helper
 
-				sunSphere = new THREE.Mesh(
 
-					new THREE.SphereBufferGeometry( 20000, 16, 8 ),
 
-					new THREE.MeshBasicMaterial( { color: 0xffffff } )
 
+				sunSphere = new Mesh(
 
+					new SphereBufferGeometry( 20000, 16, 8 ),
 
+					new MeshBasicMaterial( { color: 0xffffff } )
 
 				);
 
 				sunSphere.position.y = - 700000;
 
 				sunSphere.visible = false;
 
@@ -92,7 +91,7 @@
 
 
 				}
 
 
-				var gui = new dat.GUI();
 
+				var gui = new GUI();
 
 
 				gui.add( effectController, "turbidity", 1.0, 20.0, 0.1 ).onChange( guiChanged );
 
 				gui.add( effectController, "rayleigh", 0.0, 4, 0.001 ).onChange( guiChanged );
 
@@ -109,22 +108,22 @@
 
 
 			function init() {
 
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 100, 2000000 );
 
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 100, 2000000 );
 
 				camera.position.set( 0, 100, 2000 );
 
 
 				//camera.setLens(20);
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				var helper = new THREE.GridHelper( 10000, 2, 0xffffff, 0xffffff );
 
+				var helper = new GridHelper( 10000, 2, 0xffffff, 0xffffff );
 
 				scene.add( helper );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.addEventListener( 'change', render );
 
 				//controls.maxPolarAngle = Math.PI / 2;
 
 				controls.enableZoom = false;

+ 96 - 88
examples/webgl_shaders_tonemapping.html
파일 보기 

@@ -36,32 +36,45 @@
 
 			</div>
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-
 
-		<script src="js/shaders/CopyShader.js"></script>
 
-		<script src="js/shaders/LuminosityShader.js"></script>
 
-		<script src="js/shaders/ConvolutionShader.js"></script>
 
-		<script src="js/shaders/ToneMapShader.js"></script>
 
-		<script src="js/shaders/GammaCorrectionShader.js"></script>
 
-
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
 
-		<script src="js/postprocessing/RenderPass.js"></script>
 
-		<script src="js/postprocessing/MaskPass.js"></script>
 
-		<script src="js/postprocessing/ShaderPass.js"></script>
 
-		<script src="js/postprocessing/BloomPass.js"></script>
 
-		<script src="js/postprocessing/AdaptiveToneMappingPass.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AdditiveBlending,
 
+				AmbientLight,
 
+				BackSide,
 
+				CubeTextureLoader,
 
+				DirectionalLight,
 
+				FloatType,
 
+				LinearFilter,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshLambertMaterial,
 
+				MeshPhongMaterial,
 
+				NormalBlending,
 
+				NoBlending,
 
+				OrthographicCamera,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				RGBAFormat,
 
+				RGBFormat,
 
+				Scene,
 
+				ShaderChunk,
 
+				ShaderMaterial,
 
+				SphereBufferGeometry,
 
+				TextureLoader,
 
+				UniformsLib,
 
+				UniformsUtils,
 
+				WebGLRenderer,
 
+				WebGLRenderTarget
 
+			} from "../build/three.module.js";
 
+
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
 
+			import { AdaptiveToneMappingPass } from './jsm/postprocessing/AdaptiveToneMappingPass.js';
 
+			import { BloomPass } from './jsm/postprocessing/BloomPass.js';
 
+			import { GammaCorrectionShader } from './jsm/shaders/GammaCorrectionShader.js';
 
 
 			var container;
 
 
@@ -104,51 +117,51 @@
 
 
 				// CAMERAS
 
 
-				camera = new THREE.PerspectiveCamera( 70, windowThirdX / window.innerHeight, 0.1, 100000 );
 
+				camera = new PerspectiveCamera( 70, windowThirdX / window.innerHeight, 0.1, 100000 );
 
 				camera.position.x = 700;
 
 				camera.position.y = 400;
 
 				camera.position.z = 800;
 
-				cameraCube = new THREE.PerspectiveCamera( 70, windowThirdX / window.innerHeight, 1, 100000 );
 
+				cameraCube = new PerspectiveCamera( 70, windowThirdX / window.innerHeight, 1, 100000 );
 
 
-				cameraBG = new THREE.OrthographicCamera( - windowHalfX, windowHalfX, windowHalfY, - windowHalfY, - 10000, 10000 );
 
+				cameraBG = new OrthographicCamera( - windowHalfX, windowHalfX, windowHalfY, - windowHalfY, - 10000, 10000 );
 
 				cameraBG.position.z = 100;
 
 
-				orbitControls = new THREE.OrbitControls( camera, container );
 
+				orbitControls = new OrbitControls( camera, container );
 
 				orbitControls.autoRotate = true;
 
 				orbitControls.autoRotateSpeed = 1;
 
 
 				// SCENE
 
 
-				scene = new THREE.Scene();
 
-				sceneCube = new THREE.Scene();
 
-				debugScene = new THREE.Scene();
 
+				scene = new Scene();
 
+				sceneCube = new Scene();
 
+				debugScene = new Scene();
 
 
 				// LIGHTS
 
 
-				var ambient = new THREE.AmbientLight( 0x050505 );
 
+				var ambient = new AmbientLight( 0x050505 );
 
 				scene.add( ambient );
 
 
-				directionalLight = new THREE.DirectionalLight( 0xffffff, params.sunLight );
 
+				directionalLight = new DirectionalLight( 0xffffff, params.sunLight );
 
 				directionalLight.position.set( 2, 0, 10 ).normalize();
 
 				scene.add( directionalLight );
 
 
 				var atmoShader = {
 
-					side: THREE.BackSide,
 
-					// blending: THREE.AdditiveBlending,
 
+					side: BackSide,
 
+					// blending: AdditiveBlending,
 
 					transparent: true,
 
 					lights: true,
 
-					uniforms: THREE.UniformsUtils.merge( [
 
+					uniforms: UniformsUtils.merge( [
 
 
-						THREE.UniformsLib[ "common" ],
 
-						THREE.UniformsLib[ "lights" ]
 
+						UniformsLib[ "common" ],
 
+						UniformsLib[ "lights" ]
 
 
 					] ),
 
 					vertexShader: [
 
 						"varying vec3 vViewPosition;",
 
 						"varying vec3 vNormal;",
 
 						"void main() {",
 
-						THREE.ShaderChunk[ "beginnormal_vertex" ],
 
-						THREE.ShaderChunk[ "defaultnormal_vertex" ],
 
+						ShaderChunk[ "beginnormal_vertex" ],
 
+						ShaderChunk[ "defaultnormal_vertex" ],
 
 
 						"	vNormal = normalize( transformedNormal );",
 
 						"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
 
@@ -160,10 +173,10 @@
 
 
 					fragmentShader: [
 
 
-						THREE.ShaderChunk[ "common" ],
 
-						THREE.ShaderChunk[ "bsdfs" ],
 
-						THREE.ShaderChunk[ "lights_pars_begin" ],
 
-						THREE.ShaderChunk[ "lights_phong_pars_fragment" ],
 
+						ShaderChunk[ "common" ],
 
+						ShaderChunk[ "bsdfs" ],
 
+						ShaderChunk[ "lights_pars_begin" ],
 
+						ShaderChunk[ "lights_phong_pars_fragment" ],
 
 
 						"void main() {",
 
 						"vec3 normal = normalize( -vNormal );",
 
@@ -195,14 +208,14 @@
 
 					].join( "\n" )
 
 				};
 
 
-				var earthAtmoMat = new THREE.ShaderMaterial( atmoShader );
 
+				var earthAtmoMat = new ShaderMaterial( atmoShader );
 
 
-				var earthMat = new THREE.MeshPhongMaterial( {
 
+				var earthMat = new MeshPhongMaterial( {
 
 					color: 0xffffff,
 
 					shininess: 200
 
 				} );
 
 
-				var textureLoader = new THREE.TextureLoader();
 
+				var textureLoader = new TextureLoader();
 
 
 				textureLoader.load( 'textures/planets/earth_atmos_4096.jpg', function ( tex ) {
 
 
@@ -224,9 +237,9 @@
 
 
 				var earthLights = textureLoader.load( 'textures/planets/earth_lights_2048.png' );
 
 
-				var earthLightsMat = new THREE.MeshBasicMaterial( {
 
+				var earthLightsMat = new MeshBasicMaterial( {
 
 					color: 0xffffff,
 
-					blending: THREE.AdditiveBlending,
 
+					blending: AdditiveBlending,
 
 					transparent: true,
 
 					depthTest: false,
 
 					map: earthLights,
 
@@ -235,26 +248,26 @@
 
 
 				var clouds = textureLoader.load( 'textures/planets/earth_clouds_2048.png' );
 
 
-				var earthCloudsMat = new THREE.MeshLambertMaterial( {
 
+				var earthCloudsMat = new MeshLambertMaterial( {
 
 					color: 0xffffff,
 
-					blending: THREE.NormalBlending,
 
+					blending: NormalBlending,
 
 					transparent: true,
 
 					depthTest: false,
 
 					map: clouds
 
 				} );
 
 
 
-				var earthGeo = new THREE.SphereBufferGeometry( 600, 24, 24 );
 
-				var sphereMesh = new THREE.Mesh( earthGeo, earthMat );
 
+				var earthGeo = new SphereBufferGeometry( 600, 24, 24 );
 
+				var sphereMesh = new Mesh( earthGeo, earthMat );
 
 				scene.add( sphereMesh );
 
 
-				var sphereLightsMesh = new THREE.Mesh( earthGeo, earthLightsMat );
 
+				var sphereLightsMesh = new Mesh( earthGeo, earthLightsMat );
 
 				scene.add( sphereLightsMesh );
 
 
-				var sphereCloudsMesh = new THREE.Mesh( earthGeo, earthCloudsMat );
 
+				var sphereCloudsMesh = new Mesh( earthGeo, earthCloudsMat );
 
 				scene.add( sphereCloudsMesh );
 
 
-				var sphereAtmoMesh = new THREE.Mesh( earthGeo, earthAtmoMat );
 
+				var sphereAtmoMesh = new Mesh( earthGeo, earthAtmoMat );
 
 				sphereAtmoMesh.scale.set( 1.05, 1.05, 1.05 );
 
 				scene.add( sphereAtmoMesh );
 
 
@@ -285,7 +298,7 @@
 
 				].join( "\n" );
 
 
 				// Skybox
 
-				adaptiveLuminanceMat = new THREE.ShaderMaterial( {
 
+				adaptiveLuminanceMat = new ShaderMaterial( {
 
 					uniforms: {
 
 						"map": { value: null }
 
 					},
 
@@ -293,10 +306,10 @@
 
 					fragmentShader: pBGShader,
 
 					depthTest: false,
 
 					// color: 0xffffff
 
-					blending: THREE.NoBlending
 
+					blending: NoBlending
 
 				} );
 
 
-				currentLuminanceMat = new THREE.ShaderMaterial( {
 
+				currentLuminanceMat = new ShaderMaterial( {
 
 					uniforms: {
 
 						"map": { value: null }
 
 					},
 
@@ -304,16 +317,16 @@
 
 					fragmentShader: pBGShader,
 
 					depthTest: false
 
 					// color: 0xffffff
 
-					// blending: THREE.NoBlending
 
+					// blending: NoBlending
 
 				} );
 
 
-				var quadBG = new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.1, 0.1 ), currentLuminanceMat );
 
+				var quadBG = new Mesh( new PlaneBufferGeometry( 0.1, 0.1 ), currentLuminanceMat );
 
 				quadBG.position.z = - 500;
 
 				quadBG.position.x = - window.innerWidth * 0.5 + window.innerWidth * 0.05;
 
 				quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
 
 				debugScene.add( quadBG );
 
 
-				quadBG = new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.1, 0.1 ), adaptiveLuminanceMat );
 
+				quadBG = new Mesh( new PlaneBufferGeometry( 0.1, 0.1 ), adaptiveLuminanceMat );
 
 				quadBG.position.z = - 500;
 
 				quadBG.position.x = - window.innerWidth * 0.5 + window.innerWidth * 0.15;
 
 				quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
 
@@ -324,12 +337,12 @@
 
 							 r + "dark-s_py.jpg", r + "dark-s_ny.jpg",
 
 							 r + "dark-s_pz.jpg", r + "dark-s_nz.jpg" ];
 
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
 
-				textureCube.format = THREE.RGBFormat;
 
+				var textureCube = new CubeTextureLoader().load( urls );
 
+				textureCube.format = RGBFormat;
 
 
 				sceneCube.background = textureCube;
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.autoClear = false;
 
@@ -342,37 +355,36 @@
 
 				// var width = window.innerWidth || 1;
 
 				var height = window.innerHeight || 1;
 
 
-				var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };
 
-				var regularRenderTarget = new THREE.WebGLRenderTarget( windowThirdX, height, parameters );
 
-				ldrEffectComposer = new THREE.EffectComposer( renderer, regularRenderTarget );
 
+				var parameters = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat, stencilBuffer: false };
 
+				var regularRenderTarget = new WebGLRenderTarget( windowThirdX, height, parameters );
 
+				ldrEffectComposer = new EffectComposer( renderer, regularRenderTarget );
 
 
 				if ( renderer.extensions.get( 'OES_texture_half_float_linear' ) ) {
 
 
-					parameters.type = THREE.FloatType;
 
+					parameters.type = FloatType;
 
 
 	}
 
-				var hdrRenderTarget = new THREE.WebGLRenderTarget( windowThirdX, height, parameters );
 
-				dynamicHdrEffectComposer = new THREE.EffectComposer( renderer, hdrRenderTarget );
 
+				var hdrRenderTarget = new WebGLRenderTarget( windowThirdX, height, parameters );
 
+				dynamicHdrEffectComposer = new EffectComposer( renderer, hdrRenderTarget );
 
 				dynamicHdrEffectComposer.setSize( window.innerWidth, window.innerHeight );
 
-				hdrEffectComposer = new THREE.EffectComposer( renderer, hdrRenderTarget );
 
+				hdrEffectComposer = new EffectComposer( renderer, hdrRenderTarget );
 
 
-				var debugPass = new THREE.RenderPass( debugScene, cameraBG );
 
+				var debugPass = new RenderPass( debugScene, cameraBG );
 
 				debugPass.clear = false;
 
-				var scenePass = new THREE.RenderPass( scene, camera, undefined, undefined, undefined );
 
-				var skyboxPass = new THREE.RenderPass( sceneCube, cameraCube );
 
+				var scenePass = new RenderPass( scene, camera, undefined, undefined, undefined );
 
+				var skyboxPass = new RenderPass( sceneCube, cameraCube );
 
 				scenePass.clear = false;
 
 
-				adaptToneMappingPass = new THREE.AdaptiveToneMappingPass( true, 256 );
 
+				adaptToneMappingPass = new AdaptiveToneMappingPass( true, 256 );
 
 				adaptToneMappingPass.needsSwap = true;
 
-				ldrToneMappingPass = new THREE.AdaptiveToneMappingPass( false, 256 );
 
-				hdrToneMappingPass = new THREE.AdaptiveToneMappingPass( false, 256 );
 
-				bloomPass = new THREE.BloomPass();
 
-				var gammaCorrectionPass = new THREE.ShaderPass( THREE.GammaCorrectionShader );
 
+				ldrToneMappingPass = new AdaptiveToneMappingPass( false, 256 );
 
+				hdrToneMappingPass = new AdaptiveToneMappingPass( false, 256 );
 
+				bloomPass = new BloomPass();
 
+				var gammaCorrectionPass = new ShaderPass( GammaCorrectionShader );
 
 
 				dynamicHdrEffectComposer.addPass( skyboxPass );
 
 				dynamicHdrEffectComposer.addPass( scenePass );
 
 				dynamicHdrEffectComposer.addPass( adaptToneMappingPass );
 
-				// dynamicHdrEffectComposer.addPass( debugPass );
 
 				dynamicHdrEffectComposer.addPass( bloomPass );
 
 				dynamicHdrEffectComposer.addPass( gammaCorrectionPass );
 
 
@@ -388,12 +400,8 @@
 
 				ldrEffectComposer.addPass( bloomPass );
 
 				ldrEffectComposer.addPass( gammaCorrectionPass );
 
 
-				// var gammaPass = new THREE.ShaderPass( GammaShader );
 
-				// ldrEffectComposer.addPass( gammaPass );
 
-
 
-				var gui = new dat.GUI();
 
+				var gui = new GUI();
 
 
-				// dynamicHdrGui.add( params, 'projection', { 'From cam to mesh': 'camera', 'Normal to mesh': 'normal' } );
 
 				var sceneGui = gui.addFolder( 'Scenes' );
 
 				var toneMappingGui = gui.addFolder( 'ToneMapping' );
 
 				var staticToneMappingGui = gui.addFolder( 'StaticOnly' );

+ 58 - 40
examples/webgl_shaders_vector.html
파일 보기 

@@ -19,10 +19,6 @@
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - Resolution-Independent Vector Fonts. <a href="https://github.com/mrdoob/three.js/issues/4746">info</a>.
 
 		</div>
 
-		<script src="../build/three.js"></script>
 
-		<script src="./js/controls/OrbitControls.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
 
 		<script type="x-shader/x-fragment" id="fs">
 
 
@@ -62,8 +58,30 @@
 
 
 		</script>
 
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BufferGeometry,
 
+				Color,
 
+				DoubleSide,
 
+				Float32BufferAttribute,
 
+				FontLoader,
 
+				Group,
 
+				LineCurve,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				QuadraticBezierCurve,
 
+				Scene,
 
+				Shape,
 
+				ShapeBufferGeometry,
 
+				ShaderMaterial,
 
+				Vector2,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var stats;
 
 
@@ -71,7 +89,7 @@
 
 
 			var group;
 
 
-			var loader = new THREE.FontLoader();
 
+			var loader = new FontLoader();
 
 			loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
 
 
 				init( font );
 
@@ -81,35 +99,35 @@
 
 
 			function init( font ) {
 
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.set( 50, 100, 500 );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xf0f0f0 );
 
 
 				var theText = '&'; // i % & j b 8
 
 
-				group = new THREE.Group();
 
+				group = new Group();
 
 				scene.add( group );
 
 
-				var textMaterial = new THREE.MeshBasicMaterial( {
 
-					color: new THREE.Color( 0, 0, 1 ),
 
-					side: THREE.DoubleSide,
 
+				var textMaterial = new MeshBasicMaterial( {
 
+					color: new Color( 0, 0, 1 ),
 
+					side: DoubleSide,
 
 					wireframe: true
 
 				} );
 
 
 				var textShapes = font.generateShapes( theText, 180 );
 
 
-				var geometry = new THREE.ShapeBufferGeometry( textShapes );
 
+				var geometry = new ShapeBufferGeometry( textShapes );
 
 
-				var text = new THREE.Mesh( geometry, textMaterial );
 
+				var text = new Mesh( geometry, textMaterial );
 
 				text.position.x = - 200;
 
 				group.add( text );
 
 
 				//
 
 
-				var vA = new THREE.Vector2();
 
-				var vB = new THREE.Vector2();
 
+				var vA = new Vector2();
 
+				var vB = new Vector2();
 
 
 				function processShape( path ) {
 
 
@@ -127,12 +145,12 @@
 
 					for ( var i = 0; i < path.length; i ++ ) {
 
 
 						var curve = path[ i ];
 
-						if ( curve instanceof THREE.LineCurve ) {
 
+						if ( curve instanceof LineCurve ) {
 
 
 							pts.push( curve.v2 );
 
 							pts2.push( curve.v2 );
 
 
-						} else if ( curve instanceof THREE.QuadraticBezierCurve ) {
 
+						} else if ( curve instanceof QuadraticBezierCurve ) {
 
 
 							vA = vA.subVectors( curve.v1, curve.v0 );
 
 							vB = vB.subVectors( curve.v2, curve.v1 );
 
@@ -193,8 +211,8 @@
 
 					beziers = beziers.concat( process.beziers );
 
 					invert = invert.concat( process.invert );
 
 
-					convexhullShape = new THREE.Shape( pts );
 
-					solidShape = new THREE.Shape( pts2 );
 
+					convexhullShape = new Shape( pts );
 
+					solidShape = new Shape( pts2 );
 
 
 					convexhullShapeGroup.push( convexhullShape );
 
 					solidShapeGroup.push( solidShape );
 
@@ -210,14 +228,14 @@
 
 						beziers = beziers.concat( process.beziers );
 
 						invert = invert.concat( process.invert );
 
 
-						convexhullShape.holes.push( new THREE.Shape( pts ) );
 
-						solidShape.holes.push( new THREE.Shape( pts2 ) );
 
+						convexhullShape.holes.push( new Shape( pts ) );
 
+						solidShape.holes.push( new Shape( pts2 ) );
 
 
 					}
 
 
 				} // end of subshape
 
 
-				var bezierGeometry = new THREE.BufferGeometry();
 
+				var bezierGeometry = new BufferGeometry();
 
 				var vertices = [];
 
 				var uvs = [];
 
 
@@ -234,34 +252,34 @@
 
 
 				}
 
 
-				bezierGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
-				bezierGeometry.addAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
 
-				bezierGeometry.addAttribute( 'invert', new THREE.Float32BufferAttribute( invert, 1 ) );
 
+				bezierGeometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
 
+				bezierGeometry.addAttribute( 'uv', new Float32BufferAttribute( uvs, 2 ) );
 
+				bezierGeometry.addAttribute( 'invert', new Float32BufferAttribute( invert, 1 ) );
 
 
-				geometry = new THREE.ShapeBufferGeometry( convexhullShapeGroup );
 
+				geometry = new ShapeBufferGeometry( convexhullShapeGroup );
 
 
-				text = new THREE.Mesh( geometry, textMaterial );
 
+				text = new Mesh( geometry, textMaterial );
 
 				text.position.x = 200;
 
 				group.add( text );
 
 
-				geometry = new THREE.ShapeBufferGeometry( solidShapeGroup );
 
+				geometry = new ShapeBufferGeometry( solidShapeGroup );
 
 
-				text = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: new THREE.Color( 1, 0, 0 ), side: THREE.DoubleSide, wireframe: true } ) );
 
+				text = new Mesh( geometry, new MeshBasicMaterial( { color: new Color( 1, 0, 0 ), side: DoubleSide, wireframe: true } ) );
 
 				text.position.x = 200;
 
 				group.add( text );
 
 
 				//
 
 
-				var newMaterial = new THREE.ShaderMaterial( {
 
+				var newMaterial = new ShaderMaterial( {
 
 					uniforms: {
 
-						color: { value: new THREE.Color( 0.45 * 0xffffff ) }
 
+						color: { value: new Color( 0.45 * 0xffffff ) }
 
 					},
 
 					vertexShader: document.getElementById( 'vs' ).textContent,
 
 					fragmentShader: document.getElementById( 'fs' ).textContent,
 
-					side: THREE.DoubleSide
 
+					side: DoubleSide
 
 				} );
 
 
-				text = new THREE.Mesh( bezierGeometry, newMaterial );
 
+				text = new Mesh( bezierGeometry, newMaterial );
 
 				text.rotation.y = Math.PI * 2;
 
 
 				group.add( text );
 
@@ -269,21 +287,21 @@
 
 				//
 
 
 
-				geometry = new THREE.ShapeBufferGeometry( solidShapeGroup );
 
+				geometry = new ShapeBufferGeometry( solidShapeGroup );
 
 
-				text = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0.45 * 0xffffff, side: THREE.DoubleSide } ) );
 
+				text = new Mesh( geometry, new MeshBasicMaterial( { color: 0.45 * 0xffffff, side: DoubleSide } ) );
 
 				text.rotation.y = Math.PI * 2;
 
 
 				group.add( text );
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.target.set( 50, 100, 0 );
 
 				controls.update();

+ 73 - 52
examples/webgl_shading_physical.html
파일 보기 

@@ -12,17 +12,38 @@
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl physically based shading testbed
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/TrackballControls.js"></script>
 
-		<script src="js/loaders/GLTFLoader.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script src='js/libs/dat.gui.min.js'></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				AnimationMixer,
 
+				BoxBufferGeometry,
 
+				CameraHelper,
 
+				Clock,
 
+				CubeCamera,
 
+				Fog,
 
+				LightShadow,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				NearestFilter,
 
+				PCFSoftShadowMap,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				PointLight,
 
+				RepeatWrapping,
 
+				RGBFormat,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				SpotLight,
 
+				TextureLoader,
 
+				TorusBufferGeometry,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 
 			var container, stats;
 
 
@@ -38,7 +59,7 @@
 
 
 			var mixer;
 
 
-			var clock = new THREE.Clock();
 
+			var clock = new Clock();
 
 
 			var gui, shadowCameraHelper, shadowConfig = {
 
 
@@ -60,49 +81,49 @@
 
 
 				// CAMERA
 
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 2, 10000 );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 2, 10000 );
 
 				camera.position.set( 500, 400, 1200 );
 
 
 				// SCENE
 
 
-				scene = new THREE.Scene();
 
-				scene.fog = new THREE.Fog( 0, 1000, 10000 );
 
+				scene = new Scene();
 
+				scene.fog = new Fog( 0, 1000, 10000 );
 
 
 				// CUBE CAMERA
 
 
-				cubeCamera = new THREE.CubeCamera( 1, 10000, 128 );
 
+				cubeCamera = new CubeCamera( 1, 10000, 128 );
 
 
 				// TEXTURES
 
-				var textureLoader = new THREE.TextureLoader();
 
+				var textureLoader = new TextureLoader();
 
 
 				var textureSquares = textureLoader.load( "textures/patterns/bright_squares256.png" );
 
 				textureSquares.repeat.set( 50, 50 );
 
-				textureSquares.wrapS = textureSquares.wrapT = THREE.RepeatWrapping;
 
-				textureSquares.magFilter = THREE.NearestFilter;
 
-				textureSquares.format = THREE.RGBFormat;
 
+				textureSquares.wrapS = textureSquares.wrapT = RepeatWrapping;
 
+				textureSquares.magFilter = NearestFilter;
 
+				textureSquares.format = RGBFormat;
 
 
 				var textureNoiseColor = textureLoader.load( "textures/disturb.jpg" );
 
 				textureNoiseColor.repeat.set( 1, 1 );
 
-				textureNoiseColor.wrapS = textureNoiseColor.wrapT = THREE.RepeatWrapping;
 
-				textureNoiseColor.format = THREE.RGBFormat;
 
+				textureNoiseColor.wrapS = textureNoiseColor.wrapT = RepeatWrapping;
 
+				textureNoiseColor.format = RGBFormat;
 
 
 				var textureLava = textureLoader.load( "textures/lava/lavatile.jpg" );
 
 				textureLava.repeat.set( 6, 2 );
 
-				textureLava.wrapS = textureLava.wrapT = THREE.RepeatWrapping;
 
-				textureLava.format = THREE.RGBFormat;
 
+				textureLava.wrapS = textureLava.wrapT = RepeatWrapping;
 
+				textureLava.format = RGBFormat;
 
 
 				// GROUND
 
 
-				var groundMaterial = new THREE.MeshPhongMaterial( {
 
+				var groundMaterial = new MeshPhongMaterial( {
 
 					shininess: 80,
 
 					color: 0xffffff,
 
 					specular: 0xffffff,
 
 					map: textureSquares
 
 				} );
 
 
-				var planeGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
+				var planeGeometry = new PlaneBufferGeometry( 100, 100 );
 
 
-				var ground = new THREE.Mesh( planeGeometry, groundMaterial );
 
+				var ground = new Mesh( planeGeometry, groundMaterial );
 
 				ground.position.set( 0, 0, 0 );
 
 				ground.rotation.x = - Math.PI / 2;
 
 				ground.scale.set( 1000, 1000, 1000 );
 
@@ -111,15 +132,15 @@
 
 
 				// MATERIALS
 
 
-				var materialLambert = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, map: textureNoiseColor } );
 
-				var materialPhong = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, map: textureLava } );
 
-				var materialPhongCube = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, envMap: cubeCamera.renderTarget.texture } );
 
+				var materialLambert = new MeshPhongMaterial( { shininess: 50, color: 0xffffff, map: textureNoiseColor } );
 
+				var materialPhong = new MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, map: textureLava } );
 
+				var materialPhongCube = new MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, envMap: cubeCamera.renderTarget.texture } );
 
 
 				// OBJECTS
 
 
-				var sphereGeometry = new THREE.SphereBufferGeometry( 100, 64, 32 );
 
-				var torusGeometry = new THREE.TorusBufferGeometry( 240, 60, 32, 64 );
 
-				var cubeGeometry = new THREE.BoxBufferGeometry( 150, 150, 150 );
 
+				var sphereGeometry = new SphereBufferGeometry( 100, 64, 32 );
 
+				var torusGeometry = new TorusBufferGeometry( 240, 60, 32, 64 );
 
+				var cubeGeometry = new BoxBufferGeometry( 150, 150, 150 );
 
 
 				addObject( torusGeometry, materialPhong, 0, 100, 0, 0 );
 
 				addObject( cubeGeometry, materialLambert, 350, 75, 300, 0 );
 
@@ -129,7 +150,7 @@
 
 
 				function addObjectColor( geometry, color, x, y, z, ry ) {
 
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xffffff } );
 
+					var material = new MeshPhongMaterial( { color: 0xffffff } );
 
 
 					return addObject( geometry, material, x, y, z, ry );
 
 
@@ -137,7 +158,7 @@
 
 
 				function addObject( geometry, material, x, y, z, ry ) {
 
 
-					var tmpMesh = new THREE.Mesh( geometry, material );
 
+					var tmpMesh = new Mesh( geometry, material );
 
 
 					tmpMesh.material.color.offsetHSL( 0.1, - 0.1, 0 );
 
 
@@ -154,9 +175,9 @@
 
 
 				}
 
 
-				var bigCube = new THREE.BoxBufferGeometry( 50, 500, 50 );
 
-				var midCube = new THREE.BoxBufferGeometry( 50, 200, 50 );
 
-				var smallCube = new THREE.BoxBufferGeometry( 100, 100, 100 );
 
+				var bigCube = new BoxBufferGeometry( 50, 500, 50 );
 
+				var midCube = new BoxBufferGeometry( 50, 200, 50 );
 
+				var smallCube = new BoxBufferGeometry( 100, 100, 100 );
 
 
 				addObjectColor( bigCube, 0xff0000, - 500, 250, 0, 0 );
 
 				addObjectColor( smallCube, 0xff0000, - 500, 50, - 150, 0 );
 
@@ -170,20 +191,20 @@
 
 				addObjectColor( midCube, 0xff00ff, 0, 100, 500, 0 );
 
 				addObjectColor( smallCube, 0xff00ff, - 150, 50, 500, 0 );
 
 
-				addObjectColor( new THREE.BoxBufferGeometry( 500, 10, 10 ), 0xffff00, 0, 600, 0, Math.PI / 4 );
 
-				addObjectColor( new THREE.BoxBufferGeometry( 250, 10, 10 ), 0xffff00, 0, 600, 0, 0 );
 
+				addObjectColor( new BoxBufferGeometry( 500, 10, 10 ), 0xffff00, 0, 600, 0, Math.PI / 4 );
 
+				addObjectColor( new BoxBufferGeometry( 250, 10, 10 ), 0xffff00, 0, 600, 0, 0 );
 
 
-				addObjectColor( new THREE.SphereBufferGeometry( 100, 32, 26 ), 0xffffff, - 300, 100, 300, 0 );
 
+				addObjectColor( new SphereBufferGeometry( 100, 32, 26 ), 0xffffff, - 300, 100, 300, 0 );
 
 
 				// MORPHS
 
 
-				var loader = new THREE.GLTFLoader();
 
+				var loader = new GLTFLoader();
 
 
 				loader.load( "models/gltf/SittingBox.glb", function ( gltf ) {
 
 
 					var mesh = gltf.scene.children[ 0 ];
 
 
-					mixer = new THREE.AnimationMixer( mesh );
 
+					mixer = new AnimationMixer( mesh );
 
 
 					mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 10 ).play();
 
 
@@ -202,31 +223,31 @@
 
 
 				// LIGHTS
 
 
-				ambientLight = new THREE.AmbientLight( 0x3f2806 );
 
+				ambientLight = new AmbientLight( 0x3f2806 );
 
 				scene.add( ambientLight );
 
 
-				pointLight = new THREE.PointLight( 0xffaa00, 1, 5000 );
 
+				pointLight = new PointLight( 0xffaa00, 1, 5000 );
 
 				scene.add( pointLight );
 
 
-				sunLight = new THREE.SpotLight( 0xffffff, 0.3, 0, Math.PI / 2 );
 
+				sunLight = new SpotLight( 0xffffff, 0.3, 0, Math.PI / 2 );
 
 				sunLight.position.set( 1000, 2000, 1000 );
 
 
 				sunLight.castShadow = true;
 
 
-				sunLight.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( shadowConfig.shadowCameraFov, 1, shadowConfig.shadowCameraNear, shadowConfig.shadowCameraFar ) );
 
+				sunLight.shadow = new LightShadow( new PerspectiveCamera( shadowConfig.shadowCameraFov, 1, shadowConfig.shadowCameraNear, shadowConfig.shadowCameraFar ) );
 
 				sunLight.shadow.bias = shadowConfig.shadowBias;
 
 
 				scene.add( sunLight );
 
 
 				// SHADOW CAMERA HELPER
 
 
-				shadowCameraHelper = new THREE.CameraHelper( sunLight.shadow.camera );
 
+				shadowCameraHelper = new CameraHelper( sunLight.shadow.camera );
 
 				shadowCameraHelper.visible = shadowConfig.shadowCameraVisible;
 
 				scene.add( shadowCameraHelper );
 
 
 				// RENDERER
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
@@ -234,7 +255,7 @@
 
 				//
 
 
 				renderer.shadowMap.enabled = true;
 
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
+				renderer.shadowMap.type = PCFSoftShadowMap;
 
 
 				//
 
 
@@ -243,7 +264,7 @@
 
 
 				//
 
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
 
+				controls = new TrackballControls( camera, renderer.domElement );
 
 				controls.target.set( 0, 120, 0 );
 
 
 				controls.rotateSpeed = 1.0;
 
@@ -270,7 +291,7 @@
 
 
 				// GUI
 
 
-				gui = new dat.GUI( { width: 400 } );
 
+				gui = new GUI( { width: 400 } );
 
 
 				// SHADOW

+ 49 - 41
examples/webgl_shadowmap.html
파일 보기 

@@ -15,24 +15,32 @@
 
 		t: toggle HUD
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/FirstPersonControls.js"></script>
 
-		<script src="js/loaders/GLTFLoader.js"></script>
 
-
 
-		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
 
-		<script src="js/utils/ShadowMapViewer.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				AnimationMixer,
 
+				BoxBufferGeometry,
 
+				Clock,
 
+				Color,
 
+				Fog,
 
+				FontLoader,
 
+				LightShadow,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PCFShadowMap,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				SpotLight,
 
+				TextBufferGeometry,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
+			import { ShadowMapViewer } from './jsm/utils/ShadowMapViewer.js';
 
 
 			var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
 
 
@@ -50,7 +58,7 @@
 
 			var light;
 
 			var lightShadowMapViewer;
 
 
-			var clock = new THREE.Clock();
 
+			var clock = new Clock();
 
 
 			var showHUD = false;
 
 
@@ -65,16 +73,16 @@
 
 
 				// CAMERA
 
 
-				camera = new THREE.PerspectiveCamera( 23, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
 
+				camera = new PerspectiveCamera( 23, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
 
 				camera.position.set( 700, 50, 1900 );
 
 
 				// SCENE
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x59472b );
 
-				scene.fog = new THREE.Fog( 0x59472b, 1000, FAR );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x59472b );
 
+				scene.fog = new Fog( 0x59472b, 1000, FAR );
 
 
-				controls = new THREE.FirstPersonControls( camera );
 
+				controls = new FirstPersonControls( camera );
 
 
 				controls.lookSpeed = 0.0125;
 
 				controls.movementSpeed = 500;
 
@@ -85,16 +93,16 @@
 
 
 				// LIGHTS
 
 
-				var ambient = new THREE.AmbientLight( 0x444444 );
 
+				var ambient = new AmbientLight( 0x444444 );
 
 				scene.add( ambient );
 
 
-				light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 2 );
 
+				light = new SpotLight( 0xffffff, 1, 0, Math.PI / 2 );
 
 				light.position.set( 0, 1500, 1000 );
 
 				light.target.position.set( 0, 0, 0 );
 
 
 				light.castShadow = true;
 
 
-				light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 1200, 2500 ) );
 
+				light.shadow = new LightShadow( new PerspectiveCamera( 50, 1, 1200, 2500 ) );
 
 				light.shadow.bias = 0.0001;
 
 
 				light.shadow.mapSize.width = SHADOW_MAP_WIDTH;
 
@@ -107,7 +115,7 @@
 
 
 				// RENDERER
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				container.appendChild( renderer.domElement );
 
@@ -119,7 +127,7 @@
 
 				//
 
 
 				renderer.shadowMap.enabled = true;
 
-				renderer.shadowMap.type = THREE.PCFShadowMap;
 
+				renderer.shadowMap.type = PCFShadowMap;
 
 
 				// STATS
 
 
@@ -161,7 +169,7 @@
 
 
 			function createHUD() {
 
 
-				lightShadowMapViewer = new THREE.ShadowMapViewer( light );
 
+				lightShadowMapViewer = new ShadowMapViewer( light );
 
 				lightShadowMapViewer.position.x = 10;
 
 				lightShadowMapViewer.position.y = SCREEN_HEIGHT - ( SHADOW_MAP_HEIGHT / 4 ) - 10;
 
 				lightShadowMapViewer.size.width = SHADOW_MAP_WIDTH / 4;
 
@@ -174,10 +182,10 @@
 
 
 				// GROUND
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
-				var planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffb851 } );
 
+				var geometry = new PlaneBufferGeometry( 100, 100 );
 
+				var planeMaterial = new MeshPhongMaterial( { color: 0xffb851 } );
 
 
-				var ground = new THREE.Mesh( geometry, planeMaterial );
 
+				var ground = new Mesh( geometry, planeMaterial );
 
 
 				ground.position.set( 0, FLOOR, 0 );
 
 				ground.rotation.x = - Math.PI / 2;
 
@@ -190,10 +198,10 @@
 
 
 				// TEXT
 
 
-				var loader = new THREE.FontLoader();
 
+				var loader = new FontLoader();
 
 				loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
 
-					var textGeo = new THREE.TextBufferGeometry( "THREE.JS", {
 
+					var textGeo = new TextBufferGeometry( "THREE.JS", {
 
 
 						font: font,
 
 
@@ -210,9 +218,9 @@
 
 					textGeo.computeBoundingBox();
 
 					var centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
 
-					var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
 
+					var textMaterial = new MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
 
 
-					var mesh = new THREE.Mesh( textGeo, textMaterial );
 
+					var mesh = new Mesh( textGeo, textMaterial );
 
 					mesh.position.x = centerOffset;
 
 					mesh.position.y = FLOOR + 67;
 
 
@@ -225,7 +233,7 @@
 
 
 				// CUBES
 
 
-				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1500, 220, 150 ), planeMaterial );
 
+				var mesh = new Mesh( new BoxBufferGeometry( 1500, 220, 150 ), planeMaterial );
 
 
 				mesh.position.y = FLOOR - 50;
 
 				mesh.position.z = 20;
 
@@ -235,7 +243,7 @@
 
 
 				scene.add( mesh );
 
 
-				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1600, 170, 250 ), planeMaterial );
 
+				var mesh = new Mesh( new BoxBufferGeometry( 1600, 170, 250 ), planeMaterial );
 
 
 				mesh.position.y = FLOOR - 50;
 
 				mesh.position.z = 20;
 
@@ -247,7 +255,7 @@
 
 
 				// MORPHS
 
 
-				mixer = new THREE.AnimationMixer( scene );
 
+				mixer = new AnimationMixer( scene );
 
 
 				function addMorph( mesh, clip, speed, duration, x, y, z, fudgeColor ) {
 
 
@@ -280,7 +288,7 @@
 
 
 				}
 
 
-				var loader = new THREE.GLTFLoader();
 
+				var loader = new GLTFLoader();
 
 
 				loader.load( "models/gltf/Horse.glb", function ( gltf ) {

+ 39 - 31
examples/webgl_shadowmap_pcss.html
파일 보기 

@@ -19,12 +19,6 @@
 
 	<body>
 
 		<div id="info">Percent Closer Soft-Shadows (PCSS) by <a href="http://eduperiment.com">spidersharma03</a></div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
 		<script type="x-shader/x-fragment" id="PCSS">
 
 
 				#define LIGHT_WORLD_SIZE 0.005
 
@@ -120,13 +114,27 @@
 
 
 		</script>
 
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				BoxBufferGeometry,
 
+				CameraHelper,
 
+				DirectionalLight,
 
+				Fog,
 
+				Group,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				ShaderChunk,
 
+				SphereBufferGeometry,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var container, stats;
 
 			var camera, scene, renderer;
 
@@ -143,21 +151,21 @@
 
 
 				// scene
 
 
-				scene = new THREE.Scene();
 
-				scene.fog = new THREE.Fog( 0xcce0ff, 5, 100 );
 
+				scene = new Scene();
 
+				scene.fog = new Fog( 0xcce0ff, 5, 100 );
 
 
 				// camera
 
 
-				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera = new PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.y = 5;
 
 				camera.position.z = 15;
 
 				scene.add( camera );
 
 
 				// lights
 
 
-				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
+				scene.add( new AmbientLight( 0x666666 ) );
 
 
-				var light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
 
+				var light = new DirectionalLight( 0xdfebff, 1.75 );
 
 				light.position.set( 2, 8, 4 );
 
 
 				light.castShadow = true;
 
@@ -167,21 +175,21 @@
 
 
 				scene.add( light );
 
 
-				// scene.add( new THREE.DirectionalLightHelper( light ) );
 
-				scene.add( new THREE.CameraHelper( light.shadow.camera ) );
 
+				// scene.add( new DirectionalLightHelper( light ) );
 
+				scene.add( new CameraHelper( light.shadow.camera ) );
 
 
 				// group
 
 
-				group = new THREE.Group();
 
+				group = new Group();
 
 				scene.add( group );
 
 
-				var geometry = new THREE.SphereBufferGeometry( 0.3, 20, 20 );
 
+				var geometry = new SphereBufferGeometry( 0.3, 20, 20 );
 
 
 				for ( var i = 0; i < 20; i ++ ) {
 
 
-					var material = new THREE.MeshPhongMaterial( { color: Math.random() * 0xffffff } );
 
+					var material = new MeshPhongMaterial( { color: Math.random() * 0xffffff } );
 
 
-					var sphere = new THREE.Mesh( geometry, material );
 
+					var sphere = new Mesh( geometry, material );
 
 					sphere.position.x = Math.random() - 0.5;
 
 					sphere.position.z = Math.random() - 0.5;
 
 					sphere.position.normalize();
 
@@ -195,16 +203,16 @@
 
 
 				// ground
 
 
-				var groundMaterial = new THREE.MeshPhongMaterial( { color: 0x404040, specular: 0x111111 } );
 
+				var groundMaterial = new MeshPhongMaterial( { color: 0x404040, specular: 0x111111 } );
 
 
-				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
 
+				var mesh = new Mesh( new PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
 
 				mesh.rotation.x = - Math.PI / 2;
 
 				mesh.receiveShadow = true;
 
 				scene.add( mesh );
 
 
 				// column
 
 
-				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1, 4, 1 ), groundMaterial );
 
+				var mesh = new Mesh( new BoxBufferGeometry( 1, 4, 1 ), groundMaterial );
 
 				mesh.position.y = 2;
 
 				mesh.castShadow = true;
 
 				mesh.receiveShadow = true;
 
@@ -212,7 +220,7 @@
 
 
 				// overwrite shadowmap code
 
 
-				var shader = THREE.ShaderChunk.shadowmap_pars_fragment;
 
+				var shader = ShaderChunk.shadowmap_pars_fragment;
 
 
 				shader = shader.replace(
 
 					'#ifdef USE_SHADOWMAP',
 
@@ -226,11 +234,11 @@
 
 					'#if defined( SHADOWMAP_TYPE_PCF )'
 
 				);
 
 
-				THREE.ShaderChunk.shadowmap_pars_fragment = shader;
 
+				ShaderChunk.shadowmap_pars_fragment = shader;
 
 
 				// renderer
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setClearColor( scene.fog.color );
 
@@ -243,7 +251,7 @@
 
 				renderer.shadowMap.enabled = true;
 
 
 				// controls
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.maxPolarAngle = Math.PI * 0.5;
 
 				controls.minDistance = 10;
 
 				controls.maxDistance = 75;

+ 49 - 40
examples/webgl_shadowmap_performance.html
파일 보기 

@@ -14,23 +14,32 @@
 
 		move camera with WASD / RF + mouse
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/FirstPersonControls.js"></script>
 
-		<script src="js/loaders/GLTFLoader.js"></script>
 
-
 
-		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				AnimationMixer,
 
+				AnimationObjectGroup,
 
+				BoxBufferGeometry,
 
+				Clock,
 
+				Color,
 
+				Fog,
 
+				FontLoader,
 
+				LightShadow,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PCFSoftShadowMap,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				SpotLight,
 
+				TextBufferGeometry,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 
 			var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
 
 
@@ -49,7 +58,7 @@
 
 
 			var light;
 
 
-			var clock = new THREE.Clock();
 
+			var clock = new Clock();
 
 
 			init();
 
 			animate();
 
@@ -62,16 +71,16 @@
 
 
 				// CAMERA
 
 
-				camera = new THREE.PerspectiveCamera( 23, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
 
+				camera = new PerspectiveCamera( 23, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
 
 				camera.position.set( 700, 50, 1900 );
 
 
 				// SCENE
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x59472b );
 
-				scene.fog = new THREE.Fog( 0x59472b, 1000, FAR );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x59472b );
 
+				scene.fog = new Fog( 0x59472b, 1000, FAR );
 
 
-				controls = new THREE.FirstPersonControls( camera );
 
+				controls = new FirstPersonControls( camera );
 
 
 				controls.lookSpeed = 0.0125;
 
 				controls.movementSpeed = 500;
 
@@ -82,16 +91,16 @@
 
 
 				// LIGHTS
 
 
-				var ambient = new THREE.AmbientLight( 0x444444 );
 
+				var ambient = new AmbientLight( 0x444444 );
 
 				scene.add( ambient );
 
 
-				light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 2 );
 
+				light = new SpotLight( 0xffffff, 1, 0, Math.PI / 2 );
 
 				light.position.set( 0, 1500, 1000 );
 
 				light.target.position.set( 0, 0, 0 );
 
 
 				light.castShadow = true;
 
 
-				light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 700, FAR ) );
 
+				light.shadow = new LightShadow( new PerspectiveCamera( 50, 1, 700, FAR ) );
 
 
 				light.shadow.bias = 0.0001;
 
 
@@ -104,7 +113,7 @@
 
 
 				// RENDERER
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				container.appendChild( renderer.domElement );
 
@@ -114,7 +123,7 @@
 
 				//
 
 
 				renderer.shadowMap.enabled = true;
 
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
+				renderer.shadowMap.type = PCFSoftShadowMap;
 
 
 				// STATS
 
 
@@ -145,10 +154,10 @@
 
 
 				// GROUND
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
-				var planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffdd99 } );
 
+				var geometry = new PlaneBufferGeometry( 100, 100 );
 
+				var planeMaterial = new MeshPhongMaterial( { color: 0xffdd99 } );
 
 
-				var ground = new THREE.Mesh( geometry, planeMaterial );
 
+				var ground = new Mesh( geometry, planeMaterial );
 
 
 				ground.position.set( 0, FLOOR, 0 );
 
 				ground.rotation.x = - Math.PI / 2;
 
@@ -161,10 +170,10 @@
 
 
 				// TEXT
 
 
-				var loader = new THREE.FontLoader();
 
+				var loader = new FontLoader();
 
 				loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
 
-					var textGeo = new THREE.TextBufferGeometry( "THREE.JS", {
 
+					var textGeo = new TextBufferGeometry( "THREE.JS", {
 
 
 						font: font,
 
 
@@ -181,9 +190,9 @@
 
 					textGeo.computeBoundingBox();
 
 					var centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
 
-					var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
 
+					var textMaterial = new MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
 
 
-					var mesh = new THREE.Mesh( textGeo, textMaterial );
 
+					var mesh = new Mesh( textGeo, textMaterial );
 
 					mesh.position.x = centerOffset;
 
 					mesh.position.y = FLOOR + 67;
 
 
@@ -196,7 +205,7 @@
 
 
 				// CUBES
 
 
-				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1500, 220, 150 ), planeMaterial );
 
+				var mesh = new Mesh( new BoxBufferGeometry( 1500, 220, 150 ), planeMaterial );
 
 
 				mesh.position.y = FLOOR - 50;
 
 				mesh.position.z = 20;
 
@@ -206,7 +215,7 @@
 
 
 				scene.add( mesh );
 
 
-				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1600, 170, 250 ), planeMaterial );
 
+				var mesh = new Mesh( new BoxBufferGeometry( 1600, 170, 250 ), planeMaterial );
 
 
 				mesh.position.y = FLOOR - 50;
 
 				mesh.position.z = 20;
 
@@ -216,11 +225,11 @@
 
 
 				scene.add( mesh );
 
 
-				mixer = new THREE.AnimationMixer( scene );
 
+				mixer = new AnimationMixer( scene );
 
 
 				for ( var i = 0; i !== ANIMATION_GROUPS; ++ i ) {
 
 
-					var group = new THREE.AnimationObjectGroup();
 
+					var group = new AnimationObjectGroup();
 
 					animGroups.push( group );
 
 
 				}
 
@@ -280,7 +289,7 @@
 
 
 				}
 
 
-				var loader = new THREE.GLTFLoader();
 
+				var loader = new GLTFLoader();
 
 
 				loader.load( "models/gltf/Horse.glb", function ( gltf ) {

+ 48 - 35
examples/webgl_shadowmap_pointlight.html
파일 보기 

@@ -8,20 +8,33 @@
 
 	</head>
 
 	<body>
 
 		<div id="info">
 
-		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - PointLight ShadowMap by <a href="https://github.com/mkkellogg">mkkellogg</a>
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - PointLight ShadowMap by <a href="https://github.com/mkkellogg">mkkellogg</a>
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				BackSide,
 
+				BasicShadowMap,
 
+				BoxBufferGeometry,
 
+				CanvasTexture,
 
+				DoubleSide,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshDistanceMaterial,
 
+				MeshPhongMaterial,
 
+				NearestFilter,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				RepeatWrapping,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var camera, scene, renderer, stats;
 
 			var pointLight, pointLight2;
 
@@ -31,11 +44,11 @@
 
 
 			function init() {
 
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				camera.position.set( 0, 10, 40 );
 
 
-				scene = new THREE.Scene();
 
-				scene.add( new THREE.AmbientLight( 0x111122 ) );
 
+				scene = new Scene();
 
+				scene.add( new AmbientLight( 0x111122 ) );
 
 
 				// lights
 
 
@@ -43,38 +56,38 @@
 
 
 					var intensity = 1.5;
 
 
-					var pointLight = new THREE.PointLight( color, intensity, 20 );
 
+					var pointLight = new PointLight( color, intensity, 20 );
 
 					pointLight.castShadow = true;
 
 					pointLight.shadow.camera.near = 1;
 
 					pointLight.shadow.camera.far = 60;
 
 					pointLight.shadow.bias = - 0.005; // reduces self-shadowing on double-sided objects
 
 
-					var geometry = new THREE.SphereBufferGeometry( 0.3, 12, 6 );
 
-					var material = new THREE.MeshBasicMaterial( { color: color } );
 
+					var geometry = new SphereBufferGeometry( 0.3, 12, 6 );
 
+					var material = new MeshBasicMaterial( { color: color } );
 
 					material.color.multiplyScalar( intensity );
 
-					var sphere = new THREE.Mesh( geometry, material );
 
+					var sphere = new Mesh( geometry, material );
 
 					pointLight.add( sphere );
 
 
-					var texture = new THREE.CanvasTexture( generateTexture() );
 
-					texture.magFilter = THREE.NearestFilter;
 
-					texture.wrapT = THREE.RepeatWrapping;
 
-					texture.wrapS = THREE.RepeatWrapping;
 
+					var texture = new CanvasTexture( generateTexture() );
 
+					texture.magFilter = NearestFilter;
 
+					texture.wrapT = RepeatWrapping;
 
+					texture.wrapS = RepeatWrapping;
 
 					texture.repeat.set( 1, 3.5 );
 
 
-					var geometry = new THREE.SphereBufferGeometry( 2, 32, 8 );
 
-					var material = new THREE.MeshPhongMaterial( {
 
-						side: THREE.DoubleSide,
 
+					var geometry = new SphereBufferGeometry( 2, 32, 8 );
 
+					var material = new MeshPhongMaterial( {
 
+						side: DoubleSide,
 
 						alphaMap: texture,
 
 						alphaTest: 0.5
 
 					} );
 
 
-					var sphere = new THREE.Mesh( geometry, material );
 
+					var sphere = new Mesh( geometry, material );
 
 					sphere.castShadow = true;
 
 					sphere.receiveShadow = true;
 
 					pointLight.add( sphere );
 
 
 					// custom distance material
 
-					var distanceMaterial = new THREE.MeshDistanceMaterial( {
 
+					var distanceMaterial = new MeshDistanceMaterial( {
 
 						alphaMap: material.alphaMap,
 
 						alphaTest: material.alphaTest
 
 					} );
 
@@ -92,30 +105,30 @@
 
 
 				//
 
 
-				var geometry = new THREE.BoxBufferGeometry( 30, 30, 30 );
 
+				var geometry = new BoxBufferGeometry( 30, 30, 30 );
 
 
-				var material = new THREE.MeshPhongMaterial( {
 
+				var material = new MeshPhongMaterial( {
 
 					color: 0xa0adaf,
 
 					shininess: 10,
 
 					specular: 0x111111,
 
-					side: THREE.BackSide
 
+					side: BackSide
 
 				} );
 
 
-				var mesh = new THREE.Mesh( geometry, material );
 
+				var mesh = new Mesh( geometry, material );
 
 				mesh.position.y = 10;
 
 				mesh.receiveShadow = true;
 
 				scene.add( mesh );
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.shadowMap.enabled = true;
 
-				renderer.shadowMap.type = THREE.BasicShadowMap;
 
+				renderer.shadowMap.type = BasicShadowMap;
 
 				document.body.appendChild( renderer.domElement );
 
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.target.set( 0, 10, 0 );
 
 				controls.update();

+ 42 - 35
examples/webgl_shadowmap_viewer.html
파일 보기 

@@ -11,20 +11,27 @@
 
 		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - ShadowMapViewer example by <a href="https://github.com/arya-s">arya-s</a>
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
 
-		<script src="js/utils/ShadowMapViewer.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				BasicShadowMap,
 
+				BoxBufferGeometry,
 
+				CameraHelper,
 
+				Clock,
 
+				DirectionalLight,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				SpotLight,
 
+				TorusKnotBufferGeometry,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { ShadowMapViewer } from './jsm/utils/ShadowMapViewer.js';
 
 
 			var camera, scene, renderer, clock, stats;
 
 			var dirLight, spotLight;
 
@@ -48,16 +55,16 @@
 
 
 			function initScene() {
 
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				camera.position.set( 0, 15, 35 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				// Lights
 
 
-				scene.add( new THREE.AmbientLight( 0x404040 ) );
 
+				scene.add( new AmbientLight( 0x404040 ) );
 
 
-				spotLight = new THREE.SpotLight( 0xffffff );
 
+				spotLight = new SpotLight( 0xffffff );
 
 				spotLight.name = 'Spot Light';
 
 				spotLight.angle = Math.PI / 5;
 
 				spotLight.penumbra = 0.3;
 
@@ -69,9 +76,9 @@
 
 				spotLight.shadow.mapSize.height = 1024;
 
 				scene.add( spotLight );
 
 
-				scene.add( new THREE.CameraHelper( spotLight.shadow.camera ) );
 
+				scene.add( new CameraHelper( spotLight.shadow.camera ) );
 
 
-				dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
 
+				dirLight = new DirectionalLight( 0xffffff, 1 );
 
 				dirLight.name = 'Dir. Light';
 
 				dirLight.position.set( 0, 10, 0 );
 
 				dirLight.castShadow = true;
 
@@ -85,38 +92,38 @@
 
 				dirLight.shadow.mapSize.height = 1024;
 
 				scene.add( dirLight );
 
 
-				scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
 
+				scene.add( new CameraHelper( dirLight.shadow.camera ) );
 
 
 				// Geometry
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 25, 8, 75, 20 );
 
-				var material = new THREE.MeshPhongMaterial( {
 
+				var geometry = new TorusKnotBufferGeometry( 25, 8, 75, 20 );
 
+				var material = new MeshPhongMaterial( {
 
 					color: 0xff0000,
 
 					shininess: 150,
 
 					specular: 0x222222
 
 				} );
 
 
-				torusKnot = new THREE.Mesh( geometry, material );
 
+				torusKnot = new Mesh( geometry, material );
 
 				torusKnot.scale.multiplyScalar( 1 / 18 );
 
 				torusKnot.position.y = 3;
 
 				torusKnot.castShadow = true;
 
 				torusKnot.receiveShadow = true;
 
 				scene.add( torusKnot );
 
 
-				var geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
 
-				cube = new THREE.Mesh( geometry, material );
 
+				var geometry = new BoxBufferGeometry( 3, 3, 3 );
 
+				cube = new Mesh( geometry, material );
 
 				cube.position.set( 8, 3, 8 );
 
 				cube.castShadow = true;
 
 				cube.receiveShadow = true;
 
 				scene.add( cube );
 
 
-				var geometry = new THREE.BoxBufferGeometry( 10, 0.15, 10 );
 
-				var material = new THREE.MeshPhongMaterial( {
 
+				var geometry = new BoxBufferGeometry( 10, 0.15, 10 );
 
+				var material = new MeshPhongMaterial( {
 
 					color: 0xa0adaf,
 
 					shininess: 150,
 
 					specular: 0x111111
 
 				} );
 
 
-				var ground = new THREE.Mesh( geometry, material );
 
+				var ground = new Mesh( geometry, material );
 
 				ground.scale.multiplyScalar( 3 );
 
 				ground.castShadow = false;
 
 				ground.receiveShadow = true;
 
@@ -126,14 +133,14 @@
 
 
 			function initShadowMapViewers() {
 
 
-				dirLightShadowMapViewer = new THREE.ShadowMapViewer( dirLight );
 
+				dirLightShadowMapViewer = new ShadowMapViewer( dirLight );
 
 				dirLightShadowMapViewer.position.x = 10;
 
 				dirLightShadowMapViewer.position.y = 10;
 
 				dirLightShadowMapViewer.size.width = 256;
 
 				dirLightShadowMapViewer.size.height = 256;
 
 				dirLightShadowMapViewer.update(); //Required when setting position or size directly
 
 
-				spotLightShadowMapViewer = new THREE.ShadowMapViewer( spotLight );
 
+				spotLightShadowMapViewer = new ShadowMapViewer( spotLight );
 
 				spotLightShadowMapViewer.size.set( 256, 256 );
 
 				spotLightShadowMapViewer.position.set( 276, 10 );
 
 				// spotLightShadowMapViewer.update();	//NOT required because .set updates automatically
 
@@ -142,18 +149,18 @@
 
 
 			function initMisc() {
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.shadowMap.enabled = true;
 
-				renderer.shadowMap.type = THREE.BasicShadowMap;
 
+				renderer.shadowMap.type = BasicShadowMap;
 
 
 				// Mouse control
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.target.set( 0, 2, 0 );
 
 				controls.update();
 
 
-				clock = new THREE.Clock();
 
+				clock = new Clock();
 
 
 				stats = new Stats();
 
 				document.body.appendChild( stats.dom );

+ 76 - 58
examples/webgl_shadowmesh.html
파일 보기 

@@ -5,38 +5,54 @@
 
 		<meta charset="utf-8">
 
 		<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>
 
-			#lightButton {
 
-				position: absolute;
 
-				right: 20px;
 
-				top: 20px;
 
-			}
 
-		</style>
 
 	</head>
 
 	<body>
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - shadow mesh<br />
 
+			<input id="lightButton" type="button" value="Switch to PointLight">
 
+		</div>
 
 
 		<div id="container"></div>
 
-		<input id="lightButton" type="button" value="Switch to PointLight" onclick="lightButtonHandler()">
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/objects/ShadowMesh.js"></script>
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				ArrowHelper,
 
+				BoxBufferGeometry,
 
+				Clock,
 
+				Color,
 
+				CylinderBufferGeometry,
 
+				DirectionalLight,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshLambertMaterial,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				Plane,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				TorusBufferGeometry,
 
+				Vector3,
 
+				Vector4,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { ShadowMesh } from './jsm/objects/ShadowMesh.js';
 
 
 			var SCREEN_WIDTH = window.innerWidth;
 
 			var SCREEN_HEIGHT = window.innerHeight;
 
 
-			var scene = new THREE.Scene();
 
-			var camera = new THREE.PerspectiveCamera( 55, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
 
-			var clock = new THREE.Clock();
 
-			var renderer = new THREE.WebGLRenderer();
 
+			var scene = new Scene();
 
+			var camera = new PerspectiveCamera( 55, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
 
+			var clock = new Clock();
 
+			var renderer = new WebGLRenderer();
 
 
-			var sunLight = new THREE.DirectionalLight( 'rgb(255,255,255)', 1 );
 
+			var sunLight = new DirectionalLight( 'rgb(255,255,255)', 1 );
 
 			var useDirectionalLight = true;
 
 			var arrowHelper1, arrowHelper2, arrowHelper3;
 
-			var arrowDirection = new THREE.Vector3();
 
-			var arrowPosition1 = new THREE.Vector3();
 
-			var arrowPosition2 = new THREE.Vector3();
 
-			var arrowPosition3 = new THREE.Vector3();
 
+			var arrowDirection = new Vector3();
 
+			var arrowPosition1 = new Vector3();
 
+			var arrowPosition2 = new Vector3();
 
+			var arrowPosition3 = new Vector3();
 
 			var groundMesh;
 
 			var lightSphere, lightHolder;
 
 			var pyramid, pyramidShadow;
 
@@ -44,10 +60,10 @@
 
 			var cube, cubeShadow;
 
 			var cylinder, cylinderShadow;
 
 			var torus, torusShadow;
 
-			var normalVector = new THREE.Vector3( 0, 1, 0 );
 
+			var normalVector = new Vector3( 0, 1, 0 );
 
 			var planeConstant = 0.01; // this value must be slightly higher than the groundMesh's y position of 0.0
 
-			var groundPlane = new THREE.Plane( normalVector, planeConstant );
 
-			var lightPosition4D = new THREE.Vector4();
 
+			var groundPlane = new Plane( normalVector, planeConstant );
 
+			var lightPosition4D = new Vector4();
 
 			var verticalAngle = 0;
 
 			var horizontalAngle = 0;
 
 			var frameTime = 0;
 
@@ -58,7 +74,7 @@
 
 
 			function init() {
 
 
-				scene.background = new THREE.Color( 0x0096ff );
 
+				scene.background = new Color( 0x0096ff );
 
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
@@ -84,87 +100,89 @@
 
 				arrowDirection.subVectors( scene.position, sunLight.position ).normalize();
 
 
 				arrowPosition1.copy( sunLight.position );
 
-				arrowHelper1 = new THREE.ArrowHelper( arrowDirection, arrowPosition1, 0.9, 0xffff00, 0.25, 0.08 );
 
+				arrowHelper1 = new ArrowHelper( arrowDirection, arrowPosition1, 0.9, 0xffff00, 0.25, 0.08 );
 
 				scene.add( arrowHelper1 );
 
 
-				arrowPosition2.copy( sunLight.position ).add( new THREE.Vector3( 0, 0.2, 0 ) );
 
-				arrowHelper2 = new THREE.ArrowHelper( arrowDirection, arrowPosition2, 0.9, 0xffff00, 0.25, 0.08 );
 
+				arrowPosition2.copy( sunLight.position ).add( new Vector3( 0, 0.2, 0 ) );
 
+				arrowHelper2 = new ArrowHelper( arrowDirection, arrowPosition2, 0.9, 0xffff00, 0.25, 0.08 );
 
 				scene.add( arrowHelper2 );
 
 
-				arrowPosition3.copy( sunLight.position ).add( new THREE.Vector3( 0, - 0.2, 0 ) );
 
-				arrowHelper3 = new THREE.ArrowHelper( arrowDirection, arrowPosition3, 0.9, 0xffff00, 0.25, 0.08 );
 
+				arrowPosition3.copy( sunLight.position ).add( new Vector3( 0, - 0.2, 0 ) );
 
+				arrowHelper3 = new ArrowHelper( arrowDirection, arrowPosition3, 0.9, 0xffff00, 0.25, 0.08 );
 
 				scene.add( arrowHelper3 );
 
 
 				// LIGHTBULB
 
-				var lightSphereGeometry = new THREE.SphereBufferGeometry( 0.09 );
 
-				var lightSphereMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(255,255,255)' } );
 
-				lightSphere = new THREE.Mesh( lightSphereGeometry, lightSphereMaterial );
 
+				var lightSphereGeometry = new SphereBufferGeometry( 0.09 );
 
+				var lightSphereMaterial = new MeshBasicMaterial( { color: 'rgb(255,255,255)' } );
 
+				lightSphere = new Mesh( lightSphereGeometry, lightSphereMaterial );
 
 				scene.add( lightSphere );
 
 				lightSphere.visible = false;
 
 
-				var lightHolderGeometry = new THREE.CylinderBufferGeometry( 0.05, 0.05, 0.13 );
 
-				var lightHolderMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(75,75,75)' } );
 
-				lightHolder = new THREE.Mesh( lightHolderGeometry, lightHolderMaterial );
 
+				var lightHolderGeometry = new CylinderBufferGeometry( 0.05, 0.05, 0.13 );
 
+				var lightHolderMaterial = new MeshBasicMaterial( { color: 'rgb(75,75,75)' } );
 
+				lightHolder = new Mesh( lightHolderGeometry, lightHolderMaterial );
 
 				scene.add( lightHolder );
 
 				lightHolder.visible = false;
 
 
 				// GROUND
 
-				var groundGeometry = new THREE.BoxBufferGeometry( 30, 0.01, 40 );
 
-				var groundMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(0,130,0)' } );
 
-				groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
 
+				var groundGeometry = new BoxBufferGeometry( 30, 0.01, 40 );
 
+				var groundMaterial = new MeshLambertMaterial( { color: 'rgb(0,130,0)' } );
 
+				groundMesh = new Mesh( groundGeometry, groundMaterial );
 
 				groundMesh.position.y = 0.0; //this value must be slightly lower than the planeConstant (0.01) parameter above
 
 				scene.add( groundMesh );
 
 
 				// RED CUBE and CUBE's SHADOW
 
-				var cubeGeometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
 
-				var cubeMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(255,0,0)', emissive: 0x200000 } );
 
-				cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
 
+				var cubeGeometry = new BoxBufferGeometry( 1, 1, 1 );
 
+				var cubeMaterial = new MeshLambertMaterial( { color: 'rgb(255,0,0)', emissive: 0x200000 } );
 
+				cube = new Mesh( cubeGeometry, cubeMaterial );
 
 				cube.position.z = - 1;
 
 				scene.add( cube );
 
 
-				cubeShadow = new THREE.ShadowMesh( cube );
 
+				cubeShadow = new ShadowMesh( cube );
 
 				scene.add( cubeShadow );
 
 
 				// BLUE CYLINDER and CYLINDER's SHADOW
 
-				var cylinderGeometry = new THREE.CylinderBufferGeometry( 0.3, 0.3, 2 );
 
-				var cylinderMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(0,0,255)', emissive: 0x000020 } );
 
-				cylinder = new THREE.Mesh( cylinderGeometry, cylinderMaterial );
 
+				var cylinderGeometry = new CylinderBufferGeometry( 0.3, 0.3, 2 );
 
+				var cylinderMaterial = new MeshPhongMaterial( { color: 'rgb(0,0,255)', emissive: 0x000020 } );
 
+				cylinder = new Mesh( cylinderGeometry, cylinderMaterial );
 
 				cylinder.position.z = - 2.5;
 
 				scene.add( cylinder );
 
 
-				cylinderShadow = new THREE.ShadowMesh( cylinder );
 
+				cylinderShadow = new ShadowMesh( cylinder );
 
 				scene.add( cylinderShadow );
 
 
 				// MAGENTA TORUS and TORUS' SHADOW
 
-				var torusGeometry = new THREE.TorusBufferGeometry( 1, 0.2, 10, 16, TWO_PI );
 
-				var torusMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,0,255)', emissive: 0x200020 } );
 
-				torus = new THREE.Mesh( torusGeometry, torusMaterial );
 
+				var torusGeometry = new TorusBufferGeometry( 1, 0.2, 10, 16, TWO_PI );
 
+				var torusMaterial = new MeshPhongMaterial( { color: 'rgb(255,0,255)', emissive: 0x200020 } );
 
+				torus = new Mesh( torusGeometry, torusMaterial );
 
 				torus.position.z = - 6;
 
 				scene.add( torus );
 
 
-				torusShadow = new THREE.ShadowMesh( torus );
 
+				torusShadow = new ShadowMesh( torus );
 
 				scene.add( torusShadow );
 
 
 				// WHITE SPHERE and SPHERE'S SHADOW
 
-				var sphereGeometry = new THREE.SphereBufferGeometry( 0.5, 20, 10 );
 
-				var sphereMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,255)', emissive: 0x222222 } );
 
-				sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
 
+				var sphereGeometry = new SphereBufferGeometry( 0.5, 20, 10 );
 
+				var sphereMaterial = new MeshPhongMaterial( { color: 'rgb(255,255,255)', emissive: 0x222222 } );
 
+				sphere = new Mesh( sphereGeometry, sphereMaterial );
 
 				sphere.position.set( 4, 0.5, 2 );
 
 				scene.add( sphere );
 
 
-				sphereShadow = new THREE.ShadowMesh( sphere );
 
+				sphereShadow = new ShadowMesh( sphere );
 
 				scene.add( sphereShadow );
 
 
 				// YELLOW PYRAMID and PYRAMID'S SHADOW
 
-				var pyramidGeometry = new THREE.CylinderBufferGeometry( 0, 0.5, 2, 4 );
 
-				var pyramidMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,0)', emissive: 0x440000, flatShading: true, shininess: 0 } );
 
-				pyramid = new THREE.Mesh( pyramidGeometry, pyramidMaterial );
 
+				var pyramidGeometry = new CylinderBufferGeometry( 0, 0.5, 2, 4 );
 
+				var pyramidMaterial = new MeshPhongMaterial( { color: 'rgb(255,255,0)', emissive: 0x440000, flatShading: true, shininess: 0 } );
 
+				pyramid = new Mesh( pyramidGeometry, pyramidMaterial );
 
 				pyramid.position.set( - 4, 1, 2 );
 
 				scene.add( pyramid );
 
 
-				pyramidShadow = new THREE.ShadowMesh( pyramid );
 
+				pyramidShadow = new ShadowMesh( pyramid );
 
 				scene.add( pyramidShadow );
 
 
+				document.getElementById( 'lightButton' ).addEventListener( 'click', lightButtonHandler );
 
+
 
 			}
 
 
 			function animate() {

+ 38 - 23
examples/webgl_simple_gi.html
파일 보기 

@@ -12,14 +12,29 @@
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - simple global illumination (<a href="http://www.iquilezles.org/www/articles/simplegi/simplegi.htm">article</a>)
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BackSide,
 
+				BufferAttribute,
 
+				BoxBufferGeometry,
 
+				ClampToEdgeWrapping,
 
+				Matrix3,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				TorusKnotBufferGeometry,
 
+				Vector3,
 
+				VertexColors,
 
+				WebGLRenderer,
 
+				WebGLRenderTarget
 
+			} from "../build/three.module.js";
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			// HACK:
 
 
-			THREE.Mesh.prototype.clone = function () {
 
+			Mesh.prototype.clone = function () {
 
 
 				var newMaterial = ( this.material.isMaterial ) ? this.material.clone() : this.material.slice();
 
 
@@ -33,24 +48,24 @@
 
 
 				var SIZE = 32, SIZE2 = SIZE * SIZE;
 
 
-				var camera = new THREE.PerspectiveCamera( 90, 1, 0.01, 100 );
 
+				var camera = new PerspectiveCamera( 90, 1, 0.01, 100 );
 
 
 				scene.updateMatrixWorld( true );
 
 
 				var clone = scene.clone();
 
 				clone.autoUpdate = false;
 
 
-				var rt = new THREE.WebGLRenderTarget( SIZE, SIZE, {
 
-					wrapS: THREE.ClampToEdgeWrapping,
 
-					wrapT: THREE.ClampToEdgeWrapping,
 
+				var rt = new WebGLRenderTarget( SIZE, SIZE, {
 
+					wrapS: ClampToEdgeWrapping,
 
+					wrapT: ClampToEdgeWrapping,
 
 					stencilBuffer: false,
 
 					depthBuffer: true
 
 				} );
 
 
-				var normalMatrix = new THREE.Matrix3();
 
+				var normalMatrix = new Matrix3();
 
 
-				var position = new THREE.Vector3();
 
-				var normal = new THREE.Vector3();
 
+				var position = new Vector3();
 
+				var normal = new Vector3();
 
 
 				var bounces = 0;
 
 				var currentVertex = 0;
 
@@ -72,7 +87,7 @@
 
 					if ( attributes.color === undefined ) {
 
 
 						var colors = new Float32Array( positions.length );
 
-						geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).setDynamic( true ) );
 
+						geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ).setDynamic( true ) );
 
 
 					}
 
 
@@ -150,17 +165,17 @@
 
 
 			function init() {
 
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
 
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
 
 				camera.position.z = 4;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				// sphere
 
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 0.75, 0.3, 128, 32, 1 );
 
-				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
 
+				var geometry = new TorusKnotBufferGeometry( 0.75, 0.3, 128, 32, 1 );
 
+				var material = new MeshBasicMaterial( { vertexColors: VertexColors } );
 
 
-				var mesh = new THREE.Mesh( geometry, material );
 
+				var mesh = new Mesh( geometry, material );
 
 				scene.add( mesh );
 
 
 				// room
 
@@ -169,25 +184,25 @@
 
 
 				for ( var i = 0; i < 8; i ++ ) {
 
 
-					materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, side: THREE.BackSide } ) );
 
+					materials.push( new MeshBasicMaterial( { color: Math.random() * 0xffffff, side: BackSide } ) );
 
 
 				}
 
 
-				var geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
 
+				var geometry = new BoxBufferGeometry( 3, 3, 3 );
 
 
-				var mesh = new THREE.Mesh( geometry, materials );
 
+				var mesh = new Mesh( geometry, materials );
 
 				scene.add( mesh );
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
 
 				new SimpleGI( renderer, scene );
 
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 
 				window.addEventListener( 'resize', onWindowResize, false );

+ 36 - 21
examples/webgl_skinning_simple.html
파일 보기 

@@ -13,12 +13,27 @@
 
 			<a href="https://github.com/mrdoob/three.js/blob/master/examples/models/skinned/simple/simple.blend" target="_blank" rel="noopener">Blender File</a>
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/loaders/GLTFLoader.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AnimationMixer,
 
+				Clock,
 
+				Color,
 
+				DirectionalLight,
 
+				Fog,
 
+				GridHelper,
 
+				HemisphereLight,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 
 			var stats, mixer, camera, scene, renderer, clock;
 
 
@@ -30,27 +45,27 @@
 
 				var container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				camera.position.set( 24, 8, 24 );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xa0a0a0 );
 
-				scene.fog = new THREE.Fog( 0xa0a0a0, 70, 100 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xa0a0a0 );
 
+				scene.fog = new Fog( 0xa0a0a0, 70, 100 );
 
 
-				clock = new THREE.Clock();
 
+				clock = new Clock();
 
 
 				// ground
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 500, 500 );
 
-				var material = new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } );
 
+				var geometry = new PlaneBufferGeometry( 500, 500 );
 
+				var material = new MeshPhongMaterial( { color: 0x999999, depthWrite: false } );
 
 
-				var ground = new THREE.Mesh( geometry, material );
 
+				var ground = new Mesh( geometry, material );
 
 				ground.position.set( 0, - 5, 0 );
 
 				ground.rotation.x = - Math.PI / 2;
 
 				ground.receiveShadow = true;
 
 				scene.add( ground );
 
 
-				var grid = new THREE.GridHelper( 500, 100, 0x000000, 0x000000 );
 
+				var grid = new GridHelper( 500, 100, 0x000000, 0x000000 );
 
 				grid.position.y = - 5;
 
 				grid.material.opacity = 0.2;
 
 				grid.material.transparent = true;
 
@@ -58,11 +73,11 @@
 
 
 				// lights
 
 
-				var light = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.6 );
 
+				var light = new HemisphereLight( 0xffffff, 0x444444, 0.6 );
 
 				light.position.set( 0, 200, 0 );
 
 				scene.add( light );
 
 
-				light = new THREE.DirectionalLight( 0xffffff, 0.8 );
 
+				light = new DirectionalLight( 0xffffff, 0.8 );
 
 				light.position.set( 0, 20, 10 );
 
 				light.castShadow = true;
 
 				light.shadow.camera.top = 18;
 
@@ -73,7 +88,7 @@
 
 
 				//
 
 
-				var loader = new THREE.GLTFLoader();
 
+				var loader = new GLTFLoader();
 
 				loader.load( './models/gltf/SimpleSkinning.gltf', function ( gltf ) {
 
 
 					scene.add( gltf.scene );
 
@@ -84,14 +99,14 @@
 
 
 					} );
 
 
-					mixer = new THREE.AnimationMixer( gltf.scene );
 
+					mixer = new AnimationMixer( gltf.scene );
 
 					mixer.clipAction( gltf.animations[ 0 ] ).play();
 
 
 				} );
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.shadowMap.enabled = true;
 
@@ -102,7 +117,7 @@
 
 				stats = new Stats();
 
 				container.appendChild( stats.dom );
 
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.enablePan = false;
 
 				controls.minDistance = 5;
 
 				controls.maxDistance = 50;

+ 33 - 20
examples/webgl_sprites.html
파일 보기 

@@ -8,9 +8,22 @@
 
 	</head>
 
 
 	<body>
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script>
 
+		<div id="info">
 
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - sprites
 
+		</div>
 
+
 
+		<script type="module">
 
+			import {
 
+				Fog,
 
+				Group,
 
+				OrthographicCamera,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				Sprite,
 
+				SpriteMaterial,
 
+				TextureLoader,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
 			var camera, scene, renderer;
 
 			var cameraOrtho, sceneOrtho;
 
@@ -29,32 +42,32 @@
 
 				var width = window.innerWidth;
 
 				var height = window.innerHeight;
 
 
-				camera = new THREE.PerspectiveCamera( 60, width / height, 1, 2100 );
 
+				camera = new PerspectiveCamera( 60, width / height, 1, 2100 );
 
 				camera.position.z = 1500;
 
 
-				cameraOrtho = new THREE.OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
 
+				cameraOrtho = new OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
 
 				cameraOrtho.position.z = 10;
 
 
-				scene = new THREE.Scene();
 
-				scene.fog = new THREE.Fog( 0x000000, 1500, 2100 );
 
+				scene = new Scene();
 
+				scene.fog = new Fog( 0x000000, 1500, 2100 );
 
 
-				sceneOrtho = new THREE.Scene();
 
+				sceneOrtho = new Scene();
 
 
 				// create sprites
 
 
 				var amount = 200;
 
 				var radius = 500;
 
 
-				var textureLoader = new THREE.TextureLoader();
 
+				var textureLoader = new TextureLoader();
 
 
 				textureLoader.load( "textures/sprite0.png", createHUDSprites );
 
 				var mapB = textureLoader.load( "textures/sprite1.png" );
 
 				mapC = textureLoader.load( "textures/sprite2.png" );
 
 
-				group = new THREE.Group();
 
+				group = new Group();
 
 
-				var materialC = new THREE.SpriteMaterial( { map: mapC, color: 0xffffff, fog: true } );
 
-				var materialB = new THREE.SpriteMaterial( { map: mapB, color: 0xffffff, fog: true } );
 
+				var materialC = new SpriteMaterial( { map: mapC, color: 0xffffff, fog: true } );
 
+				var materialB = new SpriteMaterial( { map: mapB, color: 0xffffff, fog: true } );
 
 
 				for ( var a = 0; a < amount; a ++ ) {
 
 
@@ -77,7 +90,7 @@
 
 
 					}
 
 
-					var sprite = new THREE.Sprite( material );
 
+					var sprite = new Sprite( material );
 
 
 					sprite.position.set( x, y, z );
 
 					sprite.position.normalize();
 
@@ -91,7 +104,7 @@
 
 
 				// renderer
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.autoClear = false; // To allow render overlay on top of sprited sphere
 
@@ -106,32 +119,32 @@
 
 
 			function createHUDSprites( texture ) {
 
 
-				var material = new THREE.SpriteMaterial( { map: texture } );
 
+				var material = new SpriteMaterial( { map: texture } );
 
 
 				var width = material.map.image.width;
 
 				var height = material.map.image.height;
 
 
-				spriteTL = new THREE.Sprite( material );
 
+				spriteTL = new Sprite( material );
 
 				spriteTL.center.set( 0.0, 1.0 );
 
 				spriteTL.scale.set( width, height, 1 );
 
 				sceneOrtho.add( spriteTL );
 
 
-				spriteTR = new THREE.Sprite( material );
 
+				spriteTR = new Sprite( material );
 
 				spriteTR.center.set( 1.0, 1.0 );
 
 				spriteTR.scale.set( width, height, 1 );
 
 				sceneOrtho.add( spriteTR );
 
 
-				spriteBL = new THREE.Sprite( material );
 
+				spriteBL = new Sprite( material );
 
 				spriteBL.center.set( 0.0, 0.0 );
 
 				spriteBL.scale.set( width, height, 1 );
 
 				sceneOrtho.add( spriteBL );
 
 
-				spriteBR = new THREE.Sprite( material );
 
+				spriteBR = new Sprite( material );
 
 				spriteBR.center.set( 1.0, 0.0 );
 
 				spriteBR.scale.set( width, height, 1 );
 
 				sceneOrtho.add( spriteBR );
 
 
-				spriteC = new THREE.Sprite( material );
 
+				spriteC = new Sprite( material );
 
 				spriteC.center.set( 0.5, 0.5 );
 
 				spriteC.scale.set( width, height, 1 );
 
 				sceneOrtho.add( spriteC );

+ 72 - 58
examples/webgl_terrain_dynamic.html
파일 보기 

@@ -28,18 +28,6 @@
 
 			animate terrain: <strong>m</strong>
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script src="js/utils/BufferGeometryUtils.js"></script>
 
-
 
-		<script src="js/shaders/NormalMapShader.js"></script>
 
-		<script src="js/shaders/TerrainShader.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
 		<script id="fragmentShaderNoise" type="x-shader/x-fragment">
 
 
 			//
 
@@ -183,13 +171,39 @@
 
 
 		</script>
 
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				Clock,
 
+				Color,
 
+				DirectionalLight,
 
+				Fog,
 
+				LinearFilter,
 
+				LoadingManager,
 
+				Math as _Math,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				OrthographicCamera,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				PointLight,
 
+				RepeatWrapping,
 
+				RGBFormat,
 
+				Scene,
 
+				ShaderMaterial,
 
+				TextureLoader,
 
+				UniformsUtils,
 
+				Vector2,
 
+				WebGLRenderer,
 
+				WebGLRenderTarget
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { NormalMapShader } from './jsm/shaders/NormalMapShader.js';
 
+			import { TerrainShader } from './jsm/shaders/TerrainShader.js';
 
+			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
 
 
 			var SCREEN_WIDTH = window.innerWidth;
 
 			var SCREEN_HEIGHT = window.innerHeight;
 
@@ -210,7 +224,7 @@
 
 			var animDelta = 0, animDeltaDir = - 1;
 
 			var lightVal = 0, lightDir = 1;
 
 
-			var clock = new THREE.Clock();
 
+			var clock = new Clock();
 
 
 			var updateNoise = true;
 
 
@@ -225,58 +239,58 @@
 
 
 				// SCENE (RENDER TARGET)
 
 
-				sceneRenderTarget = new THREE.Scene();
 
+				sceneRenderTarget = new Scene();
 
 
-				cameraOrtho = new THREE.OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, - 10000, 10000 );
 
+				cameraOrtho = new OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, - 10000, 10000 );
 
 				cameraOrtho.position.z = 100;
 
 
 				sceneRenderTarget.add( cameraOrtho );
 
 
 				// CAMERA
 
 
-				camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 2, 4000 );
 
+				camera = new PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 2, 4000 );
 
 				camera.position.set( - 1200, 800, 1200 );
 
 
 				// SCENE (FINAL)
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x050505 );
 
-				scene.fog = new THREE.Fog( 0x050505, 2000, 4000 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x050505 );
 
+				scene.fog = new Fog( 0x050505, 2000, 4000 );
 
 
 				// LIGHTS
 
 
-				scene.add( new THREE.AmbientLight( 0x111111 ) );
 
+				scene.add( new AmbientLight( 0x111111 ) );
 
 
-				directionalLight = new THREE.DirectionalLight( 0xffffff, 1.15 );
 
+				directionalLight = new DirectionalLight( 0xffffff, 1.15 );
 
 				directionalLight.position.set( 500, 2000, 0 );
 
 				scene.add( directionalLight );
 
 
-				pointLight = new THREE.PointLight( 0xff4400, 1.5 );
 
+				pointLight = new PointLight( 0xff4400, 1.5 );
 
 				pointLight.position.set( 0, 0, 0 );
 
 				scene.add( pointLight );
 
 
 				// HEIGHT + NORMAL MAPS
 
 
-				var normalShader = THREE.NormalMapShader;
 
+				var normalShader = NormalMapShader;
 
 
 				var rx = 256, ry = 256;
 
-				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
 
+				var pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBFormat };
 
 
-				heightMap = new THREE.WebGLRenderTarget( rx, ry, pars );
 
+				heightMap = new WebGLRenderTarget( rx, ry, pars );
 
 				heightMap.texture.generateMipmaps = false;
 
 
-				normalMap = new THREE.WebGLRenderTarget( rx, ry, pars );
 
+				normalMap = new WebGLRenderTarget( rx, ry, pars );
 
 				normalMap.texture.generateMipmaps = false;
 
 
 				uniformsNoise = {
 
 
 					"time": { value: 1.0 },
 
-					"scale": { value: new THREE.Vector2( 1.5, 1.5 ) },
 
-					"offset": { value: new THREE.Vector2( 0, 0 ) }
 
+					"scale": { value: new Vector2( 1.5, 1.5 ) },
 
+					"offset": { value: new Vector2( 0, 0 ) }
 
 
 				};
 
 
-				uniformsNormal = THREE.UniformsUtils.clone( normalShader.uniforms );
 
+				uniformsNormal = UniformsUtils.clone( normalShader.uniforms );
 
 
 				uniformsNormal[ "height" ].value = 0.05;
 
 				uniformsNormal[ "resolution" ].value.set( rx, ry );
 
@@ -286,30 +300,30 @@
 
 
 				// TEXTURES
 
 
-				var loadingManager = new THREE.LoadingManager( function () {
 
+				var loadingManager = new LoadingManager( function () {
 
 
 					terrain.visible = true;
 
 
 				} );
 
-				var textureLoader = new THREE.TextureLoader( loadingManager );
 
+				var textureLoader = new TextureLoader( loadingManager );
 
 
-				var specularMap = new THREE.WebGLRenderTarget( 2048, 2048, pars );
 
+				var specularMap = new WebGLRenderTarget( 2048, 2048, pars );
 
 				specularMap.texture.generateMipmaps = false;
 
 
 				var diffuseTexture1 = textureLoader.load( "textures/terrain/grasslight-big.jpg" );
 
 				var diffuseTexture2 = textureLoader.load( "textures/terrain/backgrounddetailed6.jpg" );
 
 				var detailTexture = textureLoader.load( "textures/terrain/grasslight-big-nm.jpg" );
 
 
-				diffuseTexture1.wrapS = diffuseTexture1.wrapT = THREE.RepeatWrapping;
 
-				diffuseTexture2.wrapS = diffuseTexture2.wrapT = THREE.RepeatWrapping;
 
-				detailTexture.wrapS = detailTexture.wrapT = THREE.RepeatWrapping;
 
-				specularMap.texture.wrapS = specularMap.texture.wrapT = THREE.RepeatWrapping;
 
+				diffuseTexture1.wrapS = diffuseTexture1.wrapT = RepeatWrapping;
 
+				diffuseTexture2.wrapS = diffuseTexture2.wrapT = RepeatWrapping;
 
+				detailTexture.wrapS = detailTexture.wrapT = RepeatWrapping;
 
+				specularMap.texture.wrapS = specularMap.texture.wrapT = RepeatWrapping;
 
 
 				// TERRAIN SHADER
 
 
-				var terrainShader = THREE.TerrainShader;
 
+				var terrainShader = TerrainShader;
 
 
-				uniformsTerrain = THREE.UniformsUtils.clone( terrainShader.uniforms );
 
+				uniformsTerrain = UniformsUtils.clone( terrainShader.uniforms );
 
 
 				uniformsTerrain[ 'tNormal' ].value = normalMap.texture;
 
 				uniformsTerrain[ 'uNormalScale' ].value = 3.5;
 
@@ -342,7 +356,7 @@
 
 
 				for ( var i = 0; i < params.length; i ++ ) {
 
 
-					var material = new THREE.ShaderMaterial( {
 
+					var material = new ShaderMaterial( {
 
 
 						uniforms: params[ i ][ 3 ],
 
 						vertexShader: params[ i ][ 2 ],
 
@@ -356,19 +370,19 @@
 
 				}
 
 
 
-				var plane = new THREE.PlaneBufferGeometry( SCREEN_WIDTH, SCREEN_HEIGHT );
 
+				var plane = new PlaneBufferGeometry( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 
-				quadTarget = new THREE.Mesh( plane, new THREE.MeshBasicMaterial( { color: 0x000000 } ) );
 
+				quadTarget = new Mesh( plane, new MeshBasicMaterial( { color: 0x000000 } ) );
 
 				quadTarget.position.z = - 500;
 
 				sceneRenderTarget.add( quadTarget );
 
 
 				// TERRAIN MESH
 
 
-				var geometryTerrain = new THREE.PlaneBufferGeometry( 6000, 6000, 256, 256 );
 
+				var geometryTerrain = new PlaneBufferGeometry( 6000, 6000, 256, 256 );
 
 
-				THREE.BufferGeometryUtils.computeTangents( geometryTerrain );
 
+				BufferGeometryUtils.computeTangents( geometryTerrain );
 
 
-				terrain = new THREE.Mesh( geometryTerrain, mlib[ 'terrain' ] );
 
+				terrain = new Mesh( geometryTerrain, mlib[ 'terrain' ] );
 
 				terrain.position.set( 0, - 125, 0 );
 
 				terrain.rotation.x = - Math.PI / 2;
 
 				terrain.visible = false;
 
@@ -376,14 +390,14 @@
 
 
 				// RENDERER
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				container.appendChild( renderer.domElement );
 
 
 				// CONTROLS
 
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				controls = new OrbitControls( camera, renderer.domElement );
 
 
 				controls.rotateSpeed = 1.0;
 
 				controls.zoomSpeed = 1.2;
 
@@ -452,21 +466,21 @@
 
 
 					var fLow = 0.1, fHigh = 0.8;
 
 
-					lightVal = THREE.Math.clamp( lightVal + 0.5 * delta * lightDir, fLow, fHigh );
 
+					lightVal = _Math.clamp( lightVal + 0.5 * delta * lightDir, fLow, fHigh );
 
 
 					var valNorm = ( lightVal - fLow ) / ( fHigh - fLow );
 
 
 					scene.background.setHSL( 0.1, 0.5, lightVal );
 
 					scene.fog.color.setHSL( 0.1, 0.5, lightVal );
 
 
-					directionalLight.intensity = THREE.Math.mapLinear( valNorm, 0, 1, 0.1, 1.15 );
 
-					pointLight.intensity = THREE.Math.mapLinear( valNorm, 0, 1, 0.9, 1.5 );
 
+					directionalLight.intensity = _Math.mapLinear( valNorm, 0, 1, 0.1, 1.15 );
 
+					pointLight.intensity = _Math.mapLinear( valNorm, 0, 1, 0.9, 1.5 );
 
 
-					uniformsTerrain[ 'uNormalScale' ].value = THREE.Math.mapLinear( valNorm, 0, 1, 0.6, 3.5 );
 
+					uniformsTerrain[ 'uNormalScale' ].value = _Math.mapLinear( valNorm, 0, 1, 0.6, 3.5 );
 
 
 					if ( updateNoise ) {
 
 
-						animDelta = THREE.Math.clamp( animDelta + 0.00075 * animDeltaDir, 0, 0.05 );
 
+						animDelta = _Math.clamp( animDelta + 0.00075 * animDeltaDir, 0, 0.05 );
 
 						uniformsNoise[ 'time' ].value += delta * animDelta;
 
 
 						uniformsNoise[ 'offset' ].value.x += delta * 0.05;

+ 28 - 13
examples/webgl_test_memory.html
파일 보기 

@@ -1,22 +1,37 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - webgl</title>
 
+		<title>three.js - webgl memory test I</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			body {
 
 				background-color: #fff;
 
+				color: #000;
 
+			}
 
+			a {
 
+				color: #08f;
 
 			}
 
 		</style>
 
 	</head>
 
 
 	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script>
 
+		<div id="info">
 
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - memory test I
 
+		</div>
 
+
 
+		<script type="module">
 
+			import {
 
+				CanvasTexture,
 
+				Color,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
 			var container;
 
 
@@ -30,13 +45,13 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.z = 200;
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xffffff );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
@@ -69,13 +84,13 @@
 
 
 			function render() {
 
 
-				var geometry = new THREE.SphereBufferGeometry( 50, Math.random() * 64, Math.random() * 32 );
 
+				var geometry = new SphereBufferGeometry( 50, Math.random() * 64, Math.random() * 32 );
 
 
-				var texture = new THREE.CanvasTexture( createImage() );
 
+				var texture = new CanvasTexture( createImage() );
 
 
-				var material = new THREE.MeshBasicMaterial( { map: texture, wireframe: true } );
 
+				var material = new MeshBasicMaterial( { map: texture, wireframe: true } );
 
 
-				var mesh = new THREE.Mesh( geometry, material );
 
+				var mesh = new Mesh( geometry, material );
 
 
 				scene.add( mesh );

+ 27 - 12
examples/webgl_test_memory2.html
파일 보기 

@@ -1,18 +1,26 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - webgl</title>
 
+		<title>three.js - webgl memory test II</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			body {
 
 				background-color: #fff;
 
+				color: #000;
 
+			}
 
+			a {
 
+				color: #08f;
 
 			}
 
 		</style>
 
 	</head>
 
 
 	<body>
 
+		<div id="info">
 
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - memory test II
 
+		</div>
 
+
 
 		<script type="x-shader/x-fragment" id="fragmentShader">
 
 
 			void main() {
 
@@ -40,9 +48,16 @@
 
 
 		</script>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				Color,
 
+				Mesh,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				ShaderMaterial,
 
+				SphereBufferGeometry,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
 			var N = 100;
 
 
@@ -65,19 +80,19 @@
 
 				vertexShader = document.getElementById( "vertexShader" ).textContent;
 
 				fragmentShader = document.getElementById( "fragmentShader" ).textContent;
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.z = 2000;
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xffffff );
 
 
-				geometry = new THREE.SphereBufferGeometry( 15, 64, 32 );
 
+				geometry = new SphereBufferGeometry( 15, 64, 32 );
 
 
 				for ( var i = 0; i < N; i ++ ) {
 
 
-					var material = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: generateFragmentShader() } );
 
+					var material = new ShaderMaterial( { vertexShader: vertexShader, fragmentShader: generateFragmentShader() } );
 
 
-					var mesh = new THREE.Mesh( geometry, material );
 
+					var mesh = new Mesh( geometry, material );
 
 
 					mesh.position.x = ( 0.5 - Math.random() ) * 1000;
 
 					mesh.position.y = ( 0.5 - Math.random() ) * 1000;
 
@@ -89,7 +104,7 @@
 
 
 				}
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
@@ -109,7 +124,7 @@
 
 				for ( var i = 0; i < N; i ++ ) {
 
 
 					var mesh = meshes[ i ];
 
-					mesh.material = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: generateFragmentShader() } );
 
+					mesh.material = new ShaderMaterial( { vertexShader: vertexShader, fragmentShader: generateFragmentShader() } );
 
 
 				}

+ 308 - 289
examples/webgl_tiled_forward.html
파일 보기 

@@ -11,371 +11,390 @@
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">threejs</a> - Tiled forward lighting<br/>
 
 			Created by <a href="https://github.com/wizgrav" target="_blank" rel="noopener">wizgrav</a>.
 
 		</div>
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/loaders/OBJLoader.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
 
-		<script src="js/postprocessing/RenderPass.js"></script>
 
-		<script src="js/postprocessing/MaskPass.js"></script>
 
-		<script src="js/postprocessing/ShaderPass.js"></script>
 
-		<script src="js/shaders/CopyShader.js"></script>
 
-		<script src="js/shaders/ConvolutionShader.js"></script>
 
-		<script src="js/shaders/LuminosityHighPassShader.js"></script>
 
-		<script src="js/postprocessing/UnrealBloomPass.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-		// Simple form of tiled forward lighting
 
-		// using texels as bitmasks of 32 lights
 
-
 
-		var RADIUS = 75;
 
-
 
-		THREE.ShaderChunk[ 'lights_pars_begin' ] += [
 
-			'',
 
-			'#if defined TILED_FORWARD',
 
-			'uniform vec4 tileData;',
 
-			'uniform sampler2D tileTexture;',
 
-			'uniform sampler2D lightTexture;',
 
-			'#endif'
 
-		].join( '\n' );
 
-
 
-		THREE.ShaderChunk[ 'lights_fragment_end' ] += [
 
-			'',
 
-			'#if defined TILED_FORWARD',
 
-			'vec2 tUv = floor(gl_FragCoord.xy / tileData.xy * 32.) / 32. + tileData.zw;',
 
-			'vec4 tile = texture2D(tileTexture, tUv);',
 
-			'for (int i=0; i < 4; i++) {',
 
-			'	float tileVal = tile.x * 255.;',
 
-			'  	tile.xyzw = tile.yzwx;',
 
-			'	if(tileVal == 0.){ continue; }',
 
-			'  	float tileDiv = 128.;',
 
-			'	for (int j=0; j < 8; j++) {',
 
-			'  		if (tileVal < tileDiv) {  tileDiv *= 0.5; continue; }',
 
-			'		tileVal -= tileDiv;',
 
-			'		tileDiv *= 0.5;',
 
-			'  		PointLight pointlight;',
 
-			'		float uvx = (float(8 * i + j) + 0.5) / 32.;',
 
-			'  		vec4 lightData = texture2D(lightTexture, vec2(uvx, 0.));',
 
-			'  		vec4 lightColor = texture2D(lightTexture, vec2(uvx, 1.));',
 
-			'  		pointlight.position = lightData.xyz;',
 
-			'  		pointlight.distance = lightData.w;',
 
-			'  		pointlight.color = lightColor.rgb;',
 
-			'  		pointlight.decay = lightColor.a;',
 
-			'  		getPointDirectLightIrradiance( pointlight, geometry, directLight );',
 
-			'		RE_Direct( directLight, geometry, material, reflectedLight );',
 
-			'	}',
 
-			'}',
 
-			'#endif'
 
-		].join( '\n' );
 
-
 
-		var lights = [];
 
-
 
-		var State = {
 
-			rows: 0,
 
-			cols: 0,
 
-			width: 0,
 
-			height: 0,
 
-			tileData: { value: null },
 
-			tileTexture: { value: null },
 
-			lightTexture: {
 
-				value: new THREE.DataTexture( new Float32Array( 32 * 2 * 4 ), 32, 2, THREE.RGBAFormat, THREE.FloatType )
 
-			},
 
-		};
 
-
 
-		function resizeTiles() {
 
-
 
-			var width = window.innerWidth;
 
-			var height = window.innerHeight;
 
-
 
-			State.width = width;
 
-			State.height = height;
 
-			State.cols = Math.ceil( width / 32 );
 
-			State.rows = Math.ceil( height / 32 );
 
-			State.tileData.value = [ width, height, 0.5 / Math.ceil( width / 32 ), 0.5 / Math.ceil( height / 32 ) ];
 
-			State.tileTexture.value = new THREE.DataTexture( new Uint8Array( State.cols * State.rows * 4 ), State.cols, State.rows );
 
-
 
-		}
 
-
 
-		// Generate the light bitmasks and store them in the tile texture
 
-		function tileLights( renderer, scene, camera ) {
 
-
 
-			if ( ! camera.projectionMatrix ) return;
 
-
 
-			var d = State.tileTexture.value.image.data;
 
-			var ld = State.lightTexture.value.image.data;
 
-
 
-			var viewMatrix = camera.matrixWorldInverse;
 
-
 
-			d.fill( 0 );
 
-
 
-			var vector = new THREE.Vector3();
 
-
 
-			lights.forEach( function ( light, index ) {
 
-
 
-				vector.setFromMatrixPosition( light.matrixWorld );
 
-
 
-				var bs = lightBounds( camera, vector, light._light.radius );
 
-
 
-				vector.applyMatrix4( viewMatrix );
 
-				vector.toArray( ld, 4 * index );
 
-				ld[ 4 * index + 3 ] = light._light.radius;
 
-				light._light.color.toArray( ld, 32 * 4 + 4 * index );
 
-				ld[ 32 * 4 + 4 * index + 3 ] = light._light.decay;
 
-
 
-				if ( bs[ 1 ] < 0 || bs[ 0 ] > State.width || bs[ 3 ] < 0 || bs[ 2 ] > State.height ) return;
 
-				if ( bs[ 0 ] < 0 ) bs[ 0 ] = 0;
 
-				if ( bs[ 1 ] > State.width ) bs[ 1 ] = State.width;
 
-				if ( bs[ 2 ] < 0 ) bs[ 2 ] = 0;
 
-				if ( bs[ 3 ] > State.height ) bs[ 3 ] = State.height;
 
-
 
-				var i4 = Math.floor( index / 8 ), i8 = 7 - ( index % 8 );
 
-
 
-				for ( var i = Math.floor( bs[ 2 ] / 32 ); i <= Math.ceil( bs[ 3 ] / 32 ); i ++ ) {
 
-
 
-					for ( var j = Math.floor( bs[ 0 ] / 32 ); j <= Math.ceil( bs[ 1 ] / 32 ); j ++ ) {
 
-
 
-						d[ ( State.cols * i + j ) * 4 + i4 ] |= 1 << i8;
 
+
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				Color,
 
+				DataTexture,
 
+				DoubleSide,
 
+				FloatType,
 
+				FrontSide,
 
+				LinearToneMapping,
 
+				Group,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				RGBAFormat,
 
+				Scene,
 
+				ShaderChunk,
 
+				ShaderLib,
 
+				ShaderMaterial,
 
+				SphereBufferGeometry,
 
+				Vector2,
 
+				Vector3,
 
+				UniformsUtils,
 
+				WebGLRenderer,
 
+				WebGLRenderTarget
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
+
 
+			import { UnrealBloomPass } from './jsm/postprocessing/UnrealBloomPass.js';
 
+
 
+			// Simple form of tiled forward lighting
 
+			// using texels as bitmasks of 32 lights
 
+
 
+			var RADIUS = 75;
 
+
 
+			ShaderChunk[ 'lights_pars_begin' ] += [
 
+				'',
 
+				'#if defined TILED_FORWARD',
 
+				'uniform vec4 tileData;',
 
+				'uniform sampler2D tileTexture;',
 
+				'uniform sampler2D lightTexture;',
 
+				'#endif'
 
+			].join( '\n' );
 
+
 
+			ShaderChunk[ 'lights_fragment_end' ] += [
 
+				'',
 
+				'#if defined TILED_FORWARD',
 
+				'vec2 tUv = floor(gl_FragCoord.xy / tileData.xy * 32.) / 32. + tileData.zw;',
 
+				'vec4 tile = texture2D(tileTexture, tUv);',
 
+				'for (int i=0; i < 4; i++) {',
 
+				'	float tileVal = tile.x * 255.;',
 
+				'  	tile.xyzw = tile.yzwx;',
 
+				'	if(tileVal == 0.){ continue; }',
 
+				'  	float tileDiv = 128.;',
 
+				'	for (int j=0; j < 8; j++) {',
 
+				'  		if (tileVal < tileDiv) {  tileDiv *= 0.5; continue; }',
 
+				'		tileVal -= tileDiv;',
 
+				'		tileDiv *= 0.5;',
 
+				'  		PointLight pointlight;',
 
+				'		float uvx = (float(8 * i + j) + 0.5) / 32.;',
 
+				'  		vec4 lightData = texture2D(lightTexture, vec2(uvx, 0.));',
 
+				'  		vec4 lightColor = texture2D(lightTexture, vec2(uvx, 1.));',
 
+				'  		pointlight.position = lightData.xyz;',
 
+				'  		pointlight.distance = lightData.w;',
 
+				'  		pointlight.color = lightColor.rgb;',
 
+				'  		pointlight.decay = lightColor.a;',
 
+				'  		getPointDirectLightIrradiance( pointlight, geometry, directLight );',
 
+				'		RE_Direct( directLight, geometry, material, reflectedLight );',
 
+				'	}',
 
+				'}',
 
+				'#endif'
 
+			].join( '\n' );
 
+
 
+			var lights = [];
 
+
 
+			var State = {
 
+				rows: 0,
 
+				cols: 0,
 
+				width: 0,
 
+				height: 0,
 
+				tileData: { value: null },
 
+				tileTexture: { value: null },
 
+				lightTexture: {
 
+					value: new DataTexture( new Float32Array( 32 * 2 * 4 ), 32, 2, RGBAFormat, FloatType )
 
+				},
 
+			};
 
+
 
+			function resizeTiles() {
 
+
 
+				var width = window.innerWidth;
 
+				var height = window.innerHeight;
 
+
 
+				State.width = width;
 
+				State.height = height;
 
+				State.cols = Math.ceil( width / 32 );
 
+				State.rows = Math.ceil( height / 32 );
 
+				State.tileData.value = [ width, height, 0.5 / Math.ceil( width / 32 ), 0.5 / Math.ceil( height / 32 ) ];
 
+				State.tileTexture.value = new DataTexture( new Uint8Array( State.cols * State.rows * 4 ), State.cols, State.rows );
 
+
 
+			}
 
+
 
+			// Generate the light bitmasks and store them in the tile texture
 
+			function tileLights( renderer, scene, camera ) {
 
+
 
+				if ( ! camera.projectionMatrix ) return;
 
+
 
+				var d = State.tileTexture.value.image.data;
 
+				var ld = State.lightTexture.value.image.data;
 
+
 
+				var viewMatrix = camera.matrixWorldInverse;
 
+
 
+				d.fill( 0 );
 
+
 
+				var vector = new Vector3();
 
+
 
+				lights.forEach( function ( light, index ) {
 
+
 
+					vector.setFromMatrixPosition( light.matrixWorld );
 
+
 
+					var bs = lightBounds( camera, vector, light._light.radius );
 
+
 
+					vector.applyMatrix4( viewMatrix );
 
+					vector.toArray( ld, 4 * index );
 
+					ld[ 4 * index + 3 ] = light._light.radius;
 
+					light._light.color.toArray( ld, 32 * 4 + 4 * index );
 
+					ld[ 32 * 4 + 4 * index + 3 ] = light._light.decay;
 
+
 
+					if ( bs[ 1 ] < 0 || bs[ 0 ] > State.width || bs[ 3 ] < 0 || bs[ 2 ] > State.height ) return;
 
+					if ( bs[ 0 ] < 0 ) bs[ 0 ] = 0;
 
+					if ( bs[ 1 ] > State.width ) bs[ 1 ] = State.width;
 
+					if ( bs[ 2 ] < 0 ) bs[ 2 ] = 0;
 
+					if ( bs[ 3 ] > State.height ) bs[ 3 ] = State.height;
 
+
 
+					var i4 = Math.floor( index / 8 ), i8 = 7 - ( index % 8 );
 
+
 
+					for ( var i = Math.floor( bs[ 2 ] / 32 ); i <= Math.ceil( bs[ 3 ] / 32 ); i ++ ) {
 
+
 
+						for ( var j = Math.floor( bs[ 0 ] / 32 ); j <= Math.ceil( bs[ 1 ] / 32 ); j ++ ) {
 
+
 
+							d[ ( State.cols * i + j ) * 4 + i4 ] |= 1 << i8;
 
+
 
+						}
 
 
 					}
 
 
-				}
 
+				} );
 
 
-			} );
 
+				State.tileTexture.value.needsUpdate = true;
 
+				State.lightTexture.value.needsUpdate = true;
 
 
-			State.tileTexture.value.needsUpdate = true;
 
-			State.lightTexture.value.needsUpdate = true;
 
+			}
 
 
-		}
 
+			// Screen rectangle bounds from light sphere's world AABB
 
+			var lightBounds = function () {
 
 
-		// Screen rectangle bounds from light sphere's world AABB
 
-		var lightBounds = function () {
 
+				var v = new Vector3();
 
+				return function ( camera, pos, r ) {
 
 
-			var v = new THREE.Vector3();
 
-			return function ( camera, pos, r ) {
 
+					var minX = State.width, maxX = 0, minY = State.height, maxY = 0, hw = State.width / 2, hh = State.height / 2;
 
 
-				var minX = State.width, maxX = 0, minY = State.height, maxY = 0, hw = State.width / 2, hh = State.height / 2;
 
+					for ( var i = 0; i < 8; i ++ ) {
 
 
-				for ( var i = 0; i < 8; i ++ ) {
 
+						v.copy( pos );
 
+						v.x += i & 1 ? r : - r;
 
+						v.y += i & 2 ? r : - r;
 
+						v.z += i & 4 ? r : - r;
 
+						var vector = v.project( camera );
 
+						var x = ( vector.x * hw ) + hw;
 
+						var y = ( vector.y * hh ) + hh;
 
+						minX = Math.min( minX, x );
 
+						maxX = Math.max( maxX, x );
 
+						minY = Math.min( minY, y );
 
+						maxY = Math.max( maxY, y );
 
 
-					v.copy( pos );
 
-					v.x += i & 1 ? r : - r;
 
-					v.y += i & 2 ? r : - r;
 
-					v.z += i & 4 ? r : - r;
 
-					var vector = v.project( camera );
 
-					var x = ( vector.x * hw ) + hw;
 
-					var y = ( vector.y * hh ) + hh;
 
-					minX = Math.min( minX, x );
 
-					maxX = Math.max( maxX, x );
 
-					minY = Math.min( minY, y );
 
-					maxY = Math.max( maxY, y );
 
+					}
 
 
-				}
 
+					return [ minX, maxX, minY, maxY ];
 
 
-				return [ minX, maxX, minY, maxY ];
 
+				};
 
 
-			};
 
+			}();
 
 
-		}();
 
 
+			// Rendering
 
 
-		// Rendering
 
+			var container = document.createElement( 'div' );
 
+			document.body.appendChild( container );
 
+			var camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
+			camera.position.set( 0.0, 0.0, 240.0 );
 
+			var scene = new Scene();
 
+			scene.background = new Color( 0x111111 );
 
 
-		var container = document.createElement( 'div' );
 
-		document.body.appendChild( container );
 
-		var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
-		camera.position.set( 0.0, 0.0, 240.0 );
 
-		var scene = new THREE.Scene();
 
-		scene.background = new THREE.Color( 0x111111 );
 
+			var renderer = new WebGLRenderer();
 
+			renderer.toneMapping = LinearToneMapping;
 
+			container.appendChild( renderer.domElement );
 
 
-		var renderer = new THREE.WebGLRenderer();
 
-		renderer.toneMapping = THREE.LinearToneMapping;
 
-		container.appendChild( renderer.domElement );
 
+			var renderTarget = new WebGLRenderTarget();
 
 
-		var renderTarget = new THREE.WebGLRenderTarget();
 
+			scene.add( new AmbientLight( 0xffffff, 0.33 ) );
 
+			// At least one regular Pointlight is needed to activate light support
 
+			scene.add( new PointLight( 0xff0000, 0.1, 0.1 ) );
 
 
-		scene.add( new THREE.AmbientLight( 0xffffff, 0.33 ) );
 
-		// At least one regular Pointlight is needed to activate light support
 
-		scene.add( new THREE.PointLight( 0xff0000, 0.1, 0.1 ) );
 
+			var bloom = new UnrealBloomPass( new Vector2(), 0.8, 0.6, 0.8 );
 
+			bloom.renderToScreen = true;
 
 
-		var bloom = new THREE.UnrealBloomPass( new THREE.Vector2(), 0.8, 0.6, 0.8 );
 
-		bloom.renderToScreen = true;
 
+			var stats = new Stats();
 
+			container.appendChild( stats.dom );
 
 
-		var stats = new Stats();
 
-		container.appendChild( stats.dom );
 
+			var controls = new OrbitControls( camera, renderer.domElement );
 
+			controls.minDistance = 120;
 
+			controls.maxDistance = 320;
 
 
-		var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
-		controls.minDistance = 120;
 
-		controls.maxDistance = 320;
 
+			var materials = [];
 
 
-		var materials = [];
 
+			var Heads = [
 
+				{ type: 'physical', uniforms: { "diffuse": 0x888888, "metalness": 1.0, "roughness": 0.66 }, defines: {} },
 
+				{ type: 'standard', uniforms: { "diffuse": 0x666666, "metalness": 0.1, "roughness": 0.33 }, defines: {} },
 
+				{ type: 'phong', uniforms: { "diffuse": 0x777777, "shininess": 20 }, defines: {} },
 
+				{ type: 'phong', uniforms: { "diffuse": 0x555555, "shininess": 10 }, defines: { TOON: 1 } }
 
+			];
 
 
-		var Heads = [
 
-			{ type: 'physical', uniforms: { "diffuse": 0x888888, "metalness": 1.0, "roughness": 0.66 }, defines: {} },
 
-			{ type: 'standard', uniforms: { "diffuse": 0x666666, "metalness": 0.1, "roughness": 0.33 }, defines: {} },
 
-			{ type: 'phong', uniforms: { "diffuse": 0x777777, "shininess": 20 }, defines: {} },
 
-			{ type: 'phong', uniforms: { "diffuse": 0x555555, "shininess": 10 }, defines: { TOON: 1 } }
 
-		];
 
+			function init( geom ) {
 
 
-		function init( geom ) {
 
+				var sphereGeom = new SphereBufferGeometry( 0.5, 32, 32 );
 
+				var tIndex = Math.round( Math.random() * 3 );
 
 
-			var sphereGeom = new THREE.SphereBufferGeometry( 0.5, 32, 32 );
 
-			var tIndex = Math.round( Math.random() * 3 );
 
+				Object.keys( Heads ).forEach( function ( t, index ) {
 
 
-			Object.keys( Heads ).forEach( function ( t, index ) {
 
+					var g = new Group();
 
+					var conf = Heads[ t ];
 
+					var ml = ShaderLib[ conf.type ];
 
+					var mtl = new ShaderMaterial( {
 
+						lights: true,
 
+						fragmentShader: ml.fragmentShader,
 
+						vertexShader: ml.vertexShader,
 
+						uniforms: UniformsUtils.clone( ml.uniforms ),
 
+						defines: conf.defines,
 
+						transparent: tIndex === index ? true : false,
 
+					} );
 
 
-				var g = new THREE.Group();
 
-				var conf = Heads[ t ];
 
-				var ml = THREE.ShaderLib[ conf.type ];
 
-				var mtl = new THREE.ShaderMaterial( {
 
-					lights: true,
 
-					fragmentShader: ml.fragmentShader,
 
-					vertexShader: ml.vertexShader,
 
-					uniforms: THREE.UniformsUtils.clone( ml.uniforms ),
 
-					defines: conf.defines,
 
-					transparent: tIndex === index ? true : false,
 
-				} );
 
+					mtl.uniforms[ "opacity" ].value = tIndex === index ? 0.9 : 1;
 
+					mtl.uniforms[ "tileData" ] = State.tileData;
 
+					mtl.uniforms[ "tileTexture" ] = State.tileTexture;
 
+					mtl.uniforms[ "lightTexture" ] = State.lightTexture;
 
 
-				mtl.uniforms[ "opacity" ].value = tIndex === index ? 0.9 : 1;
 
-				mtl.uniforms[ "tileData" ] = State.tileData;
 
-				mtl.uniforms[ "tileTexture" ] = State.tileTexture;
 
-				mtl.uniforms[ "lightTexture" ] = State.lightTexture;
 
+					for ( var u in conf.uniforms ) {
 
 
-				for ( var u in conf.uniforms ) {
 
+						var vu = conf.uniforms[ u ];
 
 
-					var vu = conf.uniforms[ u ];
 
+						if ( mtl.uniforms[ u ].value.set ) {
 
 
-					if ( mtl.uniforms[ u ].value.set ) {
 
+							mtl.uniforms[ u ].value.set( vu );
 
 
-						mtl.uniforms[ u ].value.set( vu );
 
+						} else {
 
 
-					} else {
 
+							mtl.uniforms[ u ].value = vu;
 
 
-						mtl.uniforms[ u ].value = vu;
 
+						}
 
 
 					}
 
 
-				}
 
-
 
-				mtl.defines[ 'TILED_FORWARD' ] = 1;
 
-				materials.push( mtl );
 
+					mtl.defines[ 'TILED_FORWARD' ] = 1;
 
+					materials.push( mtl );
 
 
-				var obj = new THREE.Mesh( geom, mtl );
 
-				obj.position.y = - 37;
 
-				mtl.side = tIndex === index ? THREE.FrontSide : THREE.DoubleSide;
 
+					var obj = new Mesh( geom, mtl );
 
+					obj.position.y = - 37;
 
+					mtl.side = tIndex === index ? FrontSide : DoubleSide;
 
 
-				g.rotation.y = index * Math.PI / 2;
 
-				g.position.x = Math.sin( index * Math.PI / 2 ) * RADIUS;
 
-				g.position.z = Math.cos( index * Math.PI / 2 ) * RADIUS;
 
-				g.add( obj );
 
+					g.rotation.y = index * Math.PI / 2;
 
+					g.position.x = Math.sin( index * Math.PI / 2 ) * RADIUS;
 
+					g.position.z = Math.cos( index * Math.PI / 2 ) * RADIUS;
 
+					g.add( obj );
 
 
-				for ( var i = 0; i < 8; i ++ ) {
 
+					for ( var i = 0; i < 8; i ++ ) {
 
 
-					var color = new THREE.Color().setHSL( Math.random(), 1.0, 0.5 );
 
-					var l = new THREE.Group();
 
+						var color = new Color().setHSL( Math.random(), 1.0, 0.5 );
 
+						var l = new Group();
 
 
-					l.add( new THREE.Mesh(
 
-						sphereGeom,
 
-						new THREE.MeshBasicMaterial( {
 
-							color: color
 
-						} )
 
-					) );
 
+						l.add( new Mesh(
 
+							sphereGeom,
 
+							new MeshBasicMaterial( {
 
+								color: color
 
+							} )
 
+						) );
 
 
-					l.add( new THREE.Mesh(
 
-						sphereGeom,
 
-						new THREE.MeshBasicMaterial( {
 
-							color: color,
 
-							transparent: true,
 
-							opacity: 0.033
 
-						} )
 
-					) );
 
+						l.add( new Mesh(
 
+							sphereGeom,
 
+							new MeshBasicMaterial( {
 
+								color: color,
 
+								transparent: true,
 
+								opacity: 0.033
 
+							} )
 
+						) );
 
 
-					l.children[ 1 ].scale.set( 6.66, 6.66, 6.66 );
 
+						l.children[ 1 ].scale.set( 6.66, 6.66, 6.66 );
 
 
-					l._light = {
 
-						color: color,
 
-						radius: RADIUS,
 
-						decay: 1,
 
-						sy: Math.random(),
 
-						sr: Math.random(),
 
-						sc: Math.random(),
 
-						py: Math.random() * Math.PI,
 
-						pr: Math.random() * Math.PI,
 
-						pc: Math.random() * Math.PI,
 
-						dir: Math.random() > 0.5 ? 1 : - 1
 
-					};
 
+						l._light = {
 
+							color: color,
 
+							radius: RADIUS,
 
+							decay: 1,
 
+							sy: Math.random(),
 
+							sr: Math.random(),
 
+							sc: Math.random(),
 
+							py: Math.random() * Math.PI,
 
+							pr: Math.random() * Math.PI,
 
+							pc: Math.random() * Math.PI,
 
+							dir: Math.random() > 0.5 ? 1 : - 1
 
+						};
 
+
 
+						lights.push( l );
 
+						g.add( l );
 
 
-					lights.push( l );
 
-					g.add( l );
 
+					}
 
 
-				}
 
+					scene.add( g );
 
 
-				scene.add( g );
 
+				} );
 
 
-			} );
 
+			}
 
 
-		}
 
+			function update( now ) {
 
 
-		function update( now ) {
 
+				lights.forEach( function ( l ) {
 
 
-			lights.forEach( function ( l ) {
 
+					var ld = l._light;
 
+					var radius = 0.8 + 0.2 * Math.sin( ld.pr + ( 0.6 + 0.3 * ld.sr ) * now );
 
+					l.position.x = ( Math.sin( ld.pc + ( 0.8 + 0.2 * ld.sc ) * now * ld.dir ) ) * radius * RADIUS;
 
+					l.position.z = ( Math.cos( ld.pc + ( 0.8 + 0.2 * ld.sc ) * now * ld.dir ) ) * radius * RADIUS;
 
+					l.position.y = Math.sin( ld.py + ( 0.8 + 0.2 * ld.sy ) * now ) * radius * 32;
 
 
-				var ld = l._light;
 
-				var radius = 0.8 + 0.2 * Math.sin( ld.pr + ( 0.6 + 0.3 * ld.sr ) * now );
 
-				l.position.x = ( Math.sin( ld.pc + ( 0.8 + 0.2 * ld.sc ) * now * ld.dir ) ) * radius * RADIUS;
 
-				l.position.z = ( Math.cos( ld.pc + ( 0.8 + 0.2 * ld.sc ) * now * ld.dir ) ) * radius * RADIUS;
 
-				l.position.y = Math.sin( ld.py + ( 0.8 + 0.2 * ld.sy ) * now ) * radius * 32;
 
+				} );
 
 
-			} );
 
+			}
 
 
-		}
 
+			function resize() {
 
 
-		function resize() {
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderTarget.setSize( window.innerWidth, window.innerHeight );
 
+				bloom.setSize( window.innerWidth, window.innerHeight );
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+				resizeTiles();
 
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
-			renderTarget.setSize( window.innerWidth, window.innerHeight );
 
-			bloom.setSize( window.innerWidth, window.innerHeight );
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
-			resizeTiles();
 
+			}
 
 
-		}
 
+			function postEffect( renderer ) {
 
 
-		function postEffect( renderer ) {
 
+				bloom.render( renderer, null, renderTarget );
 
 
-			bloom.render( renderer, null, renderTarget );
 
+			}
 
 
-		}
 
+			scene.onBeforeRender = tileLights;
 
 
-		scene.onBeforeRender = tileLights;
 
+			scene.onAfterRender = postEffect;
 
 
-		scene.onAfterRender = postEffect;
 
+			var loader = new OBJLoader();
 
 
-		var loader = new THREE.OBJLoader();
 
+			loader.load( 'models/obj/walt/WaltHead.obj', function ( object ) {
 
 
-		loader.load( 'models/obj/walt/WaltHead.obj', function ( object ) {
 
+				var geometry = object.children[ 0 ].geometry;
 
 
-			var geometry = object.children[ 0 ].geometry;
 
+				window.addEventListener( 'resize', resize );
 
 
-			window.addEventListener( 'resize', resize );
 
+				init( geometry );
 
+				resize();
 
 
-			init( geometry );
 
-			resize();
 
+				renderer.setAnimationLoop( function ( time ) {
 
 
-			renderer.setAnimationLoop( function ( time ) {
 
+					update( time / 1000 );
 
+					stats.begin();
 
+					renderer.setRenderTarget( renderTarget );
 
+					renderer.render( scene, camera );
 
+					stats.end();
 
 
-				update( time / 1000 );
 
-				stats.begin();
 
-				renderer.setRenderTarget( renderTarget );
 
-				renderer.render( scene, camera );
 
-				stats.end();
 
+				} );
 
 
 			} );
 
 
-		} );
 
-
 
 		</script>
 
 	</body>
 
 </html>

+ 81 - 70
examples/webgl_tonemapping.html
파일 보기 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<title>threejs webgl - inline tone mapping</title>
 
+		<title>three.js webgl - inline tone mapping</title>
 
 		<meta charset="utf-8">
 
 		<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">
 
@@ -11,31 +11,42 @@
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">threejs</a> - Inline Tone Mapping (within a Material's fragment shader) without<br/>using a pre-processing step or float/half buffers by <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-		<script src="js/loaders/RGBELoader.js"></script>
 
-		<script src="js/loaders/HDRCubeTextureLoader.js"></script>
 
-		<script src="js/pmrem/PMREMGenerator.js"></script>
 
-		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
 
-
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
 
-		<script src="js/postprocessing/RenderPass.js"></script>
 
-		<script src="js/postprocessing/MaskPass.js"></script>
 
-		<script src="js/postprocessing/ShaderPass.js"></script>
 
-		<script src="js/shaders/CopyShader.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				ACESFilmicToneMapping,
 
+				BackSide,
 
+				BoxBufferGeometry,
 
+				CineonToneMapping,
 
+				HemisphereLight,
 
+				LinearToneMapping,
 
+				Mesh,
 
+				MeshStandardMaterial,
 
+				NoToneMapping,
 
+				PerspectiveCamera,
 
+				ReinhardToneMapping,
 
+				RepeatWrapping,
 
+				Scene,
 
+				sRGBEncoding,
 
+				SpotLight,
 
+				TextureLoader,
 
+				TorusKnotBufferGeometry,
 
+				Uncharted2ToneMapping,
 
+				UnsignedByteType,
 
+				WebGLRenderer
 
+			} 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 { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
 
+			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
 
+			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
 
+
 
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
 
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
 
 
 			var container, stats;
 
 			var params = {
 
@@ -49,15 +60,15 @@
 
 			};
 
 
 			var toneMappingOptions = {
 
-				None: THREE.NoToneMapping,
 
-				Linear: THREE.LinearToneMapping,
 
-				Reinhard: THREE.ReinhardToneMapping,
 
-				Uncharted2: THREE.Uncharted2ToneMapping,
 
-				Cineon: THREE.CineonToneMapping,
 
-				ACESFilmic: THREE.ACESFilmicToneMapping
 
+				None: NoToneMapping,
 
+				Linear: LinearToneMapping,
 
+				Reinhard: ReinhardToneMapping,
 
+				Uncharted2: Uncharted2ToneMapping,
 
+				Cineon: CineonToneMapping,
 
+				ACESFilmic: ACESFilmicToneMapping
 
 			};
 
 
-			var camera, scene, renderer, group;
 
+			var camera, scene, renderer, mesh;
 
 			var composer;
 
 			var standardMaterial, floorMaterial;
 
 
@@ -69,14 +80,14 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
 				camera.position.set( 0.0, 40, 40 * 3.5 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 
-				standardMaterial = new THREE.MeshStandardMaterial( {
 
+				standardMaterial = new MeshStandardMaterial( {
 
 					bumpScale: - 0.05,
 
 					color: 0xffffff,
 
 					metalness: 0.9,
 
@@ -85,12 +96,12 @@
 
 					transparent: true
 
 				} );
 
 
-				var textureLoader = new THREE.TextureLoader();
 
+				var textureLoader = new TextureLoader();
 
 				textureLoader.load( "textures/brick_diffuse.jpg", function ( map ) {
 
 
-					map.wrapS = THREE.RepeatWrapping;
 
-					map.wrapT = THREE.RepeatWrapping;
 
-					map.encoding = THREE.sRGBEncoding;
 
+					map.wrapS = RepeatWrapping;
 
+					map.wrapT = RepeatWrapping;
 
+					map.encoding = sRGBEncoding;
 
 					map.anisotropy = 4;
 
 					map.repeat.set( 9, 0.5 );
 
 					standardMaterial.map = map;
 
@@ -100,8 +111,8 @@
 
 
 				textureLoader.load( "textures/brick_bump.jpg", function ( map ) {
 
 
-					map.wrapS = THREE.RepeatWrapping;
 
-					map.wrapT = THREE.RepeatWrapping;
 
+					map.wrapS = RepeatWrapping;
 
+					map.wrapT = RepeatWrapping;
 
 					map.anisotropy = 4;
 
 					map.repeat.set( 9, 0.5 );
 
 					standardMaterial.bumpMap = map;
 
@@ -111,8 +122,8 @@
 
 
 				textureLoader.load( "textures/brick_roughness.jpg", function ( map ) {
 
 
-					map.wrapS = THREE.RepeatWrapping;
 
-					map.wrapT = THREE.RepeatWrapping;
 
+					map.wrapS = RepeatWrapping;
 
+					map.wrapT = RepeatWrapping;
 
 					map.anisotropy = 4;
 
 					map.repeat.set( 9, 0.5 );
 
 					standardMaterial.roughnessMap = map;
 
@@ -120,23 +131,23 @@
 
 
 				} );
 
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
 
-				mesh = new THREE.Mesh( geometry, standardMaterial );
 
+				var geometry = new TorusKnotBufferGeometry( 18, 8, 150, 20 );
 
+				mesh = new Mesh( geometry, standardMaterial );
 
 				mesh.castShadow = true;
 
 				mesh.receiveShadow = true;
 
 				scene.add( mesh );
 
 
-				floorMaterial = new THREE.MeshStandardMaterial( {
 
+				floorMaterial = new MeshStandardMaterial( {
 
 					map: null,
 
 					roughnessMap: null,
 
 					color: 0x888888,
 
 					metalness: 0.0,
 
 					roughness: 1.0,
 
-					side: THREE.BackSide
 
+					side: BackSide
 
 				} );
 
 
-				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
 
-				var floor = new THREE.Mesh( geometry, floorMaterial );
 
+				var geometry = new BoxBufferGeometry( 200, 200, 200 );
 
+				var floor = new Mesh( geometry, floorMaterial );
 
 				floor.position.y = 50;
 
 				floor.rotation.x = - Math.PI * 0.5;
 
 				floor.receiveShadow = true;
 
@@ -151,30 +162,30 @@
 
 					hdrpath + 'pz' + hdrformat, hdrpath + 'nz' + hdrformat
 
 				];
 
 
-				new THREE.HDRCubeTextureLoader()
 
-					.setType( THREE.UnsignedByteType )
 
+				new HDRCubeTextureLoader()
 
+					.setType( UnsignedByteType )
 
 					.load( hdrUrls, function ( hdrCubeMap ) {
 
 
-					var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
 
-					pmremGenerator.update( renderer );
 
+						var pmremGenerator = new PMREMGenerator( hdrCubeMap );
 
+						pmremGenerator.update( renderer );
 
 
-					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
 
-					pmremCubeUVPacker.update( renderer );
 
+						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
 
+						pmremCubeUVPacker.update( renderer );
 
 
-					standardMaterial.envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
 
-					standardMaterial.needsUpdate = true;
 
+						standardMaterial.envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
 
+						standardMaterial.needsUpdate = true;
 
 
-					hdrCubeMap.dispose();
 
-					pmremGenerator.dispose();
 
-					pmremCubeUVPacker.dispose();
 
+						hdrCubeMap.dispose();
 
+						pmremGenerator.dispose();
 
+						pmremCubeUVPacker.dispose();
 
 
-				} );
 
+					} );
 
 
 				// Lights
 
 
-				scene.add( new THREE.HemisphereLight( 0x111111, 0x000000 ) );
 
+				scene.add( new HemisphereLight( 0x111111, 0x000000 ) );
 
 
-				var spotLight = new THREE.SpotLight( 0xffffff );
 
+				var spotLight = new SpotLight( 0xffffff );
 
 				spotLight.position.set( 50, 100, 50 );
 
 				spotLight.angle = Math.PI / 7;
 
 				spotLight.decay = 2;
 
@@ -190,23 +201,23 @@
 
 
 				renderer.gammaOutput = true;
 
 
-				composer = new THREE.EffectComposer( renderer );
 
+				composer = new EffectComposer( renderer );
 
 				composer.setSize( window.innerWidth, window.innerHeight );
 
 
-				var renderScene = new THREE.RenderPass( scene, camera );
 
+				var renderScene = new RenderPass( scene, camera );
 
 				composer.addPass( renderScene );
 
 
-				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
 
+				var copyPass = new ShaderPass( CopyShader );
 
 				composer.addPass( copyPass );
 
 
 				stats = new Stats();
 
 				container.appendChild( stats.dom );
 
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 
-				var gui = new dat.GUI();
 
+				var gui = new GUI();
 
 
 				gui.add( params, 'toneMapping', Object.keys( toneMappingOptions ) );
 
 				gui.add( params, 'exposure', 0, 10 );

+ 23 - 15
examples/webgl_trails.html
파일 보기 

@@ -7,12 +7,20 @@
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BufferGeometry,
 
+				Color,
 
+				Float32BufferAttribute,
 
+				PerspectiveCamera,
 
+				Points,
 
+				PointsMaterial,
 
+				Scene,
 
+				VertexColors,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
 			var container, stats;
 
 
@@ -26,12 +34,12 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10 );
 
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10 );
 
 				camera.position.set( 0, 0, 1 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				var colorArray = [ new THREE.Color( 0xff0080 ), new THREE.Color( 0xffffff ), new THREE.Color( 0x8000ff ) ];
 
+				var colorArray = [ new Color( 0xff0080 ), new Color( 0xffffff ), new Color( 0x8000ff ) ];
 
 				var positions = [];
 
 				var colors = [];
 
 
@@ -45,16 +53,16 @@
 
 
 				}
 
 
-				var geometry = new THREE.BufferGeometry();
 
-				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
 
-				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
+				var geometry = new BufferGeometry();
 
+				geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
 
+				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
 
-				var material = new THREE.PointsMaterial( { size: 4, vertexColors: THREE.VertexColors, depthTest: false, sizeAttenuation: false } );
 
+				var material = new PointsMaterial( { size: 4, vertexColors: VertexColors, depthTest: false, sizeAttenuation: false } );
 
 
-				var mesh = new THREE.Points( geometry, material );
 
+				var mesh = new Points( geometry, material );
 
 				scene.add( mesh );
 
 
-				renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
 
+				renderer = new WebGLRenderer( { preserveDrawingBuffer: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.autoClearColor = false;

+ 26 - 22
examples/webgl_video_panorama_equirectangular.html
파일 보기 

@@ -7,25 +7,29 @@
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	<body>
 
+		<div id="info">
 
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - video panorama
 
+		</div>
 
 
 		<div id="container"></div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-
 
 		<video id="video" loop muted crossOrigin="anonymous" webkit-playsinline style="display:none">
 
 			<source src="textures/pano.webm">
 
 			<source src="textures/pano.mp4">
 
 		</video>
 
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				Math as _Math,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				Vector3,
 
+				VideoTexture,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
 			var camera, scene, renderer;
 
 
@@ -47,26 +51,26 @@
 
 
 				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 
-				camera.target = new THREE.Vector3( 0, 0, 0 );
 
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 
+				camera.target = new Vector3( 0, 0, 0 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
 
+				var geometry = new SphereBufferGeometry( 500, 60, 40 );
 
 				// invert the geometry on the x-axis so that all of the faces point inward
 
 				geometry.scale( - 1, 1, 1 );
 
 
 				var video = document.getElementById( 'video' );
 
 				video.play();
 
 
-				var texture = new THREE.VideoTexture( video );
 
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
 
+				var texture = new VideoTexture( video );
 
+				var material = new MeshBasicMaterial( { map: texture } );
 
 
-				mesh = new THREE.Mesh( geometry, material );
 
+				mesh = new Mesh( geometry, material );
 
 
 				scene.add( mesh );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
@@ -126,7 +130,7 @@
 
 
 				distance += event.deltaY * 0.05;
 
 
-				distance = THREE.Math.clamp( distance, 1, 50 );
 
+				distance = _Math.clamp( distance, 1, 50 );
 
 
 			}
 
 
@@ -140,8 +144,8 @@
 
 			function update() {
 
 
 				lat = Math.max( - 85, Math.min( 85, lat ) );
 
-				phi = THREE.Math.degToRad( 90 - lat );
 
-				theta = THREE.Math.degToRad( lon );
 
+				phi = _Math.degToRad( 90 - lat );
 
+				theta = _Math.degToRad( lon );
 
 
 				camera.position.x = distance * Math.sin( phi ) * Math.cos( theta );
 
 				camera.position.y = distance * Math.cos( phi );

+ 146 - 136
examples/webgl_water.html
파일 보기 

@@ -5,15 +5,6 @@
 
 		<meta charset="utf-8">
 
 		<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">
 
-
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/objects/Reflector.js"></script>
 
-		<script src="js/objects/Refractor.js"></script>
 
-		<script src="js/objects/Water2.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-
 
 	</head>
 
 	<body>
 
 
@@ -22,197 +13,216 @@
 
 			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - water
 
 		</div>
 
 
-		<script>
 
-
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-		}
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				BackSide,
 
+				BoxBufferGeometry,
 
+				Clock,
 
+				CubeTextureLoader,
 
+				DirectionalLight,
 
+				Mesh,
 
+				MeshNormalMaterial,
 
+				MeshStandardMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				RepeatWrapping,
 
+				Scene,
 
+				ShaderLib,
 
+				ShaderMaterial,
 
+				TextureLoader,
 
+				TorusKnotBufferGeometry,
 
+				Vector2,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { Water } from './jsm/objects/Water2.js';
 
 
-		var scene, camera, clock, renderer, water;
 
+			var scene, camera, clock, renderer, water;
 
 
-		var torusKnot;
 
+			var torusKnot;
 
 
-		var params = {
 
-			color: '#ffffff',
 
-			scale: 4,
 
-			flowX: 1,
 
-			flowY: 1
 
-		};
 
+			var params = {
 
+				color: '#ffffff',
 
+				scale: 4,
 
+				flowX: 1,
 
+				flowY: 1
 
+			};
 
 
-		init();
 
-		animate();
 
+			init();
 
+			animate();
 
 
-		function init() {
 
+			function init() {
 
 
-			// scene
 
+				// scene
 
 
-			scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-			// camera
 
+				// camera
 
 
-			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
-			camera.position.set( - 15, 7, 15 );
 
-			camera.lookAt( scene.position );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
+				camera.position.set( - 15, 7, 15 );
 
+				camera.lookAt( scene.position );
 
 
-			// clock
 
+				// clock
 
 
-			clock = new THREE.Clock();
 
+				clock = new Clock();
 
 
-			// mesh
 
+				// mesh
 
 
-			var torusKnotGeometry = new THREE.TorusKnotBufferGeometry( 3, 1, 256, 32 );
 
-			var torusKnotMaterial = new THREE.MeshNormalMaterial();
 
+				var torusKnotGeometry = new TorusKnotBufferGeometry( 3, 1, 256, 32 );
 
+				var torusKnotMaterial = new MeshNormalMaterial();
 
 
-			torusKnot = new THREE.Mesh( torusKnotGeometry, torusKnotMaterial );
 
-			torusKnot.position.y = 4;
 
-			torusKnot.scale.set( 0.5, 0.5, 0.5 );
 
-			scene.add( torusKnot );
 
+				torusKnot = new Mesh( torusKnotGeometry, torusKnotMaterial );
 
+				torusKnot.position.y = 4;
 
+				torusKnot.scale.set( 0.5, 0.5, 0.5 );
 
+				scene.add( torusKnot );
 
 
-			// ground
 
+				// ground
 
 
-			var groundGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
 
-			var groundMaterial = new THREE.MeshStandardMaterial( { roughness: 0.8, metalness: 0.4 } );
 
-			var ground = new THREE.Mesh( groundGeometry, groundMaterial );
 
-			ground.rotation.x = Math.PI * - 0.5;
 
-			scene.add( ground );
 
+				var groundGeometry = new PlaneBufferGeometry( 20, 20 );
 
+				var groundMaterial = new MeshStandardMaterial( { roughness: 0.8, metalness: 0.4 } );
 
+				var ground = new Mesh( groundGeometry, groundMaterial );
 
+				ground.rotation.x = Math.PI * - 0.5;
 
+				scene.add( ground );
 
 
-			var textureLoader = new THREE.TextureLoader();
 
-			textureLoader.load( 'textures/hardwood2_diffuse.jpg', function ( map ) {
 
+				var textureLoader = new TextureLoader();
 
+				textureLoader.load( 'textures/hardwood2_diffuse.jpg', function ( map ) {
 
 
-				map.wrapS = THREE.RepeatWrapping;
 
-				map.wrapT = THREE.RepeatWrapping;
 
-				map.anisotropy = 16;
 
-				map.repeat.set( 4, 4 );
 
-				groundMaterial.map = map;
 
-				groundMaterial.needsUpdate = true;
 
+					map.wrapS = RepeatWrapping;
 
+					map.wrapT = RepeatWrapping;
 
+					map.anisotropy = 16;
 
+					map.repeat.set( 4, 4 );
 
+					groundMaterial.map = map;
 
+					groundMaterial.needsUpdate = true;
 
 
-			} );
 
+				} );
 
 
-			// water
 
+				// water
 
 
-			var waterGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
 
+				var waterGeometry = new PlaneBufferGeometry( 20, 20 );
 
 
-			water = new THREE.Water( waterGeometry, {
 
-				color: params.color,
 
-				scale: params.scale,
 
-				flowDirection: new THREE.Vector2( params.flowX, params.flowY ),
 
-				textureWidth: 1024,
 
-				textureHeight: 1024
 
-			} );
 
+				water = new Water( waterGeometry, {
 
+					color: params.color,
 
+					scale: params.scale,
 
+					flowDirection: new Vector2( params.flowX, params.flowY ),
 
+					textureWidth: 1024,
 
+					textureHeight: 1024
 
+				} );
 
 
-			water.position.y = 1;
 
-			water.rotation.x = Math.PI * - 0.5;
 
-			scene.add( water );
 
+				water.position.y = 1;
 
+				water.rotation.x = Math.PI * - 0.5;
 
+				scene.add( water );
 
 
-			// skybox
 
+				// skybox
 
 
-			var cubeTextureLoader = new THREE.CubeTextureLoader();
 
-			cubeTextureLoader.setPath( 'textures/cube/skybox/' );
 
+				var cubeTextureLoader = new CubeTextureLoader();
 
+				cubeTextureLoader.setPath( 'textures/cube/skybox/' );
 
 
-			var cubeTexture = cubeTextureLoader.load( [
 
-				'px.jpg', 'nx.jpg',
 
-				'py.jpg', 'ny.jpg',
 
-				'pz.jpg', 'nz.jpg',
 
-			] );
 
+				var cubeTexture = cubeTextureLoader.load( [
 
+					'px.jpg', 'nx.jpg',
 
+					'py.jpg', 'ny.jpg',
 
+					'pz.jpg', 'nz.jpg',
 
+				] );
 
 
-			var cubeShader = THREE.ShaderLib[ 'cube' ];
 
-			cubeShader.uniforms[ 'tCube' ].value = cubeTexture;
 
+				var cubeShader = ShaderLib[ 'cube' ];
 
+				cubeShader.uniforms[ 'tCube' ].value = cubeTexture;
 
 
-			var skyBoxMaterial = new THREE.ShaderMaterial( {
 
-				fragmentShader: cubeShader.fragmentShader,
 
-				vertexShader: cubeShader.vertexShader,
 
-				uniforms: cubeShader.uniforms,
 
-				side: THREE.BackSide
 
-			} );
 
+				var skyBoxMaterial = new ShaderMaterial( {
 
+					fragmentShader: cubeShader.fragmentShader,
 
+					vertexShader: cubeShader.vertexShader,
 
+					uniforms: cubeShader.uniforms,
 
+					side: BackSide
 
+				} );
 
 
-			var skyBox = new THREE.Mesh( new THREE.BoxBufferGeometry( 1000, 1000, 1000 ), skyBoxMaterial );
 
-			scene.add( skyBox );
 
+				var skyBox = new Mesh( new BoxBufferGeometry( 1000, 1000, 1000 ), skyBoxMaterial );
 
+				scene.add( skyBox );
 
 
-			// light
 
+				// light
 
 
-			var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
 
-			scene.add( ambientLight );
 
+				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
 
+				scene.add( ambientLight );
 
 
-			var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
 
-			directionalLight.position.set( - 1, 1, 1 );
 
-			scene.add( directionalLight );
 
+				var directionalLight = new DirectionalLight( 0xffffff, 0.6 );
 
+				directionalLight.position.set( - 1, 1, 1 );
 
+				scene.add( directionalLight );
 
 
-			// renderer
 
+				// renderer
 
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			document.body.appendChild( renderer.domElement );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				document.body.appendChild( renderer.domElement );
 
 
-			// dat.gui
 
+				// dat.gui
 
 
-			var gui = new dat.GUI();
 
+				var gui = new GUI();
 
 
-			gui.addColor( params, 'color' ).onChange( function ( value ) {
 
+				gui.addColor( params, 'color' ).onChange( function ( value ) {
 
 
-				water.material.uniforms[ "color" ].value.set( value );
 
+					water.material.uniforms[ "color" ].value.set( value );
 
 
-			} );
 
-			gui.add( params, 'scale', 1, 10 ).onChange( function ( value ) {
 
+				} );
 
+				gui.add( params, 'scale', 1, 10 ).onChange( function ( value ) {
 
 
-				water.material.uniforms[ "config" ].value.w = value;
 
+					water.material.uniforms[ "config" ].value.w = value;
 
 
-			} );
 
-			gui.add( params, 'flowX', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {
 
+				} );
 
+				gui.add( params, 'flowX', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {
 
 
-				water.material.uniforms[ "flowDirection" ].value.x = value;
 
-				water.material.uniforms[ "flowDirection" ].value.normalize();
 
+					water.material.uniforms[ "flowDirection" ].value.x = value;
 
+					water.material.uniforms[ "flowDirection" ].value.normalize();
 
 
-			} );
 
-			gui.add( params, 'flowY', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {
 
+				} );
 
+				gui.add( params, 'flowY', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {
 
 
-				water.material.uniforms[ "flowDirection" ].value.y = value;
 
-				water.material.uniforms[ "flowDirection" ].value.normalize();
 
+					water.material.uniforms[ "flowDirection" ].value.y = value;
 
+					water.material.uniforms[ "flowDirection" ].value.normalize();
 
 
-			} );
 
+				} );
 
 
-			gui.open();
 
+				gui.open();
 
 
-			//
 
+				//
 
 
-			var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 
-			//
 
+				//
 
 
-			window.addEventListener( 'resize', onResize, false );
 
+				window.addEventListener( 'resize', onResize, false );
 
 
-		}
 
+			}
 
 
-		function onResize() {
 
+			function onResize() {
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-		}
 
+			}
 
 
-		function animate() {
 
+			function animate() {
 
 
-			requestAnimationFrame( animate );
 
+				requestAnimationFrame( animate );
 
 
-			render();
 
+				render();
 
 
-		}
 
+			}
 
 
-		function render() {
 
+			function render() {
 
 
-			var delta = clock.getDelta();
 
+				var delta = clock.getDelta();
 
 
-			torusKnot.rotation.x += delta;
 
-			torusKnot.rotation.y += delta * 0.5;
 
+				torusKnot.rotation.x += delta;
 
+				torusKnot.rotation.y += delta * 0.5;
 
 
-			renderer.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
-		}
 
+			}
 
 
-	</script>
 
+		</script>
 
 
 </body>
 
 </html>

+ 86 - 87
examples/webgl_water_flowmap.html
파일 보기 

@@ -5,15 +5,6 @@
 
 		<meta charset="utf-8">
 
 		<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">
 
-
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/objects/Reflector.js"></script>
 
-		<script src="js/objects/Refractor.js"></script>
 
-		<script src="js/objects/Water2.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-
 
 	</head>
 
 	<body>
 
 
@@ -22,123 +13,131 @@
 
 			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - water flow map
 
 		</div>
 
 
-		<script>
 
-
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+		<script type="module">
 
+			import {
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				RepeatWrapping,
 
+				Scene,
 
+				TextureLoader,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
-		}
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { Water } from './jsm/objects/Water2.js';
 
 
-		var scene, camera, renderer, water;
 
+			var scene, camera, renderer, water;
 
 
-		init();
 
-		animate();
 
+			init();
 
+			animate();
 
 
-		function init() {
 
+			function init() {
 
 
-			// scene
 
+				// scene
 
 
-			scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-			// camera
 
+				// camera
 
 
-			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
-			camera.position.set( 0, 25, 0 );
 
-			camera.lookAt( scene.position );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
+				camera.position.set( 0, 25, 0 );
 
+				camera.lookAt( scene.position );
 
 
-			// ground
 
+				// ground
 
 
-			var groundGeometry = new THREE.PlaneBufferGeometry( 20, 20, 10, 10 );
 
-			var groundMaterial = new THREE.MeshBasicMaterial( { color: 0xcccccc } );
 
-			var ground = new THREE.Mesh( groundGeometry, groundMaterial );
 
-			ground.rotation.x = Math.PI * - 0.5;
 
-			scene.add( ground );
 
+				var groundGeometry = new PlaneBufferGeometry( 20, 20, 10, 10 );
 
+				var groundMaterial = new MeshBasicMaterial( { color: 0xcccccc } );
 
+				var ground = new Mesh( groundGeometry, groundMaterial );
 
+				ground.rotation.x = Math.PI * - 0.5;
 
+				scene.add( ground );
 
 
-			var textureLoader = new THREE.TextureLoader();
 
-			textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg', function ( map ) {
 
+				var textureLoader = new TextureLoader();
 
+				textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg', function ( map ) {
 
 
-				map.wrapS = THREE.RepeatWrapping;
 
-				map.wrapT = THREE.RepeatWrapping;
 
-				map.anisotropy = 16;
 
-				map.repeat.set( 4, 4 );
 
-				groundMaterial.map = map;
 
-				groundMaterial.needsUpdate = true;
 
+					map.wrapS = RepeatWrapping;
 
+					map.wrapT = RepeatWrapping;
 
+					map.anisotropy = 16;
 
+					map.repeat.set( 4, 4 );
 
+					groundMaterial.map = map;
 
+					groundMaterial.needsUpdate = true;
 
 
-			} );
 
+				} );
 
 
-			// water
 
+				// water
 
 
-			var waterGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
 
-			var flowMap = textureLoader.load( 'textures/water/Water_1_M_Flow.jpg' );
 
+				var waterGeometry = new PlaneBufferGeometry( 20, 20 );
 
+				var flowMap = textureLoader.load( 'textures/water/Water_1_M_Flow.jpg' );
 
 
-			water = new THREE.Water( waterGeometry, {
 
-				scale: 2,
 
-				textureWidth: 1024,
 
-				textureHeight: 1024,
 
-				flowMap: flowMap
 
-			} );
 
+				water = new Water( waterGeometry, {
 
+					scale: 2,
 
+					textureWidth: 1024,
 
+					textureHeight: 1024,
 
+					flowMap: flowMap
 
+				} );
 
 
-			water.position.y = 1;
 
-			water.rotation.x = Math.PI * - 0.5;
 
-			scene.add( water );
 
+				water.position.y = 1;
 
+				water.rotation.x = Math.PI * - 0.5;
 
+				scene.add( water );
 
 
-			// flow map helper
 
+				// flow map helper
 
 
-			var helperGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
 
-			var helperMaterial = new THREE.MeshBasicMaterial( { map: flowMap } );
 
-			var helper = new THREE.Mesh( helperGeometry, helperMaterial );
 
-			helper.position.y = 1.01;
 
-			helper.rotation.x = Math.PI * - 0.5;
 
-			helper.visible = false;
 
-			scene.add( helper );
 
+				var helperGeometry = new PlaneBufferGeometry( 20, 20 );
 
+				var helperMaterial = new MeshBasicMaterial( { map: flowMap } );
 
+				var helper = new Mesh( helperGeometry, helperMaterial );
 
+				helper.position.y = 1.01;
 
+				helper.rotation.x = Math.PI * - 0.5;
 
+				helper.visible = false;
 
+				scene.add( helper );
 
 
-			// renderer
 
+				// renderer
 
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			document.body.appendChild( renderer.domElement );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				document.body.appendChild( renderer.domElement );
 
 
-			//
 
+				//
 
 
-			var gui = new dat.GUI();
 
-			gui.add( helper, 'visible' ).name( 'Show Flow Map' );
 
-			gui.open();
 
+				var gui = new GUI();
 
+				gui.add( helper, 'visible' ).name( 'Show Flow Map' );
 
+				gui.open();
 
 
-			//
 
+				//
 
 
-			var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 
-			//
 
+				//
 
 
-			window.addEventListener( 'resize', onResize, false );
 
+				window.addEventListener( 'resize', onResize, false );
 
 
-		}
 
+			}
 
 
-		function onResize() {
 
+			function onResize() {
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-		}
 
+			}
 
 
-		function animate() {
 
+			function animate() {
 
 
-			requestAnimationFrame( animate );
 
+				requestAnimationFrame( animate );
 
 
-			render();
 
+				render();
 
 
-		}
 
+			}
 
 
-		function render() {
 
+			function render() {
 
 
-			renderer.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
-		}
 
+			}
 
 
-	</script>
 
+		</script>
 
 
 </body>
 
 </html>

+ 48 - 42
examples/webgldeferred_animation.html
파일 보기 

@@ -10,23 +10,29 @@
 
 	<body>
 
 		<div id="container"></div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-
 
-		<script src="js/shaders/CopyShader.js"></script>
 
-		<script src="js/shaders/FXAAShader.js"></script>
 
-
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
 
-		<script src="js/postprocessing/RenderPass.js"></script>
 
-		<script src="js/postprocessing/ShaderPass.js"></script>
 
-		<script src="js/renderers/WebGLDeferredRenderer.js"></script>
 
-
 
-		<script src="js/loaders/GLTFLoader.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AnimationMixer,
 
+				Clock,
 
+				DirectionalLight,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshPhongMaterial,
 
+				Object3D,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				PointLight,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				SpotLight,
 
+				Vector3
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+
 
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
+			import { WebGLDeferredRenderer } from './jsm/renderers/WebGLDeferredRenderer.js';
 
 
 			var WIDTH = window.innerWidth;
 
 			var HEIGHT = window.innerHeight;
 
@@ -52,13 +58,13 @@
 
 
 			function init() {
 
 
-				renderer = new THREE.WebGLDeferredRenderer();
 
+				renderer = new WebGLDeferredRenderer();
 
 				renderer.setSize( WIDTH, HEIGHT );
 
 
-				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, WIDTH / HEIGHT, NEAR, FAR );
 
+				camera = new PerspectiveCamera( VIEW_ANGLE, WIDTH / HEIGHT, NEAR, FAR );
 
 				camera.position.z = 150;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				stats = new Stats();
 
 
@@ -74,13 +80,13 @@
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 
-				clock = new THREE.Clock();
 
+				clock = new Clock();
 
 
 			}
 
 
 			function initModel() {
 
 
-				var loader = new THREE.GLTFLoader();
 
+				var loader = new GLTFLoader();
 
 
 				loader.load( 'models/gltf/RobotExpressive/RobotExpressive.glb', function ( gltf ) {
 
 
@@ -96,7 +102,7 @@
 
 
 					} );
 
 
-					mixer = new THREE.AnimationMixer( model );
 
+					mixer = new AnimationMixer( model );
 
 
 					var dance = gltf.animations.find( function ( clip ) {
 
 
@@ -120,28 +126,28 @@
 
 
 				var distance = 20;
 
 
-				var c = new THREE.Vector3();
 
-				var geometry = new THREE.SphereBufferGeometry( 1, 1, 1 );
 
+				var c = new Vector3();
 
+				var geometry = new SphereBufferGeometry( 1, 1, 1 );
 
 
 				for ( var i = 0; i < numLights; i ++ ) {
 
 
-					var light = new THREE.PointLight( 0xffffff, 2.0, distance );
 
+					var light = new PointLight( 0xffffff, 2.0, distance );
 
 					c.set( Math.random(), Math.random(), Math.random() ).normalize();
 
 					light.color.setRGB( c.x, c.y, c.z );
 
 					scene.add( light );
 
 					lights.push( light );
 
 
-					var material = new THREE.MeshBasicMaterial( { color: light.color } );
 
-					var emitter = new THREE.Mesh( geometry, material );
 
+					var material = new MeshBasicMaterial( { color: light.color } );
 
+					var emitter = new Mesh( geometry, material );
 
 					light.add( emitter );
 
 
 				}
 
 
-				var directionalLight = new THREE.DirectionalLight( 0x101010 );
 
+				var directionalLight = new DirectionalLight( 0x101010 );
 
 				directionalLight.position.set( - 1, 1, 1 ).normalize();
 
 				scene.add( directionalLight );
 
 
-				var spotLight = new THREE.SpotLight( 0x404040 );
 
+				var spotLight = new SpotLight( 0x404040 );
 
 				spotLight.position.set( 0, 50, 0 );
 
 				scene.add( spotLight );
 
 
@@ -150,44 +156,44 @@
 
 			function initRoom() {
 
 
 				var size = 100;
 
-				var geometry = new THREE.PlaneBufferGeometry( size, size );
 
-				var material = new THREE.MeshPhongMaterial( { color: 0x222222, specular: 0x222222, shininess: 75 } );
 
-				var transparentMaterial = new THREE.MeshPhongMaterial( { color: 0x222222, emissive: 0x88888888, specular: 0x222222, shininess: 75, opacity: 0.3, transparent: true } );
 
+				var geometry = new PlaneBufferGeometry( size, size );
 
+				var material = new MeshPhongMaterial( { color: 0x222222, specular: 0x222222, shininess: 75 } );
 
+				var transparentMaterial = new MeshPhongMaterial( { color: 0x222222, emissive: 0x88888888, specular: 0x222222, shininess: 75, opacity: 0.3, transparent: true } );
 
 
-				var room = new THREE.Object3D();
 
+				var room = new Object3D();
 
 				room.position.y = size / 2 - 30;
 
 
 				// top
 
-				var mesh = new THREE.Mesh( geometry, material );
 
+				var mesh = new Mesh( geometry, material );
 
 				mesh.rotation.x = Math.PI / 2;
 
 				mesh.position.y = size / 2;
 
 				room.add( mesh );
 
 
 				// bottom
 
-				mesh = new THREE.Mesh( geometry, material );
 
+				mesh = new Mesh( geometry, material );
 
 				mesh.rotation.x = - Math.PI / 2;
 
 				mesh.position.y = - size / 2;
 
 				room.add( mesh );
 
 
 				// left
 
-				mesh = new THREE.Mesh( geometry, material );
 
+				mesh = new Mesh( geometry, material );
 
 				mesh.position.x = - size / 2;
 
 				mesh.rotation.y = Math.PI / 2;
 
 				room.add( mesh );
 
 
 				// right
 
-				mesh = new THREE.Mesh( geometry, material );
 
+				mesh = new Mesh( geometry, material );
 
 				mesh.position.x = size / 2;
 
 				mesh.rotation.y = - Math.PI / 2;
 
 				room.add( mesh );
 
 
 				// back
 
-				mesh = new THREE.Mesh( geometry, material );
 
+				mesh = new Mesh( geometry, material );
 
 				mesh.position.z = - size / 2;
 
 				room.add( mesh );
 
 
 				// front, to check if transparency works
 
-				mesh = new THREE.Mesh( geometry, transparentMaterial );
 
+				mesh = new Mesh( geometry, transparentMaterial );
 
 				mesh.position.z = size / 2;
 
 				mesh.scale.multiplyScalar( 0.33 );
 
 				mesh.visible = false;
 
@@ -195,7 +201,7 @@
 
 				room.add( mesh );
 
 
 				// back2, to check if transparency works
 
-				mesh = new THREE.Mesh( geometry, transparentMaterial );
 
+				mesh = new Mesh( geometry, transparentMaterial );
 
 				mesh.position.z = - size / 4;
 
 				mesh.scale.multiplyScalar( 0.75 );
 
 				mesh.visible = false;
 
@@ -208,7 +214,7 @@
 
 
 			function initGui() {
 
 
-				var gui = new dat.GUI( { width: 280 } );
 
+				var gui = new GUI( { width: 280 } );
 
 
 				var api = {
 
 					'mode': 0,

+ 44 - 26
examples/webvr_ballshooter.html
파일 보기 

@@ -13,12 +13,30 @@
 
 		</div>
 
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 
-		<script src="../build/three.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
-		<script src="js/geometries/BoxLineGeometry.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AdditiveBlending,
 
+				BufferGeometry,
 
+				Clock,
 
+				Color,
 
+				Float32BufferAttribute,
 
+				HemisphereLight,
 
+				IcosahedronBufferGeometry,
 
+				Line,
 
+				LineBasicMaterial,
 
+				LineSegments,
 
+				Math as _Math,
 
+				Mesh,
 
+				MeshLambertMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				Vector3,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
 
 
 			var camera, scene, renderer;
 
 			var controller1, controller2;
 
@@ -27,43 +45,43 @@
 
 
 			var count = 0;
 
 			var radius = 0.08;
 
-			var normal = new THREE.Vector3();
 
-			var relativeVelocity = new THREE.Vector3();
 
+			var normal = new Vector3();
 
+			var relativeVelocity = new Vector3();
 
 
-			var clock = new THREE.Clock();
 
+			var clock = new Clock();
 
 
 			init();
 
 			animate();
 
 
 			function init() {
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x505050 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x505050 );
 
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 
 
-				room = new THREE.LineSegments(
 
-					new THREE.BoxLineGeometry( 6, 6, 6, 10, 10, 10 ),
 
-					new THREE.LineBasicMaterial( { color: 0x808080 } )
 
+				room = new LineSegments(
 
+					new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ),
 
+					new LineBasicMaterial( { color: 0x808080 } )
 
 				);
 
 				room.geometry.translate( 0, 3, 0 );
 
 				scene.add( room );
 
 
-				var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 
+				var light = new HemisphereLight( 0xffffff, 0x444444 );
 
 				light.position.set( 1, 1, 1 );
 
 				scene.add( light );
 
 
-				var geometry = new THREE.IcosahedronBufferGeometry( radius, 2 );
 
+				var geometry = new IcosahedronBufferGeometry( radius, 2 );
 
 
 				for ( var i = 0; i < 200; i ++ ) {
 
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
+					var object = new Mesh( geometry, new MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
 
 					object.position.x = Math.random() * 4 - 2;
 
 					object.position.y = Math.random() * 4;
 
 					object.position.z = Math.random() * 4 - 2;
 
 
-					object.userData.velocity = new THREE.Vector3();
 
+					object.userData.velocity = new Vector3();
 
 					object.userData.velocity.x = Math.random() * 0.01 - 0.005;
 
 					object.userData.velocity.y = Math.random() * 0.01 - 0.005;
 
 					object.userData.velocity.z = Math.random() * 0.01 - 0.005;
 
@@ -74,7 +92,7 @@
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.vr.enabled = true;
 
@@ -110,14 +128,14 @@
 
 
 				// helpers
 
 
-				var geometry = new THREE.BufferGeometry();
 
-				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );
 
-				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );
 
+				var geometry = new BufferGeometry();
 
+				geometry.addAttribute( 'position', new Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );
 
+				geometry.addAttribute( 'color', new Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );
 
 
-				var material = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );
 
+				var material = new LineBasicMaterial( { vertexColors: true, blending: AdditiveBlending } );
 
 
-				controller1.add( new THREE.Line( geometry, material ) );
 
-				controller2.add( new THREE.Line( geometry, material ) );
 
+				controller1.add( new Line( geometry, material ) );
 
+				controller2.add( new Line( geometry, material ) );
 
 
 				//
 
 
@@ -183,7 +201,7 @@
 
 
 					if ( object.position.x < - range || object.position.x > range ) {
 
 
-						object.position.x = THREE.Math.clamp( object.position.x, - range, range );
 
+						object.position.x = _Math.clamp( object.position.x, - range, range );
 
 						object.userData.velocity.x = - object.userData.velocity.x;
 
 
 					}
 
@@ -200,7 +218,7 @@
 
 
 					if ( object.position.z < - range || object.position.z > range ) {
 
 
-						object.position.z = THREE.Math.clamp( object.position.z, - range, range );
 
+						object.position.z = _Math.clamp( object.position.z, - range, range );
 
 						object.userData.velocity.z = - object.userData.velocity.z;
 
 
 					}

+ 44 - 26
examples/webvr_cubes.html
파일 보기 

@@ -11,16 +11,34 @@
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive cubes
 
 		</div>
 
-		
+
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 
-		<script src="../build/three.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
-		<script src="js/geometries/BoxLineGeometry.js"></script>
 
-
 
-		<script>
 
-
 
-			var clock = new THREE.Clock();
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				Clock,
 
+				Color,
 
+				DirectionalLight,
 
+				HemisphereLight,
 
+				LineBasicMaterial,
 
+				LineSegments,
 
+				Math as _Math,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshLambertMaterial,
 
+				PerspectiveCamera,
 
+				Raycaster,
 
+				RingBufferGeometry,
 
+				Scene,
 
+				Vector3,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
 
+
 
+			var clock = new Clock();
 
 
 			var container;
 
 			var camera, scene, raycaster, renderer;
 
@@ -39,15 +57,15 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x505050 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x505050 );
 
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 
 				scene.add( camera );
 
 
-				crosshair = new THREE.Mesh(
 
-					new THREE.RingBufferGeometry( 0.02, 0.04, 32 ),
 
-					new THREE.MeshBasicMaterial( {
 
+				crosshair = new Mesh(
 
+					new RingBufferGeometry( 0.02, 0.04, 32 ),
 
+					new MeshBasicMaterial( {
 
 						color: 0xffffff,
 
 						opacity: 0.5,
 
 						transparent: true
 
@@ -56,24 +74,24 @@
 
 				crosshair.position.z = - 2;
 
 				camera.add( crosshair );
 
 
-				room = new THREE.LineSegments(
 
-					new THREE.BoxLineGeometry( 6, 6, 6, 10, 10, 10 ),
 
-					new THREE.LineBasicMaterial( { color: 0x808080 } )
 
+				room = new LineSegments(
 
+					new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ),
 
+					new LineBasicMaterial( { color: 0x808080 } )
 
 				);
 
 				room.position.y = 3;
 
 				scene.add( room );
 
 
-				scene.add( new THREE.HemisphereLight( 0x606060, 0x404040 ) );
 
+				scene.add( new HemisphereLight( 0x606060, 0x404040 ) );
 
 
-				var light = new THREE.DirectionalLight( 0xffffff );
 
+				var light = new DirectionalLight( 0xffffff );
 
 				light.position.set( 1, 1, 1 ).normalize();
 
 				scene.add( light );
 
 
-				var geometry = new THREE.BoxBufferGeometry( 0.15, 0.15, 0.15 );
 
+				var geometry = new BoxBufferGeometry( 0.15, 0.15, 0.15 );
 
 
 				for ( var i = 0; i < 200; i ++ ) {
 
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
+					var object = new Mesh( geometry, new MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
 
 					object.position.x = Math.random() * 4 - 2;
 
 					object.position.y = Math.random() * 4 - 2;
 
@@ -87,7 +105,7 @@
 
 					object.scale.y = Math.random() + 0.5;
 
 					object.scale.z = Math.random() + 0.5;
 
 
-					object.userData.velocity = new THREE.Vector3();
 
+					object.userData.velocity = new Vector3();
 
 					object.userData.velocity.x = Math.random() * 0.01 - 0.005;
 
 					object.userData.velocity.y = Math.random() * 0.01 - 0.005;
 
 					object.userData.velocity.z = Math.random() * 0.01 - 0.005;
 
@@ -96,9 +114,9 @@
 
 
 				}
 
 
-				raycaster = new THREE.Raycaster();
 
+				raycaster = new Raycaster();
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.vr.enabled = true;
 
@@ -229,21 +247,21 @@
 
 
 					if ( cube.position.x < - 3 || cube.position.x > 3 ) {
 
 
-						cube.position.x = THREE.Math.clamp( cube.position.x, - 3, 3 );
 
+						cube.position.x = _Math.clamp( cube.position.x, - 3, 3 );
 
 						cube.userData.velocity.x = - cube.userData.velocity.x;
 
 
 					}
 
 
 					if ( cube.position.y < - 3 || cube.position.y > 3 ) {
 
 
-						cube.position.y = THREE.Math.clamp( cube.position.y, - 3, 3 );
 
+						cube.position.y = _Math.clamp( cube.position.y, - 3, 3 );
 
 						cube.userData.velocity.y = - cube.userData.velocity.y;
 
 
 					}
 
 
 					if ( cube.position.z < - 3 || cube.position.z > 3 ) {
 
 
-						cube.position.z = THREE.Math.clamp( cube.position.z, - 3, 3 );
 
+						cube.position.z = _Math.clamp( cube.position.z, - 3, 3 );
 
 						cube.userData.velocity.z = - cube.userData.velocity.z;
 
 
 					}

+ 44 - 23
examples/webvr_dragging.html
파일 보기 

@@ -13,17 +13,38 @@
 
 		</div>
 
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 
-		<script src="../build/three.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				BufferGeometry,
 
+				Color,
 
+				ConeBufferGeometry,
 
+				CylinderBufferGeometry,
 
+				DirectionalLight,
 
+				Group,
 
+				HemisphereLight,
 
+				IcosahedronBufferGeometry,
 
+				Line,
 
+				Matrix4,
 
+				Mesh,
 
+				MeshStandardMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Raycaster,
 
+				Scene,
 
+				TorusBufferGeometry,
 
+				Vector3,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
 			var container;
 
 			var camera, scene, renderer;
 
 			var controller1, controller2;
 
 
 			var raycaster, intersected = [];
 
-			var tempMatrix = new THREE.Matrix4();
 
+			var tempMatrix = new Matrix4();
 
 
 			var group;
 
 
@@ -35,25 +56,25 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x808080 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x808080 );
 
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
 
-				var material = new THREE.MeshStandardMaterial( {
 
+				var geometry = new PlaneBufferGeometry( 4, 4 );
 
+				var material = new MeshStandardMaterial( {
 
 					color: 0xeeeeee,
 
 					roughness: 1.0,
 
 					metalness: 0.0
 
 				} );
 
-				var floor = new THREE.Mesh( geometry, material );
 
+				var floor = new Mesh( geometry, material );
 
 				floor.rotation.x = - Math.PI / 2;
 
 				floor.receiveShadow = true;
 
 				scene.add( floor );
 
 
-				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
 
+				scene.add( new HemisphereLight( 0x808080, 0x606060 ) );
 
 
-				var light = new THREE.DirectionalLight( 0xffffff );
 
+				var light = new DirectionalLight( 0xffffff );
 
 				light.position.set( 0, 6, 0 );
 
 				light.castShadow = true;
 
 				light.shadow.camera.top = 2;
 
@@ -63,27 +84,27 @@
 
 				light.shadow.mapSize.set( 4096, 4096 );
 
 				scene.add( light );
 
 
-				group = new THREE.Group();
 
+				group = new Group();
 
 				scene.add( group );
 
 
 				var geometries = [
 
-					new THREE.BoxBufferGeometry( 0.2, 0.2, 0.2 ),
 
-					new THREE.ConeBufferGeometry( 0.2, 0.2, 64 ),
 
-					new THREE.CylinderBufferGeometry( 0.2, 0.2, 0.2, 64 ),
 
-					new THREE.IcosahedronBufferGeometry( 0.2, 3 ),
 
-					new THREE.TorusBufferGeometry( 0.2, 0.04, 64, 32 )
 
+					new BoxBufferGeometry( 0.2, 0.2, 0.2 ),
 
+					new ConeBufferGeometry( 0.2, 0.2, 64 ),
 
+					new CylinderBufferGeometry( 0.2, 0.2, 0.2, 64 ),
 
+					new IcosahedronBufferGeometry( 0.2, 3 ),
 
+					new TorusBufferGeometry( 0.2, 0.04, 64, 32 )
 
 				];
 
 
 				for ( var i = 0; i < 50; i ++ ) {
 
 
 					var geometry = geometries[ Math.floor( Math.random() * geometries.length ) ];
 
-					var material = new THREE.MeshStandardMaterial( {
 
+					var material = new MeshStandardMaterial( {
 
 						color: Math.random() * 0xffffff,
 
 						roughness: 0.7,
 
 						metalness: 0.0
 
 					} );
 
 
-					var object = new THREE.Mesh( geometry, material );
 
+					var object = new Mesh( geometry, material );
 
 
 					object.position.x = Math.random() * 4 - 2;
 
 					object.position.y = Math.random() * 2;
 
@@ -104,7 +125,7 @@
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.gammaInput = true;
 
@@ -129,16 +150,16 @@
 
 
 				//
 
 
-				var geometry = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 1 ) ] );
 
+				var geometry = new BufferGeometry().setFromPoints( [ new Vector3( 0, 0, 0 ), new Vector3( 0, 0, - 1 ) ] );
 
 
-				var line = new THREE.Line( geometry );
 
+				var line = new Line( geometry );
 
 				line.name = 'line';
 
 				line.scale.z = 5;
 
 
 				controller1.add( line.clone() );
 
 				controller2.add( line.clone() );
 
 
-				raycaster = new THREE.Raycaster();
 
+				raycaster = new Raycaster();
 
 
 				//

+ 27 - 14
examples/webvr_lorenzattractor.html
파일 보기 

@@ -9,10 +9,23 @@
 
 	<body>
 
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 
-		<script src="../build/three.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BufferAttribute,
 
+				BufferGeometry,
 
+				Line,
 
+				LineBasicMaterial,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				PointLight,
 
+				Scene,
 
+				VertexColors,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
 			var camera, scene, renderer;
 
 			var attractor, light;
 
@@ -76,13 +89,13 @@
 
 
 			function init() {
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 
 
 				//
 
 
-				var geometry = new THREE.BufferGeometry();
 
+				var geometry = new BufferGeometry();
 
 
 				var positions = new Float32Array( 3 * shown );
 
 
@@ -92,7 +105,7 @@
 
 
 				}
 
 
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 
+				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
 
 
 				var colors = new Float32Array( 3 * shown );
 
 
@@ -102,31 +115,31 @@
 
 
 				}
 
 
-				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
 
+				geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ) );
 
 
-				var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
 
+				var material = new LineBasicMaterial( { vertexColors: VertexColors } );
 
 
-				attractor = new THREE.Line( geometry, material );
 
+				attractor = new Line( geometry, material );
 
 				attractor.position.set( 0, 1.5, - 2 );
 
 				attractor.frustumCulled = false; // critical to avoid blackouts!
 
 				scene.add( attractor );
 
 
 				//
 
 
-				light = new THREE.PointLight( 0xffffff, 1 );
 
+				light = new PointLight( 0xffffff, 1 );
 
 				light.distance = 2;
 
 				attractor.add( light );
 
 
-				var ground = new THREE.Mesh(
 
-					new THREE.PlaneBufferGeometry( 10, 10 ),
 
-					new THREE.MeshPhongMaterial()
 
+				var ground = new Mesh(
 
+					new PlaneBufferGeometry( 10, 10 ),
 
+					new MeshPhongMaterial()
 
 				);
 
 				ground.geometry.rotateX( - 90 * Math.PI / 180 );
 
 				scene.add( ground );
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.vr.enabled = true;

+ 65 - 44
examples/webvr_paint.html
파일 보기 

@@ -13,11 +13,32 @@
 
 		</div>
 
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 
-		<script src="../build/three.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
-		<script src="js/loaders/OBJLoader.js"></script>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				BufferAttribute,
 
+				BufferGeometry,
 
+				Color,
 
+				DirectionalLight,
 
+				DoubleSide,
 
+				GridHelper,
 
+				HemisphereLight,
 
+				IcosahedronBufferGeometry,
 
+				Matrix4,
 
+				Mesh,
 
+				MeshStandardMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				TextureLoader,
 
+				VertexColors,
 
+				Vector3,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
 
 			var container;
 
 			var camera, scene, renderer;
 
@@ -26,12 +47,12 @@
 
 			var line;
 
 			var shapes = {};
 
 
-			var up = new THREE.Vector3( 0, 1, 0 );
 
+			var up = new Vector3( 0, 1, 0 );
 
 
-			var vector1 = new THREE.Vector3();
 
-			var vector2 = new THREE.Vector3();
 
-			var vector3 = new THREE.Vector3();
 
-			var vector4 = new THREE.Vector3();
 
+			var vector1 = new Vector3();
 
+			var vector2 = new Vector3();
 
+			var vector3 = new Vector3();
 
+			var vector4 = new Vector3();
 
 
 			init();
 
 			initGeometry();
 
@@ -42,18 +63,18 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x222222 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x222222 );
 
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
 
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
 
 
-				var geometry = new THREE.BoxBufferGeometry( 0.5, 0.8, 0.5 );
 
-				var material = new THREE.MeshStandardMaterial( {
 
+				var geometry = new BoxBufferGeometry( 0.5, 0.8, 0.5 );
 
+				var material = new MeshStandardMaterial( {
 
 					color: 0x444444,
 
 					roughness: 1.0,
 
 					metalness: 0.0
 
 				} );
 
-				var table = new THREE.Mesh( geometry, material );
 
+				var table = new Mesh( geometry, material );
 
 				table.position.y = 0.35;
 
 				table.position.z = 0.85;
 
 				table.castShadow = true;
 
@@ -61,7 +82,7 @@
 
 				scene.add( table );
 
 
 				/*
 
-				var table = new THREE.Mesh( geometry, material );
 
+				var table = new Mesh( geometry, material );
 
 				table.position.y = 0.35;
 
 				table.position.z = -0.85;
 
 				table.castShadow = true;
 
@@ -69,22 +90,22 @@
 
 				scene.add( table );
 
 				*/
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
 
-				var material = new THREE.MeshStandardMaterial( {
 
+				var geometry = new PlaneBufferGeometry( 4, 4 );
 
+				var material = new MeshStandardMaterial( {
 
 					color: 0x222222,
 
 					roughness: 1.0,
 
 					metalness: 0.0
 
 				} );
 
-				var floor = new THREE.Mesh( geometry, material );
 
+				var floor = new Mesh( geometry, material );
 
 				floor.rotation.x = - Math.PI / 2;
 
 				floor.receiveShadow = true;
 
 				scene.add( floor );
 
 
-				scene.add( new THREE.GridHelper( 20, 40, 0x111111, 0x111111 ) );
 
+				scene.add( new GridHelper( 20, 40, 0x111111, 0x111111 ) );
 
 
-				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
 
+				scene.add( new HemisphereLight( 0x888877, 0x777788 ) );
 
 
-				var light = new THREE.DirectionalLight( 0xffffff );
 
+				var light = new DirectionalLight( 0xffffff );
 
 				light.position.set( 0, 6, 0 );
 
 				light.castShadow = true;
 
 				light.shadow.camera.top = 2;
 
@@ -94,12 +115,12 @@
 
 				light.shadow.mapSize.set( 4096, 4096 );
 
 				scene.add( light );
 
 
-				// scene.add( new THREE.DirectionalLightHelper( light ) );
 
-				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
 
+				// scene.add( new DirectionalLightHelper( light ) );
 
+				// scene.add( new CameraHelper( light.shadow.camera ) );
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.gammaInput = true;
 
@@ -127,22 +148,22 @@
 
 				controller1 = renderer.vr.getController( 0 );
 
 				controller1.addEventListener( 'selectstart', onSelectStart );
 
 				controller1.addEventListener( 'selectend', onSelectEnd );
 
-				controller1.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
 
-				controller1.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
 
+				controller1.userData.points = [ new Vector3(), new Vector3() ];
 
+				controller1.userData.matrices = [ new Matrix4(), new Matrix4() ];
 
 				scene.add( controller1 );
 
 
 				controller2 = renderer.vr.getController( 1 );
 
 				controller2.addEventListener( 'selectstart', onSelectStart );
 
 				controller2.addEventListener( 'selectend', onSelectEnd );
 
-				controller2.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
 
-				controller2.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
 
+				controller2.userData.points = [ new Vector3(), new Vector3() ];
 
+				controller2.userData.matrices = [ new Matrix4(), new Matrix4() ];
 
 				scene.add( controller2 );
 
 
-				var loader = new THREE.OBJLoader();
 
+				var loader = new OBJLoader();
 
 				loader.setPath( 'models/obj/vive-controller/' );
 
 				loader.load( 'vr_controller_vive_1_5.obj', function ( object ) {
 
 
-					var loader = new THREE.TextureLoader();
 
+					var loader = new TextureLoader();
 
 					loader.setPath( 'models/obj/vive-controller/' );
 
 
 					var controller = object.children[ 0 ];
 
@@ -151,9 +172,9 @@
 
 					controller.castShadow = true;
 
 					controller.receiveShadow = true;
 
 
-					// var pivot = new THREE.Group();
 
-					// var pivot = new THREE.Mesh( new THREE.BoxBufferGeometry( 0.01, 0.01, 0.01 ) );
 
-					var pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.01, 2 ) );
 
+					// var pivot = new Group();
 
+					// var pivot = new Mesh( new BoxBufferGeometry( 0.01, 0.01, 0.01 ) );
 
+					var pivot = new Mesh( new IcosahedronBufferGeometry( 0.01, 2 ) );
 
 					pivot.name = 'pivot';
 
 					pivot.position.y = - 0.016;
 
 					pivot.position.z = - 0.043;
 
@@ -175,17 +196,17 @@
 
 
 			function initGeometry() {
 
 
-				var geometry = new THREE.BufferGeometry();
 
+				var geometry = new BufferGeometry();
 
 
-				var positions = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
 
+				var positions = new BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
 
 				positions.dynamic = true;
 
 				geometry.addAttribute( 'position', positions );
 
 
-				var normals = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
 
+				var normals = new BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
 
 				normals.dynamic = true;
 
 				geometry.addAttribute( 'normal', normals );
 
 
-				var colors = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
 
+				var colors = new BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
 
 				colors.dynamic = true;
 
 				geometry.addAttribute( 'color', colors );
 
 
@@ -202,18 +223,18 @@
 
 					path + 'pz' + format, path + 'nz' + format
 
 				];
 
 
-				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
 
+				var reflectionCube = new CubeTextureLoader().load( urls );
 
 				*/
 
 
-				var material = new THREE.MeshStandardMaterial( {
 
+				var material = new MeshStandardMaterial( {
 
 					roughness: 0.9,
 
 					metalness: 0.0,
 
 					// envMap: reflectionCube,
 
-					vertexColors: THREE.VertexColors,
 
-					side: THREE.DoubleSide
 
+					vertexColors: VertexColors,
 
+					side: DoubleSide
 
 				} );
 
 
-				line = new THREE.Mesh( geometry, material );
 
+				line = new Mesh( geometry, material );
 
 				line.frustumCulled = false;
 
 				line.castShadow = true;
 
 				line.receiveShadow = true;
 
@@ -235,7 +256,7 @@
 
 				for ( var i = 0; i < sides; i ++ ) {
 
 
 					var angle = ( i / sides ) * PI2;
 
-					array.push( new THREE.Vector3( Math.sin( angle ) * radius, Math.cos( angle ) * radius, 0 ) );
 
+					array.push( new Vector3( Math.sin( angle ) * radius, Math.cos( angle ) * radius, 0 ) );
 
 
 				}
 
 
@@ -245,7 +266,7 @@
 
 
 			function stroke( controller, point1, point2, matrix1, matrix2 ) {
 
 
-				var color = new THREE.Color( 0xffffff );
 
+				var color = new Color( 0xffffff );
 
 				var size = 1;
 
 
 				var shapes = getTubeShapes( size );

+ 78 - 69
examples/webvr_panorama.html
파일 보기 

@@ -8,122 +8,131 @@
 
 	</head>
 
 	<body>
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 
-		<script src="../build/three.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				ImageLoader,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				Texture,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
-		var camera;
 
-		var renderer;
 
-		var scene;
 
+			var camera;
 
+			var renderer;
 
+			var scene;
 
 
-		init();
 
-		animate();
 
+			init();
 
+			animate();
 
 
-		function init() {
 
+			function init() {
 
 
-			renderer = new THREE.WebGLRenderer();
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
-			renderer.vr.enabled = true;
 
-			document.body.appendChild( renderer.domElement );
 
+				renderer = new WebGLRenderer();
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.vr.enabled = true;
 
+				document.body.appendChild( renderer.domElement );
 
 
-			document.body.appendChild( WEBVR.createButton( renderer, { referenceSpaceType: 'local' } ) );
 
+				document.body.appendChild( WEBVR.createButton( renderer, { referenceSpaceType: 'local' } ) );
 
 
-			//
 
+				//
 
 
-			scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-			camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 1000 );
 
-			camera.layers.enable( 1 );
 
+				camera = new PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera.layers.enable( 1 );
 
 
-			var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
 
-			geometry.scale( 1, 1, - 1 );
 
-			var textures = getTexturesFromAtlasFile( "textures/cube/sun_temple_stripe_stereo.jpg", 12 );
 
+				var geometry = new BoxBufferGeometry( 100, 100, 100 );
 
+				geometry.scale( 1, 1, - 1 );
 
+				var textures = getTexturesFromAtlasFile( "textures/cube/sun_temple_stripe_stereo.jpg", 12 );
 
 
-			var materials = [];
 
+				var materials = [];
 
 
-			for ( var i = 0; i < 6; i ++ ) {
 
+				for ( var i = 0; i < 6; i ++ ) {
 
 
-				materials.push( new THREE.MeshBasicMaterial( { map: textures[ i ] } ) );
 
+					materials.push( new MeshBasicMaterial( { map: textures[ i ] } ) );
 
 
-			}
 
+				}
 
 
-			var skyBox = new THREE.Mesh( geometry, materials );
 
-			skyBox.layers.set( 1 );
 
-			scene.add( skyBox );
 
+				var skyBox = new Mesh( geometry, materials );
 
+				skyBox.layers.set( 1 );
 
+				scene.add( skyBox );
 
 
 
-			var materialsR = [];
 
+				var materialsR = [];
 
 
-			for ( var i = 6; i < 12; i ++ ) {
 
+				for ( var i = 6; i < 12; i ++ ) {
 
 
-				materialsR.push( new THREE.MeshBasicMaterial( { map: textures[ i ] } ) );
 
+					materialsR.push( new MeshBasicMaterial( { map: textures[ i ] } ) );
 
 
-			}
 
+				}
 
 
-			var skyBoxR = new THREE.Mesh( geometry, materialsR );
 
-			skyBoxR.layers.set( 2 );
 
-			scene.add( skyBoxR );
 
+				var skyBoxR = new Mesh( geometry, materialsR );
 
+				skyBoxR.layers.set( 2 );
 
+				scene.add( skyBoxR );
 
 
-			window.addEventListener( 'resize', onWindowResize, false );
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
-		}
 
+			}
 
 
-		function getTexturesFromAtlasFile( atlasImgUrl, tilesNum ) {
 
+			function getTexturesFromAtlasFile( atlasImgUrl, tilesNum ) {
 
 
-			var textures = [];
 
+				var textures = [];
 
 
-			for ( var i = 0; i < tilesNum; i ++ ) {
 
+				for ( var i = 0; i < tilesNum; i ++ ) {
 
 
-				textures[ i ] = new THREE.Texture();
 
+					textures[ i ] = new Texture();
 
 
-			}
 
+				}
 
 
-			var loader = new THREE.ImageLoader();
 
-			loader.load( atlasImgUrl, function ( imageObj ) {
 
+				var loader = new ImageLoader();
 
+				loader.load( atlasImgUrl, function ( imageObj ) {
 
 
-				var canvas, context;
 
-				var tileWidth = imageObj.height;
 
+					var canvas, context;
 
+					var tileWidth = imageObj.height;
 
 
-				for ( var i = 0; i < textures.length; i ++ ) {
 
+					for ( var i = 0; i < textures.length; i ++ ) {
 
 
-					canvas = document.createElement( 'canvas' );
 
-					context = canvas.getContext( '2d' );
 
-					canvas.height = tileWidth;
 
-					canvas.width = tileWidth;
 
-					context.drawImage( imageObj, tileWidth * i, 0, tileWidth, tileWidth, 0, 0, tileWidth, tileWidth );
 
-					textures[ i ].image = canvas;
 
-					textures[ i ].needsUpdate = true;
 
+						canvas = document.createElement( 'canvas' );
 
+						context = canvas.getContext( '2d' );
 
+						canvas.height = tileWidth;
 
+						canvas.width = tileWidth;
 
+						context.drawImage( imageObj, tileWidth * i, 0, tileWidth, tileWidth, 0, 0, tileWidth, tileWidth );
 
+						textures[ i ].image = canvas;
 
+						textures[ i ].needsUpdate = true;
 
 
-				}
 
+					}
 
 
-			} );
 
+				} );
 
 
-			return textures;
 
+				return textures;
 
 
-		}
 
+			}
 
 
-		function onWindowResize() {
 
+			function onWindowResize() {
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-		}
 
+			}
 
 
-		function animate() {
 
+			function animate() {
 
 
-			renderer.setAnimationLoop( render );
 
+				renderer.setAnimationLoop( render );
 
 
-		}
 
+			}
 
 
-		function render() {
 
+			function render() {
 
 
-			renderer.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
-		}
 
+			}
 
 
 		</script>
 
 	</body>

+ 59 - 43
examples/webvr_rollercoaster.html
파일 보기 

@@ -9,14 +9,30 @@
 
 	<body>
 
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/misc/RollerCoaster.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
-		<script>
 
-
 
-			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+		<script type="module">
 
+			import {
 
+				Color,
 
+				CylinderBufferGeometry,
 
+				DoubleSide,
 
+				HemisphereLight,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshLambertMaterial,
 
+				MeshPhongMaterial,
 
+				Object3D,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				Vector3,
 
+				VertexColors,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { RollerCoasterGeometry, RollerCoasterShadowGeometry, RollerCoasterLiftersGeometry, TreesGeometry, SkyGeometry } from './jsm/misc/RollerCoaster.js';
 
+
 
+			var renderer = new WebGLRenderer( { antialias: true } );
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			renderer.vr.enabled = true;
 
@@ -26,26 +42,26 @@
 
 
 			//
 
 
-			var scene = new THREE.Scene();
 
-			scene.background = new THREE.Color( 0xf0f0ff );
 
+			var scene = new Scene();
 
+			scene.background = new Color( 0xf0f0ff );
 
 
-			var light = new THREE.HemisphereLight( 0xfff0f0, 0x606066 );
 
+			var light = new HemisphereLight( 0xfff0f0, 0x606066 );
 
 			light.position.set( 1, 1, 1 );
 
 			scene.add( light );
 
 
-			var train = new THREE.Object3D();
 
+			var train = new Object3D();
 
 			scene.add( train );
 
 
-			var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 500 );
 
+			var camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 500 );
 
 			train.add( camera );
 
 
 			// environment
 
 
-			var geometry = new THREE.PlaneBufferGeometry( 500, 500, 15, 15 );
 
+			var geometry = new PlaneBufferGeometry( 500, 500, 15, 15 );
 
 			geometry.rotateX( - Math.PI / 2 );
 
 
 			var positions = geometry.attributes.position.array;
 
-			var vertex = new THREE.Vector3();
 
+			var vertex = new Vector3();
 
 
 			for ( var i = 0; i < positions.length; i += 3 ) {
 
 
@@ -63,23 +79,23 @@
 
 
 			geometry.computeVertexNormals();
 
 
-			var material = new THREE.MeshLambertMaterial( {
 
+			var material = new MeshLambertMaterial( {
 
 				color: 0x407000
 
 			} );
 
 
-			var mesh = new THREE.Mesh( geometry, material );
 
+			var mesh = new Mesh( geometry, material );
 
 			scene.add( mesh );
 
 
-			var geometry = new THREE.TreesGeometry( mesh );
 
-			var material = new THREE.MeshBasicMaterial( {
 
-				side: THREE.DoubleSide, vertexColors: THREE.VertexColors
 
+			var geometry = new TreesGeometry( mesh );
 
+			var material = new MeshBasicMaterial( {
 
+				side: DoubleSide, vertexColors: VertexColors
 
 			} );
 
-			var mesh = new THREE.Mesh( geometry, material );
 
+			var mesh = new Mesh( geometry, material );
 
 			scene.add( mesh );
 
 
-			var geometry = new THREE.SkyGeometry();
 
-			var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 
-			var mesh = new THREE.Mesh( geometry, material );
 
+			var geometry = new SkyGeometry();
 
+			var material = new MeshBasicMaterial( { color: 0xffffff } );
 
+			var mesh = new Mesh( geometry, material );
 
 			scene.add( mesh );
 
 
 			//
 
@@ -88,8 +104,8 @@
 
 
 			var curve = ( function () {
 
 
-				var vector = new THREE.Vector3();
 
-				var vector2 = new THREE.Vector3();
 
+				var vector = new Vector3();
 
+				var vector2 = new Vector3();
 
 
 				return {
 
 
@@ -120,24 +136,24 @@
 
 
 			} )();
 
 
-			var geometry = new THREE.RollerCoasterGeometry( curve, 1500 );
 
-			var material = new THREE.MeshPhongMaterial( {
 
-				vertexColors: THREE.VertexColors
 
+			var geometry = new RollerCoasterGeometry( curve, 1500 );
 
+			var material = new MeshPhongMaterial( {
 
+				vertexColors: VertexColors
 
 			} );
 
-			var mesh = new THREE.Mesh( geometry, material );
 
+			var mesh = new Mesh( geometry, material );
 
 			scene.add( mesh );
 
 
-			var geometry = new THREE.RollerCoasterLiftersGeometry( curve, 100 );
 
-			var material = new THREE.MeshPhongMaterial();
 
-			var mesh = new THREE.Mesh( geometry, material );
 
+			var geometry = new RollerCoasterLiftersGeometry( curve, 100 );
 
+			var material = new MeshPhongMaterial();
 
+			var mesh = new Mesh( geometry, material );
 
 			mesh.position.y = 0.1;
 
 			scene.add( mesh );
 
 
-			var geometry = new THREE.RollerCoasterShadowGeometry( curve, 500 );
 
-			var material = new THREE.MeshBasicMaterial( {
 
+			var geometry = new RollerCoasterShadowGeometry( curve, 500 );
 
+			var material = new MeshBasicMaterial( {
 
 				color: 0x305000, depthWrite: false, transparent: true
 
 			} );
 
-			var mesh = new THREE.Mesh( geometry, material );
 
+			var mesh = new Mesh( geometry, material );
 
 			mesh.position.y = 0.1;
 
 			scene.add( mesh );
 
 
@@ -145,24 +161,24 @@
 
 
 			//
 
 
-			var geometry = new THREE.CylinderBufferGeometry( 10, 10, 5, 15 );
 
-			var material = new THREE.MeshLambertMaterial( {
 
+			var geometry = new CylinderBufferGeometry( 10, 10, 5, 15 );
 
+			var material = new MeshLambertMaterial( {
 
 				color: 0xff8080,
 
 				//flatShading: true // Lambert does not support flat shading
 
 			} );
 
-			var mesh = new THREE.Mesh( geometry, material );
 
+			var mesh = new Mesh( geometry, material );
 
 			mesh.position.set( - 80, 10, - 70 );
 
 			mesh.rotation.x = Math.PI / 2;
 
 			scene.add( mesh );
 
 
 			funfairs.push( mesh );
 
 
-			var geometry = new THREE.CylinderBufferGeometry( 5, 6, 4, 10 );
 
-			var material = new THREE.MeshLambertMaterial( {
 
+			var geometry = new CylinderBufferGeometry( 5, 6, 4, 10 );
 
+			var material = new MeshLambertMaterial( {
 
 				color: 0x8080ff,
 
 				//flatShading: true // Lambert does not support flat shading
 
 			} );
 
-			var mesh = new THREE.Mesh( geometry, material );
 
+			var mesh = new Mesh( geometry, material );
 
 			mesh.position.set( 50, 2, 30 );
 
 			scene.add( mesh );
 
 
@@ -183,10 +199,10 @@
 
 
 			//
 
 
-			var position = new THREE.Vector3();
 
-			var tangent = new THREE.Vector3();
 
+			var position = new Vector3();
 
+			var tangent = new Vector3();
 
 
-			var lookAt = new THREE.Vector3();
 
+			var lookAt = new Vector3();
 
 
 			var velocity = 0;
 
 			var progress = 0;

+ 46 - 33
examples/webvr_sandbox.html
파일 보기 

@@ -9,14 +9,27 @@
 
 	<body>
 
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/objects/Lensflare.js"></script>
 
-		<script src="js/objects/Reflector.js"></script>
 
-
 
 		<script src="js/vr/WebVR.js"></script>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				CubeTextureLoader,
 
+				DirectionalLight,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				MeshStandardMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				RGBFormat,
 
+				Scene,
 
+				TextureLoader,
 
+				TorusKnotBufferGeometry,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { Lensflare, LensflareElement } from './jsm/objects/Lensflare.js';
 
+			import { Reflector } from './jsm/objects/Reflector.js';
 
 
 			var camera, scene, renderer;
 
 
@@ -27,35 +40,35 @@
 
 
 			function init() {
 
 
-				var background = new THREE.CubeTextureLoader()
 
+				var background = new CubeTextureLoader()
 
 					.setPath( 'textures/cube/MilkyWay/' )
 
 					.load( [ 'dark-s_px.jpg', 'dark-s_nx.jpg', 'dark-s_py.jpg', 'dark-s_ny.jpg', 'dark-s_pz.jpg', 'dark-s_nz.jpg' ] );
 
-				background.format = THREE.RGBFormat;
 
+				background.format = RGBFormat;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 				scene.background = background;
 
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.15, 150, 20 );
 
-				var material = new THREE.MeshStandardMaterial( { roughness: 0.01, metalness: 0.2, envMap: background } );
 
-				var mesh = new THREE.Mesh( geometry, material );
 
+				var geometry = new TorusKnotBufferGeometry( 0.4, 0.15, 150, 20 );
 
+				var material = new MeshStandardMaterial( { roughness: 0.01, metalness: 0.2, envMap: background } );
 
+				var mesh = new Mesh( geometry, material );
 
 				mesh.position.y = 0.75;
 
 				mesh.position.z = - 2;
 
 				mesh.castShadow = true;
 
 				mesh.receiveShadow = true;
 
 				scene.add( mesh );
 
 
-				var geometry = new THREE.BoxBufferGeometry( 1.5, 0.1, 1.5 );
 
-				var material = new THREE.MeshPhongMaterial();
 
-				var mesh = new THREE.Mesh( geometry, material );
 
+				var geometry = new BoxBufferGeometry( 1.5, 0.1, 1.5 );
 
+				var material = new MeshPhongMaterial();
 
+				var mesh = new Mesh( geometry, material );
 
 				mesh.position.y = - 0.2;
 
 				mesh.position.z = - 2;
 
 				mesh.castShadow = true;
 
 				mesh.receiveShadow = true;
 
 				scene.add( mesh );
 
 
-				var light = new THREE.DirectionalLight( 0x8800ff );
 
+				var light = new DirectionalLight( 0x8800ff );
 
 				light.position.set( - 1, 1.5, - 1.5 );
 
 				light.castShadow = true;
 
 				light.shadow.camera.zoom = 4;
 
@@ -63,10 +76,10 @@
 
 				light.target.position.set( 0, 0, - 2 );
 
 				scene.add( light.target );
 
 
-				// var helper = new THREE.CameraHelper( light.shadow.camera );
 
+				// var helper = new CameraHelper( light.shadow.camera );
 
 				// scene.add( helper );
 
 
-				var light = new THREE.DirectionalLight( 0xff0000 );
 
+				var light = new DirectionalLight( 0xff0000 );
 
 				light.position.set( 1, 1.5, - 2.5 );
 
 				light.castShadow = true;
 
 				light.shadow.camera.zoom = 4;
 
@@ -74,27 +87,27 @@
 
 				light.target.position.set( 0, 0, - 2 );
 
 				scene.add( light.target );
 
 
-				// var helper = new THREE.CameraHelper( light.shadow.camera );
 
+				// var helper = new CameraHelper( light.shadow.camera );
 
 				// scene.add( helper );
 
 
 				// lensflare
 
-				var loader = new THREE.TextureLoader();
 
+				var loader = new TextureLoader();
 
 				var texture0 = loader.load( "textures/lensflare/lensflare0.png" );
 
 				var texture3 = loader.load( "textures/lensflare/lensflare3.png" );
 
 
-				var lensflare = new THREE.Lensflare();
 
+				var lensflare = new Lensflare();
 
 				lensflare.position.set( 0, 5, - 5 );
 
-				lensflare.addElement( new THREE.LensflareElement( texture0, 700, 0 ) );
 
-				lensflare.addElement( new THREE.LensflareElement( texture3, 60, 0.6 ) );
 
-				lensflare.addElement( new THREE.LensflareElement( texture3, 70, 0.7 ) );
 
-				lensflare.addElement( new THREE.LensflareElement( texture3, 120, 0.9 ) );
 
-				lensflare.addElement( new THREE.LensflareElement( texture3, 70, 1 ) );
 
+				lensflare.addElement( new LensflareElement( texture0, 700, 0 ) );
 
+				lensflare.addElement( new LensflareElement( texture3, 60, 0.6 ) );
 
+				lensflare.addElement( new LensflareElement( texture3, 70, 0.7 ) );
 
+				lensflare.addElement( new LensflareElement( texture3, 120, 0.9 ) );
 
+				lensflare.addElement( new LensflareElement( texture3, 70, 1 ) );
 
 				scene.add( lensflare );
 
 
 				//
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 1.4, 1.4 );
 
-				reflector = new THREE.Reflector( geometry, {
 
+				var geometry = new PlaneBufferGeometry( 1.4, 1.4 );
 
+				reflector = new Reflector( geometry, {
 
 					textureWidth: window.innerWidth * window.devicePixelRatio,
 
 					textureHeight: window.innerHeight * window.devicePixelRatio
 
 				} );
 
@@ -104,9 +117,9 @@
 
 				reflector.rotation.y = - Math.PI / 4;
 
 				scene.add( reflector );
 
 
-				var geometry = new THREE.BoxBufferGeometry( 1.5, 1.5, 0.1 );
 
-				var material = new THREE.MeshPhongMaterial();
 
-				var mesh = new THREE.Mesh( geometry, material );
 
+				var geometry = new BoxBufferGeometry( 1.5, 1.5, 0.1 );
 
+				var material = new MeshPhongMaterial();
 
+				var mesh = new Mesh( geometry, material );
 
 				mesh.position.z = - 0.07;
 
 				mesh.castShadow = true;
 
 				mesh.receiveShadow = true;
 
@@ -114,7 +127,7 @@
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.autoClear = false;
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );

+ 47 - 32
examples/webvr_sculpt.html
파일 보기 

@@ -12,15 +12,30 @@
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - sculpt
 
 		</div>
 
 
-
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 
-		<script src="../build/three.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
-		<script src="js/loaders/OBJLoader.js"></script>
 
-		<script src="js/objects/MarchingCubes.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				Color,
 
+				DirectionalLight,
 
+				GridHelper,
 
+				HemisphereLight,
 
+				IcosahedronBufferGeometry,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshStandardMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				TextureLoader,
 
+				Vector3,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
+			import { MarchingCubes } from './jsm/objects/MarchingCubes.js';
 
 
 			var container;
 
 			var camera, scene, renderer;
 
@@ -39,40 +54,40 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x222222 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x222222 );
 
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
 
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
 
 
-				var geometry = new THREE.BoxBufferGeometry( 0.5, 0.8, 0.5 );
 
-				var material = new THREE.MeshStandardMaterial( {
 
+				var geometry = new BoxBufferGeometry( 0.5, 0.8, 0.5 );
 
+				var material = new MeshStandardMaterial( {
 
 					color: 0x444444,
 
 					roughness: 1.0,
 
 					metalness: 0.0
 
 				} );
 
-				var table = new THREE.Mesh( geometry, material );
 
+				var table = new Mesh( geometry, material );
 
 				table.position.y = 0.35;
 
 				table.position.z = 0.85;
 
 				table.castShadow = true;
 
 				table.receiveShadow = true;
 
 				scene.add( table );
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
 
-				var material = new THREE.MeshStandardMaterial( {
 
+				var geometry = new PlaneBufferGeometry( 4, 4 );
 
+				var material = new MeshStandardMaterial( {
 
 					color: 0x222222,
 
 					roughness: 1.0,
 
 					metalness: 0.0
 
 				} );
 
-				var floor = new THREE.Mesh( geometry, material );
 
+				var floor = new Mesh( geometry, material );
 
 				floor.rotation.x = - Math.PI / 2;
 
 				floor.receiveShadow = true;
 
 				scene.add( floor );
 
 
-				scene.add( new THREE.GridHelper( 20, 40, 0x111111, 0x111111 ) );
 
+				scene.add( new GridHelper( 20, 40, 0x111111, 0x111111 ) );
 
 
-				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
 
+				scene.add( new HemisphereLight( 0x888877, 0x777788 ) );
 
 
-				var light = new THREE.DirectionalLight( 0xffffff );
 
+				var light = new DirectionalLight( 0xffffff );
 
 				light.position.set( 0, 6, 0 );
 
 				light.castShadow = true;
 
 				light.shadow.camera.top = 2;
 
@@ -83,12 +98,12 @@
 
 
 				scene.add( light );
 
 
-				// scene.add( new THREE.DirectionalLightHelper( light ) );
 
-				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
 
+				// scene.add( new DirectionalLightHelper( light ) );
 
+				// scene.add( new CameraHelper( light.shadow.camera ) );
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.gammaInput = true;
 
@@ -125,11 +140,11 @@
 
 				controller2.userData.id = 1;
 
 				scene.add( controller2 );
 
 
-				var loader = new THREE.OBJLoader();
 
+				var loader = new OBJLoader();
 
 				loader.setPath( 'models/obj/vive-controller/' );
 
 				loader.load( 'vr_controller_vive_1_5.obj', function ( object ) {
 
 
-					var loader = new THREE.TextureLoader();
 
+					var loader = new TextureLoader();
 
 					loader.setPath( 'models/obj/vive-controller/' );
 
 
 					var controller = object.children[ 0 ];
 
@@ -138,15 +153,15 @@
 
 					controller.castShadow = true;
 
 					controller.receiveShadow = true;
 
 
-					// var pivot = new THREE.Mesh( new THREE.BoxBufferGeometry( 0.01, 0.01, 0.01 ) );
 
-					var pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.002, 2 ), blob.material );
 
+					// var pivot = new Mesh( new BoxBufferGeometry( 0.01, 0.01, 0.01 ) );
 
+					var pivot = new Mesh( new IcosahedronBufferGeometry( 0.002, 2 ), blob.material );
 
 					pivot.name = 'pivot';
 
 					pivot.position.y = - 0.016;
 
 					pivot.position.z = - 0.043;
 
 					pivot.rotation.x = Math.PI / 5.5;
 
 					controller.add( pivot );
 
 
-					var range = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.03, 3 ), new THREE.MeshBasicMaterial( { opacity: 0.25, transparent: true } ) );
 
+					var range = new Mesh( new IcosahedronBufferGeometry( 0.03, 3 ), new MeshBasicMaterial( { opacity: 0.25, transparent: true } ) );
 
 					pivot.add( range );
 
 
 					controller1.add( controller.clone() );
 
@@ -172,17 +187,17 @@
 
 					path + 'pz' + format, path + 'nz' + format
 
 				];
 
 
-				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
 
+				var reflectionCube = new CubeTextureLoader().load( urls );
 
 				*/
 
 
-				var material = new THREE.MeshStandardMaterial( {
 
+				var material = new MeshStandardMaterial( {
 
 					color: 0xffffff,
 
 					// envMap: reflectionCube,
 
 					roughness: 0.9,
 
 					metalness: 0.0
 
 				} );
 
 
-				blob = new THREE.MarchingCubes( 64, material, true );
 
+				blob = new MarchingCubes( 64, material, true );
 
 				blob.position.y = 1;
 
 				scene.add( blob );
 
 
@@ -193,8 +208,8 @@
 
 			function initPoints() {
 
 
 				points = [
 
-					{ position: new THREE.Vector3(), strength: 0.04, subtract: 10 },
 
-					{ position: new THREE.Vector3(), strength: - 0.08, subtract: 10 }
 
+					{ position: new Vector3(), strength: 0.04, subtract: 10 },
 
+					{ position: new Vector3(), strength: - 0.08, subtract: 10 }
 
 				];
 
 
 			}
 
@@ -240,7 +255,7 @@
 
 
 						var strength = points[ id ].strength / 2;
 
 
-						var vector = new THREE.Vector3().setFromMatrixPosition( matrix );
 
+						var vector = new Vector3().setFromMatrixPosition( matrix );
 
 
 						transformPoint( vector );

+ 27 - 17
examples/webvr_video.html
파일 보기 

@@ -14,9 +14,7 @@
 
 			stereoscopic panoramic render by <a href="http://pedrofe.com/rendering-for-oculus-rift-with-arnold/" target="_blank" rel="noopener">pedrofe</a>. scene from <a href="http://www.meryproject.com/" target="_blank" rel="noopener">mery project</a>.
 
 		</div>
 
 
-
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 
-		<script src="../build/three.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
 		<video id="video" loop muted crossOrigin="anonymous" webkit-playsinline style="display:none">
 
@@ -24,7 +22,19 @@
 
 			<source src="textures/MaryOculus.mp4">
 
 		</video>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				Color,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				NearestFilter,
 
+				PerspectiveCamera,
 
+				RGBFormat,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				Texture,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
 			var camera, scene, renderer;
 
 
@@ -40,7 +50,7 @@
 
 
 				} );
 
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
 
 				camera.layers.enable( 1 ); // render left view when no stereo available
 
 
 				// video
 
@@ -48,11 +58,11 @@
 
 				var video = document.getElementById( 'video' );
 
 				video.play();
 
 
-				var texture = new THREE.Texture( video );
 
+				var texture = new Texture( video );
 
 				texture.generateMipmaps = false;
 
-				texture.minFilter = THREE.NearestFilter;
 
-				texture.magFilter = THREE.NearestFilter;
 
-				texture.format = THREE.RGBFormat;
 
+				texture.minFilter = NearestFilter;
 
+				texture.magFilter = NearestFilter;
 
+				texture.format = RGBFormat;
 
 
 				setInterval( function () {
 
 
@@ -64,12 +74,12 @@
 
 
 				}, 1000 / 24 );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x101010 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x101010 );
 
 
 				// left
 
 
-				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
 
+				var geometry = new SphereBufferGeometry( 500, 60, 40 );
 
 				// invert the geometry on the x-axis so that all of the faces point inward
 
 				geometry.scale( - 1, 1, 1 );
 
 
@@ -81,16 +91,16 @@
 
 
 				}
 
 
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
 
+				var material = new MeshBasicMaterial( { map: texture } );
 
 
-				var mesh = new THREE.Mesh( geometry, material );
 
+				var mesh = new Mesh( geometry, material );
 
 				mesh.rotation.y = - Math.PI / 2;
 
 				mesh.layers.set( 1 ); // display in left eye only
 
 				scene.add( mesh );
 
 
 				// right
 
 
-				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
 
+				var geometry = new SphereBufferGeometry( 500, 60, 40 );
 
 				geometry.scale( - 1, 1, 1 );
 
 
 				var uvs = geometry.attributes.uv.array;
 
@@ -102,16 +112,16 @@
 
 
 				}
 
 
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
 
+				var material = new MeshBasicMaterial( { map: texture } );
 
 
-				var mesh = new THREE.Mesh( geometry, material );
 
+				var mesh = new Mesh( geometry, material );
 
 				mesh.rotation.y = - Math.PI / 2;
 
 				mesh.layers.set( 2 ); // display in right eye only
 
 				scene.add( mesh );
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.vr.enabled = true;

+ 67 - 49
examples/webvr_vive_paint.html
파일 보기 

@@ -13,15 +13,33 @@
 
 		</div>
 
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/vr/ViveController.js"></script>
 
-		<script src="js/vr/PaintViveController.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
-		<script src="js/loaders/OBJLoader.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				BufferAttribute,
 
+				BufferGeometry,
 
+				Color,
 
+				DirectionalLight,
 
+				DoubleSide,
 
+				GridHelper,
 
+				HemisphereLight,
 
+				IcosahedronBufferGeometry,
 
+				Matrix4,
 
+				Mesh,
 
+				MeshStandardMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				TextureLoader,
 
+				Vector3,
 
+				VertexColors,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
+			import { PaintViveController } from './jsm/vr/PaintViveController.js';
 
 
 			var container;
 
 			var camera, scene, renderer;
 
@@ -30,12 +48,12 @@
 
 			var line;
 
 			var shapes = {};
 
 
-			var up = new THREE.Vector3( 0, 1, 0 );
 
+			var up = new Vector3( 0, 1, 0 );
 
 
-			var vector1 = new THREE.Vector3();
 
-			var vector2 = new THREE.Vector3();
 
-			var vector3 = new THREE.Vector3();
 
-			var vector4 = new THREE.Vector3();
 
+			var vector1 = new Vector3();
 
+			var vector2 = new Vector3();
 
+			var vector3 = new Vector3();
 
+			var vector4 = new Vector3();
 
 
 			init();
 
 			initGeometry();
 
@@ -46,18 +64,18 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x222222 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x222222 );
 
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
 
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
 
 
-				var geometry = new THREE.BoxBufferGeometry( 0.5, 0.8, 0.5 );
 
-				var material = new THREE.MeshStandardMaterial( {
 
+				var geometry = new BoxBufferGeometry( 0.5, 0.8, 0.5 );
 
+				var material = new MeshStandardMaterial( {
 
 					color: 0x444444,
 
 					roughness: 1.0,
 
 					metalness: 0.0
 
 				} );
 
-				var table = new THREE.Mesh( geometry, material );
 
+				var table = new Mesh( geometry, material );
 
 				table.position.y = 0.35;
 
 				table.position.z = 0.85;
 
 				table.castShadow = true;
 
@@ -65,7 +83,7 @@
 
 				scene.add( table );
 
 
 				/*
 
-				var table = new THREE.Mesh( geometry, material );
 
+				var table = new Mesh( geometry, material );
 
 				table.position.y = 0.35;
 
 				table.position.z = -0.85;
 
 				table.castShadow = true;
 
@@ -73,22 +91,22 @@
 
 				scene.add( table );
 
 				*/
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
 
-				var material = new THREE.MeshStandardMaterial( {
 
+				var geometry = new PlaneBufferGeometry( 4, 4 );
 
+				var material = new MeshStandardMaterial( {
 
 					color: 0x222222,
 
 					roughness: 1.0,
 
 					metalness: 0.0
 
 				} );
 
-				var floor = new THREE.Mesh( geometry, material );
 
+				var floor = new Mesh( geometry, material );
 
 				floor.rotation.x = - Math.PI / 2;
 
 				floor.receiveShadow = true;
 
 				scene.add( floor );
 
 
-				scene.add( new THREE.GridHelper( 20, 40, 0x111111, 0x111111 ) );
 
+				scene.add( new GridHelper( 20, 40, 0x111111, 0x111111 ) );
 
 
-				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
 
+				scene.add( new HemisphereLight( 0x888877, 0x777788 ) );
 
 
-				var light = new THREE.DirectionalLight( 0xffffff );
 
+				var light = new DirectionalLight( 0xffffff );
 
 				light.position.set( 0, 6, 0 );
 
 				light.castShadow = true;
 
 				light.shadow.camera.top = 2;
 
@@ -98,12 +116,12 @@
 
 				light.shadow.mapSize.set( 4096, 4096 );
 
 				scene.add( light );
 
 
-				// scene.add( new THREE.DirectionalLightHelper( light ) );
 
-				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
 
+				// scene.add( new DirectionalLightHelper( light ) );
 
+				// scene.add( new CameraHelper( light.shadow.camera ) );
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.gammaInput = true;
 
@@ -116,23 +134,23 @@
 
 
 				// controllers
 
 
-				controller1 = new THREE.PaintViveController( 0 );
 
+				controller1 = new PaintViveController( 0 );
 
 				controller1.standingMatrix = renderer.vr.getStandingMatrix();
 
-				controller1.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
 
-				controller1.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
 
+				controller1.userData.points = [ new Vector3(), new Vector3() ];
 
+				controller1.userData.matrices = [ new Matrix4(), new Matrix4() ];
 
 				scene.add( controller1 );
 
 
-				controller2 = new THREE.PaintViveController( 1 );
 
+				controller2 = new PaintViveController( 1 );
 
 				controller2.standingMatrix = renderer.vr.getStandingMatrix();
 
-				controller2.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
 
-				controller2.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
 
+				controller2.userData.points = [ new Vector3(), new Vector3() ];
 
+				controller2.userData.matrices = [ new Matrix4(), new Matrix4() ];
 
 				scene.add( controller2 );
 
 
-				var loader = new THREE.OBJLoader();
 
+				var loader = new OBJLoader();
 
 				loader.setPath( 'models/obj/vive-controller/' );
 
 				loader.load( 'vr_controller_vive_1_5.obj', function ( object ) {
 
 
-					var loader = new THREE.TextureLoader();
 
+					var loader = new TextureLoader();
 
 					loader.setPath( 'models/obj/vive-controller/' );
 
 
 					var controller = object.children[ 0 ];
 
@@ -141,9 +159,9 @@
 
 					controller.castShadow = true;
 
 					controller.receiveShadow = true;
 
 
-					// var pivot = new THREE.Group();
 
-					// var pivot = new THREE.Mesh( new THREE.BoxBufferGeometry( 0.01, 0.01, 0.01 ) );
 
-					var pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.01, 2 ) );
 
+					// var pivot = new Group();
 
+					// var pivot = new Mesh( new BoxBufferGeometry( 0.01, 0.01, 0.01 ) );
 
+					var pivot = new Mesh( new IcosahedronBufferGeometry( 0.01, 2 ) );
 
 					pivot.name = 'pivot';
 
 					pivot.position.y = - 0.016;
 
 					pivot.position.z = - 0.043;
 
@@ -165,17 +183,17 @@
 
 
 			function initGeometry() {
 
 
-				var geometry = new THREE.BufferGeometry();
 
+				var geometry = new BufferGeometry();
 
 
-				var positions = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
 
+				var positions = new BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
 
 				positions.dynamic = true;
 
 				geometry.addAttribute( 'position', positions );
 
 
-				var normals = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
 
+				var normals = new BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
 
 				normals.dynamic = true;
 
 				geometry.addAttribute( 'normal', normals );
 
 
-				var colors = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
 
+				var colors = new BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
 
 				colors.dynamic = true;
 
 				geometry.addAttribute( 'color', colors );
 
 
@@ -192,18 +210,18 @@
 
 					path + 'pz' + format, path + 'nz' + format
 
 				];
 
 
-				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
 
+				var reflectionCube = new CubeTextureLoader().load( urls );
 
 				*/
 
 
-				var material = new THREE.MeshStandardMaterial( {
 
+				var material = new MeshStandardMaterial( {
 
 					roughness: 0.9,
 
 					metalness: 0.0,
 
 					// envMap: reflectionCube,
 
-					vertexColors: THREE.VertexColors,
 
-					side: THREE.DoubleSide
 
+					vertexColors: VertexColors,
 
+					side: DoubleSide
 
 				} );
 
 
-				line = new THREE.Mesh( geometry, material );
 
+				line = new Mesh( geometry, material );
 
 				line.frustumCulled = false;
 
 				line.castShadow = true;
 
 				line.receiveShadow = true;
 
@@ -225,7 +243,7 @@
 
 				for ( var i = 0; i < sides; i ++ ) {
 
 
 					var angle = ( i / sides ) * PI2;
 
-					array.push( new THREE.Vector3( Math.sin( angle ) * radius, Math.cos( angle ) * radius, 0 ) );
 
+					array.push( new Vector3( Math.sin( angle ) * radius, Math.cos( angle ) * radius, 0 ) );
 
 
 				}

+ 51 - 36
examples/webvr_vive_sculpt.html
파일 보기 

@@ -13,15 +13,30 @@
 
 		</div>
 
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/vr/ViveController.js"></script>
 
 		<script src="js/vr/WebVR.js"></script>
 
 
-		<script src="js/loaders/OBJLoader.js"></script>
 
-		<script src="js/objects/MarchingCubes.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				Color,
 
+				DirectionalLight,
 
+				GridHelper,
 
+				HemisphereLight,
 
+				IcosahedronBufferGeometry,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshStandardMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				TextureLoader,
 
+				Vector3,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
+			import { MarchingCubes } from './jsm/objects/MarchingCubes.js';
 
+			import { ViveController } from './jsm/vr/ViveController.js';
 
 
 			var container;
 
 			var camera, scene, renderer;
 
@@ -40,40 +55,40 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x222222 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x222222 );
 
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
 
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
 
 
-				var geometry = new THREE.BoxBufferGeometry( 0.5, 0.8, 0.5 );
 
-				var material = new THREE.MeshStandardMaterial( {
 
+				var geometry = new BoxBufferGeometry( 0.5, 0.8, 0.5 );
 
+				var material = new MeshStandardMaterial( {
 
 					color: 0x444444,
 
 					roughness: 1.0,
 
 					metalness: 0.0
 
 				} );
 
-				var table = new THREE.Mesh( geometry, material );
 
+				var table = new Mesh( geometry, material );
 
 				table.position.y = 0.35;
 
 				table.position.z = 0.85;
 
 				table.castShadow = true;
 
 				table.receiveShadow = true;
 
 				scene.add( table );
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
 
-				var material = new THREE.MeshStandardMaterial( {
 
+				var geometry = new PlaneBufferGeometry( 4, 4 );
 
+				var material = new MeshStandardMaterial( {
 
 					color: 0x222222,
 
 					roughness: 1.0,
 
 					metalness: 0.0
 
 				} );
 
-				var floor = new THREE.Mesh( geometry, material );
 
+				var floor = new Mesh( geometry, material );
 
 				floor.rotation.x = - Math.PI / 2;
 
 				floor.receiveShadow = true;
 
 				scene.add( floor );
 
 
-				scene.add( new THREE.GridHelper( 20, 40, 0x111111, 0x111111 ) );
 
+				scene.add( new GridHelper( 20, 40, 0x111111, 0x111111 ) );
 
 
-				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
 
+				scene.add( new HemisphereLight( 0x888877, 0x777788 ) );
 
 
-				var light = new THREE.DirectionalLight( 0xffffff );
 
+				var light = new DirectionalLight( 0xffffff );
 
 				light.position.set( 0, 6, 0 );
 
 				light.castShadow = true;
 
 				light.shadow.camera.top = 2;
 
@@ -84,12 +99,12 @@
 
 
 				scene.add( light );
 
 
-				// scene.add( new THREE.DirectionalLightHelper( light ) );
 
-				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
 
+				// scene.add( new DirectionalLightHelper( light ) );
 
+				// scene.add( new CameraHelper( light.shadow.camera ) );
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.gammaInput = true;
 
@@ -102,19 +117,19 @@
 
 
 				// controllers
 
 
-				controller1 = new THREE.ViveController( 0 );
 
+				controller1 = new ViveController( 0 );
 
 				controller1.standingMatrix = renderer.vr.getStandingMatrix();
 
 				scene.add( controller1 );
 
 
-				controller2 = new THREE.ViveController( 1 );
 
+				controller2 = new ViveController( 1 );
 
 				controller2.standingMatrix = renderer.vr.getStandingMatrix();
 
 				scene.add( controller2 );
 
 
-				var loader = new THREE.OBJLoader();
 
+				var loader = new OBJLoader();
 
 				loader.setPath( 'models/obj/vive-controller/' );
 
 				loader.load( 'vr_controller_vive_1_5.obj', function ( object ) {
 
 
-					var loader = new THREE.TextureLoader();
 
+					var loader = new TextureLoader();
 
 					loader.setPath( 'models/obj/vive-controller/' );
 
 
 					var controller = object.children[ 0 ];
 
@@ -123,15 +138,15 @@
 
 					controller.castShadow = true;
 
 					controller.receiveShadow = true;
 
 
-					// var pivot = new THREE.Mesh( new THREE.BoxBufferGeometry( 0.01, 0.01, 0.01 ) );
 
-					var pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.002, 2 ), blob.material );
 
+					// var pivot = new Mesh( new BoxBufferGeometry( 0.01, 0.01, 0.01 ) );
 
+					var pivot = new Mesh( new IcosahedronBufferGeometry( 0.002, 2 ), blob.material );
 
 					pivot.name = 'pivot';
 
 					pivot.position.y = - 0.016;
 
 					pivot.position.z = - 0.043;
 
 					pivot.rotation.x = Math.PI / 5.5;
 
 					controller.add( pivot );
 
 
-					var range = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.03, 3 ), new THREE.MeshBasicMaterial( { opacity: 0.25, transparent: true } ) );
 
+					var range = new Mesh( new IcosahedronBufferGeometry( 0.03, 3 ), new MeshBasicMaterial( { opacity: 0.25, transparent: true } ) );
 
 					pivot.add( range );
 
 
 					controller1.add( controller.clone() );
 
@@ -156,17 +171,17 @@
 
 					path + 'pz' + format, path + 'nz' + format
 
 				];
 
 
-				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
 
+				var reflectionCube = new CubeTextureLoader().load( urls );
 
 				*/
 
 
-				var material = new THREE.MeshStandardMaterial( {
 
+				var material = new MeshStandardMaterial( {
 
 					color: 0xffffff,
 
 					// envMap: reflectionCube,
 
 					roughness: 0.9,
 
 					metalness: 0.0
 
 				} );
 
 
-				blob = new THREE.MarchingCubes( 64, material, true );
 
+				blob = new MarchingCubes( 64, material, true );
 
 				blob.position.y = 1;
 
 				scene.add( blob );
 
 
@@ -177,8 +192,8 @@
 
 			function initPoints() {
 
 
 				points = [
 
-					{ position: new THREE.Vector3(), strength: - 0.08, subtract: 10 },
 
-					{ position: new THREE.Vector3(), strength: 0.04, subtract: 10 }
 
+					{ position: new Vector3(), strength: - 0.08, subtract: 10 },
 
+					{ position: new Vector3(), strength: 0.04, subtract: 10 }
 
 				];
 
 
 			}
 
@@ -231,7 +246,7 @@
 
 
 						var strength = points[ id ].strength / 2;
 
 
-						var vector = new THREE.Vector3().setFromMatrixPosition( matrix );
 
+						var vector = new Vector3().setFromMatrixPosition( matrix );
 
 
 						transformPoint( vector );
 
 
@@ -249,7 +264,7 @@
 
 							updateBlob();
 
 
 							var geometry = blob.generateBufferGeometry();
 
-							var mesh = new THREE.Mesh( geometry, blob.material.clone() );
 
+							var mesh = new Mesh( geometry, blob.material.clone() );
 
 							mesh.position.y = 1;
 
 							mesh.castShadow = true;
 
 							mesh.receiveShadow = true;