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

use modules in all examples

Gregg Tavares 5 years ago
parent
53471122b4
commit
d2fd74e7b5
100 changed files with 327 additions and 601 deletions
Split View Show Diff Stats
  1. 2 2
      threejs/3dlut-base-cube-maker.html
  2. 6 16
      threejs/background-v01.html
  3. 6 16
      threejs/background.html
  4. 2 2
      threejs/canvas-random-dots.html
  5. 2 2
      threejs/gpw-data-viewer.html
  6. 2 3
      threejs/lessons/resources/threejs-align-html-elements-to-3d.js
  7. 2 3
      threejs/lessons/resources/threejs-cameras.js
  8. 2 3
      threejs/lessons/resources/threejs-custom-buffergeometry.js
  9. 5 4
      threejs/lessons/resources/threejs-fog.js
  10. 5 6
      threejs/lessons/resources/threejs-lesson-utils.js
  11. 4 4
      threejs/lessons/resources/threejs-lights.js
  12. 4 4
      threejs/lessons/resources/threejs-lots-of-objects.js
  13. 0 2
      threejs/lessons/resources/threejs-material-table.js
  14. 2 3
      threejs/lessons/resources/threejs-materials.js
  15. 0 4
      threejs/lessons/resources/threejs-post-processing-3dlut.js
  16. 2 3
      threejs/lessons/resources/threejs-primitives.js
  17. 2 3
      threejs/lessons/resources/threejs-textures.js
  18. 4 4
      threejs/lessons/resources/threejs-voxel-geometry.js
  19. 1 4
      threejs/lessons/ru/threejs-cameras.md
  20. 1 4
      threejs/lessons/ru/threejs-lights.md
  21. 2 2
      threejs/lessons/ru/threejs-material-table.md
  22. 1 4
      threejs/lessons/ru/threejs-materials.md
  23. 1 4
      threejs/lessons/ru/threejs-primitives.md
  24. 1 4
      threejs/lessons/ru/threejs-textures.md
  25. 1 2
      threejs/lessons/threejs-align-html-elements-to-3d.md
  26. 1 4
      threejs/lessons/threejs-cameras.md
  27. 1 4
      threejs/lessons/threejs-custom-buffergeometry.md
  28. 1 5
      threejs/lessons/threejs-fog.md
  29. 1 4
      threejs/lessons/threejs-lights.md
  30. 1 1
      threejs/lessons/threejs-material-table.md
  31. 1 4
      threejs/lessons/threejs-materials.md
  32. 1 5
      threejs/lessons/threejs-optimize-lots-of-objects.md
  33. 1 1
      threejs/lessons/threejs-post-processing-3dlut.md
  34. 1 4
      threejs/lessons/threejs-primitives.md
  35. 1 4
      threejs/lessons/threejs-textures.md
  36. 1 5
      threejs/lessons/threejs-voxel-geometry.md
  37. 1 1
      threejs/resources/editor-settings.js
  38. 5 8
      threejs/threejs-align-html-elements-to-3d-globe-too-many-labels.html
  39. 7 10
      threejs/threejs-align-html-elements-to-3d-globe.html
  40. 4 7
      threejs/threejs-align-html-to-3d-w-hiding.html
  41. 4 7
      threejs/threejs-align-html-to-3d-w-sorting.html
  42. 4 7
      threejs/threejs-align-html-to-3d.html
  43. 2 5
      threejs/threejs-background-css.html
  44. 4 7
      threejs/threejs-background-cubemap.html
  45. 4 7
      threejs/threejs-background-equirectangularmap.html
  46. 2 5
      threejs/threejs-background-scene-background-fixed-aspect.html
  47. 2 5
      threejs/threejs-background-scene-background.html
  48. 2 5
      threejs/threejs-background-separate-scene-bad-aspect.html
  49. 2 5
      threejs/threejs-background-separate-scene.html
  50. 4 7
      threejs/threejs-billboard-labels-w-sprites-adjust-height.html
  51. 4 7
      threejs/threejs-billboard-labels-w-sprites.html
  52. 4 7
      threejs/threejs-billboard-trees-no-billboards.html
  53. 4 7
      threejs/threejs-billboard-trees-static-billboards.html
  54. 6 9
      threejs/threejs-cameras-logarithmic-depth-buffer.html
  55. 7 10
      threejs/threejs-cameras-orthographic-2-scenes.html
  56. 4 7
      threejs/threejs-cameras-orthographic-canvas-top-left-origin.html
  57. 7 10
      threejs/threejs-cameras-perspective-2-scenes.html
  58. 6 9
      threejs/threejs-cameras-perspective.html
  59. 6 9
      threejs/threejs-cameras-z-fighting.html
  60. 2 5
      threejs/threejs-canvas-textured-cube-qix.html
  61. 2 5
      threejs/threejs-canvas-textured-cube.html
  62. 4 8
      threejs/threejs-canvas-textured-labels-one-canvas.html
  63. 4 8
      threejs/threejs-canvas-textured-labels-scale-to-fit.html
  64. 4 8
      threejs/threejs-canvas-textured-labels.html
  65. 4 7
      threejs/threejs-cleanup-loaded-files.html
  66. 3 6
      threejs/threejs-cleanup-simple.html
  67. 2 5
      threejs/threejs-custom-buffergeometry-cube-indexed.html
  68. 2 5
      threejs/threejs-custom-buffergeometry-cube-typedarrays.html
  69. 2 5
      threejs/threejs-custom-buffergeometry-cube.html
  70. 2 5
      threejs/threejs-custom-buffergeometry-dynamic.html
  71. 2 5
      threejs/threejs-custom-geometry-cube-face-colors.html
  72. 2 5
      threejs/threejs-custom-geometry-cube-face-normals.html
  73. 2 5
      threejs/threejs-custom-geometry-cube-texcoords.html
  74. 2 5
      threejs/threejs-custom-geometry-cube-vertex-colors.html
  75. 2 5
      threejs/threejs-custom-geometry-cube-vertex-normals.html
  76. 2 5
      threejs/threejs-custom-geometry-cube.html
  77. 4 7
      threejs/threejs-custom-geometry-heightmap.html
  78. 2 5
      threejs/threejs-debug-js-clearing-logger.html
  79. 2 5
      threejs/threejs-debug-js-html-elements.html
  80. 2 5
      threejs/threejs-debug-js-params.html
  81. 4 7
      threejs/threejs-debugging-mcve.html
  82. 4 7
      threejs/threejs-fog-gui.html
  83. 2 5
      threejs/threejs-fog.html
  84. 2 5
      threejs/threejs-fundamentals-3-cubes.html
  85. 2 5
      threejs/threejs-fundamentals-with-animation.html
  86. 2 5
      threejs/threejs-fundamentals-with-light.html
  87. 2 5
      threejs/threejs-fundamentals.html
  88. 8 11
      threejs/threejs-game-check-animations.html
  89. 10 13
      threejs/threejs-game-conga-line-w-notes.html
  90. 10 13
      threejs/threejs-game-conga-line.html
  91. 8 11
      threejs/threejs-game-just-player.html
  92. 8 11
      threejs/threejs-game-load-models.html
  93. 8 11
      threejs/threejs-game-player-input.html
  94. 5 9
      threejs/threejs-indexed-textures-picking-and-highlighting.html
  95. 5 9
      threejs/threejs-indexed-textures-picking-debounced.html
  96. 5 9
      threejs/threejs-indexed-textures-picking.html
  97. 5 9
      threejs/threejs-indexed-textures-random-colors.html
  98. 6 9
      threejs/threejs-lights-ambient.html
  99. 6 9
      threejs/threejs-lights-directional-w-helper.html
  100. 6 9
      threejs/threejs-lights-directional.html

+ 2 - 2
threejs/3dlut-base-cube-maker.html
View File 

@@ -24,8 +24,8 @@ canvas {
 
 <span id="width"></span>x<span id="height"></span> )</div>
 
 </p>
 
 </body>
 
-<script>
 
-'use strict';
 
+<script type="module">
 
+
 
 
 const ctx = document.querySelector('canvas').getContext('2d');

+ 6 - 16
threejs/background-v01.html
View File 

@@ -21,20 +21,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r108/js/shaders/SSAOShader.js"></script>
 
-<script src="resources/threejs/r108/js/shaders/CopyShader.js"></script>
 
-<script src="resources/threejs/r108/js/postprocessing/EffectComposer.js"></script>
 
-<script src="resources/threejs/r108/js/postprocessing/RenderPass.js"></script>
 
-<script src="resources/threejs/r108/js/postprocessing/ShaderPass.js"></script>
 
-<script src="resources/threejs/r108/js/postprocessing/MaskPass.js"></script>
 
-<script src="resources/threejs/r108/js/postprocessing/SSAOPass.js"></script>
 
-<script src="resources/threejs/r108/js/loaders/GLTFLoader.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import {GLTFLoader} from './resources/threejs/r108/examples/jsm/loaders/GLTFLoader.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -56,7 +46,7 @@ function main() {
 
   const camSpeed = 0.2;
 
 
   if (useOrbitCamera) {
 
-    const controls = new THREE.OrbitControls(camera);
 
+    const controls = new OrbitControls(camera);
 
     controls.target.set(0, 100.01, 0.2);
 
     controls.update();
 
   }
 
@@ -97,7 +87,7 @@ function main() {
 
     scene.add(dirLightHeper);
 
   }
 
 
-  const loader = new THREE.GLTFLoader();
 
+  const loader = new GLTFLoader();
 
   const camRadius = 600;
 
   const camHeight = 160;
 
   const camTarget = [0, 30, 0];

+ 6 - 16
threejs/background.html
View File 

@@ -21,20 +21,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r108/js/shaders/SSAOShader.js"></script>
 
-<script src="resources/threejs/r108/js/shaders/CopyShader.js"></script>
 
-<script src="resources/threejs/r108/js/postprocessing/EffectComposer.js"></script>
 
-<script src="resources/threejs/r108/js/postprocessing/RenderPass.js"></script>
 
-<script src="resources/threejs/r108/js/postprocessing/ShaderPass.js"></script>
 
-<script src="resources/threejs/r108/js/postprocessing/MaskPass.js"></script>
 
-<script src="resources/threejs/r108/js/postprocessing/SSAOPass.js"></script>
 
-<script src="resources/threejs/r108/js/loaders/GLTFLoader.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import {GLTFLoader} from './resources/threejs/r108/examples/jsm/loaders/GLTFLoader.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -57,7 +47,7 @@ function main() {
 
   const showHelpers = false;
 
 
   if (useOrbitCamera) {
 
-    const controls = new THREE.OrbitControls(camera);
 
+    const controls = new OrbitControls(camera);
 
     controls.target.set(0, 0, 0);
 
     controls.update();
 
   }
 
@@ -99,7 +89,7 @@ function main() {
 
   }
 
 
   const birds = [];
 
-  const loader = new THREE.GLTFLoader();
 
+  const loader = new GLTFLoader();
 
   const fogNear = 1350;
 
   const fogFar = 1500;

+ 2 - 2
threejs/canvas-random-dots.html
View File 

@@ -8,8 +8,8 @@
 
   </head>
 
   <body>
 
   </body>
 
-<script>
 
-'use strict';
 
+<script type="module">
 
+
 
 
 function main() {
 
   const ctx = document.createElement('canvas').getContext('2d');

+ 2 - 2
threejs/gpw-data-viewer.html
View File 

@@ -12,8 +12,8 @@ canvas {
 
 <body>
 
 <canvas></canvas>
 
 </body>
 
-<script>
 
-'use strict';
 
+<script type="module">
 
+
 
 
 async function loadFile(url) {
 
   const req = await fetch(url);

+ 2 - 3
threejs/lessons/resources/threejs-align-html-elements-to-3d.js
View File 

@@ -1,6 +1,5 @@
 
-'use strict';
 
+import {GUI} from '../../../3rdparty/dat.gui.module.js';
 
 
-/* global dat */
 
 {
 
   function outlineText(ctx, msg, x, y) {
 
     ctx.strokeText(msg, x, y);
 
@@ -119,7 +118,7 @@
 
           rotation: 0.3,
 
         };
 
 
-        const gui = new dat.GUI({autoPlace: false});
 
+        const gui = new GUI({autoPlace: false});
 
         gui.add(new DegRadHelper(settings, 'rotation'), 'value', -180, 180).name('rotation').onChange(render);
 
         gui.domElement.style.position = 'absolute';
 
         gui.domElement.style.top = '0';

+ 2 - 3
threejs/lessons/resources/threejs-cameras.js
View File 

@@ -1,6 +1,5 @@
 
-'use strict';
 
-
 
-/* global THREE, threejsLessonUtils */
 
+import * as THREE from '../../resources/threejs/r108/build/three.module.js';
 
+import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 
 {
 
   function addShape(color, geometry) {

+ 2 - 3
threejs/lessons/resources/threejs-custom-buffergeometry.js
View File 

@@ -1,6 +1,5 @@
 
-'use strict';
 
-
 
-/* global THREE, threejsLessonUtils */
 
+import * as THREE from '../../resources/threejs/r108/build/three.module.js';
 
+import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 
 {
 
   const loader = new THREE.TextureLoader();

+ 5 - 4
threejs/lessons/resources/threejs-fog.js
View File 

@@ -1,6 +1,6 @@
 
-'use strict';
 
-
 
-/* global THREE, threejsLessonUtils */
 
+import * as THREE from '../../resources/threejs/r108/build/three.module.js';
 
+import {GLTFLoader} from '../../resources/threejs/r108/examples/jsm/loaders/GLTFLoader.js';
 
+import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 
 {
 
   function fogExample(scene, fog) {
 
@@ -15,8 +15,9 @@
 
 
   function houseScene(props, fogInHouse) {
 
     const {scene, camera} = props;
 
+    scene.background = new THREE.Color('#FFF');
 
     camera.far = 200;
 
-    const loader = new THREE.GLTFLoader();
 
+    const loader = new GLTFLoader();
 
     const settings = {
 
       shininess: 0,
 
       roughness: 1,

+ 5 - 6
threejs/lessons/resources/threejs-lesson-utils.js
View File 

@@ -1,8 +1,7 @@
 
-'use strict';
 
+import * as THREE from '../../resources/threejs/r108/build/three.module.js';
 
+import {TrackballControls} from '../../resources/threejs/r108/examples/jsm/controls/TrackballControls.js';
 
 
-/* global THREE */
 
-
 
-window.threejsLessonUtils = {
 
+export const threejsLessonUtils = {
 
   init() {
 
     if (this.renderer) {
 
       return;
 
@@ -144,7 +143,7 @@ window.threejsLessonUtils = {
 
       targetFOVDeg = camera.fov;
 
 
       if (settings.trackball !== false) {
 
-        const controls = new THREE.TrackballControls(camera, elem);
 
+        const controls = new TrackballControls(camera, elem);
 
         controls.noZoom = true;
 
         controls.noPan = true;
 
         resizeFunctions.push(controls.handleResize.bind(controls));
 
@@ -152,7 +151,7 @@ window.threejsLessonUtils = {
 
       }
 
 
       // add the lights as children of the camera.
 
-      // this is because TrackbacllControls move the camera.
 
+      // this is because TrackballControls move the camera.
 
       // We really want to rotate the object itself but there's no
 
       // controls for that so we fake it by putting all the lights
 
       // on the camera so they move with it.

+ 4 - 4
threejs/lessons/resources/threejs-lights.js
View File 

@@ -1,6 +1,6 @@
 
-'use strict';
 
-
 
-/* global THREE, threejsLessonUtils */
 
+import * as THREE from '../../resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from '../../resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 
 {
 
   function makeCheckerTexture(repeats) {
 
@@ -39,7 +39,7 @@
 
 
     return function(renderInfo) {
 
       const {scene, camera, elem} = renderInfo;
 
-      const controls = new THREE.OrbitControls(camera, elem);
 
+      const controls = new OrbitControls(camera, elem);
 
       controls.enableDamping = true;
 
       controls.enablePanning = false;
 
       controls.enableKeys = false;

+ 4 - 4
threejs/lessons/resources/threejs-lots-of-objects.js
View File 

@@ -1,6 +1,6 @@
 
-'use strict';
 
-
 
-/* global THREE, dat, threejsLessonUtils */
 
+import * as THREE from '../../resources/threejs/r108/build/three.module.js';
 
+import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
+import {GUI} from '../../../3rdparty/dat.gui.module.js';
 
 
 {
 
   class DegRadHelper {
 
@@ -97,7 +97,7 @@
 
         camera.position.set(1, 1.5, 1.5);
 
         camera.lookAt(0, 0, 0);
 
 
-        const gui = new dat.GUI({autoPlace: false});
 
+        const gui = new GUI({autoPlace: false});
 
         renderInfo.elem.appendChild(gui.domElement);
 
         gui.add(new DegRadHelper(lonHelper.rotation, 'y'), 'value', -180, 180).name('lonHelper x rotation');
 
         gui.add(new DegRadHelper(latHelper.rotation, 'x'), 'value', -90, 90).name('latHelper y rotation');

+ 0 - 2
threejs/lessons/resources/threejs-material-table.js
View File 

@@ -1,5 +1,3 @@
 
-'use strict';
 
-
 
 const materials = [
 
   {
 
     name: 'MeshBasicMaterial',

+ 2 - 3
threejs/lessons/resources/threejs-materials.js
View File 

@@ -1,6 +1,5 @@
 
-'use strict';
 
-
 
-/* global THREE, threejsLessonUtils */
 
+import * as THREE from '../../resources/threejs/r108/build/three.module.js';
 
+import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 
 {
 
   function makeSphere(widthDivisions, heightDivisions) {

+ 0 - 4
threejs/lessons/resources/threejs-post-processing-3dlut.js
View File 

@@ -1,7 +1,3 @@
 
-'use strict';
 
-
 
-/* global */
 
-
 
 {
 
     class Waiter {
 
       constructor() {

+ 2 - 3
threejs/lessons/resources/threejs-primitives.js
View File 

@@ -1,6 +1,5 @@
 
-'use strict';
 
-
 
-/* global THREE, threejsLessonUtils */
 
+import * as THREE from '../../resources/threejs/r108/build/three.module.js';
 
+import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 
 {
 
   const darkColors = {

+ 2 - 3
threejs/lessons/resources/threejs-textures.js
View File 

@@ -1,6 +1,5 @@
 
-'use strict';
 
-
 
-/* global THREE, threejsLessonUtils */
 
+import * as THREE from '../../resources/threejs/r108/build/three.module.js';
 
+import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 
 {
 
   const loader = new THREE.TextureLoader();

+ 4 - 4
threejs/lessons/resources/threejs-voxel-geometry.js
View File 

@@ -1,6 +1,6 @@
 
-'use strict';
 
-
 
-/* global THREE, threejsLessonUtils */
 
+import * as THREE from '../../resources/threejs/r108/build/three.module.js';
 
+import {BufferGeometryUtils} from '../../resources/threejs/r108/examples/jsm/utils/BufferGeometryUtils.js';
 
+import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 
 {
 
   const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
 
@@ -31,7 +31,7 @@
 
             }
 
           }
 
         }
 
-        const mergedGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries(geometries, false);
 
+        const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(geometries, false);
 
         const material = new THREE.MeshBasicMaterial({
 
           color: colors.wire,
 
           wireframe: true,

+ 1 - 4
threejs/lessons/ru/threejs-cameras.md
View File 

@@ -591,7 +591,4 @@ function render(time) {
 
 А пока давайте перейдем к [теням](threejs-shadows.html).
 
 
 <canvas id="c"></canvas>
 
-<script src="../../resources/threejs/r108/three.min.js"></script>
 
-<script src="../../resources/threejs/r108/js/controls/TrackballControls.js"></script>
 
-<script src="../resources/threejs-lesson-utils.js"></script>
 
-<script src="../resources/threejs-cameras.js"></script>
 
+<script type="module" src="resources/threejs-cameras.js"></script>

+ 1 - 4
threejs/lessons/ru/threejs-lights.md
View File 

@@ -565,7 +565,4 @@ gui.add(light, 'power', 0, 2000);
 
 Далее давайте перейдем к  [работе с камерами](threejs-cameras.html).
 
 
 <canvas id="c"></canvas>
 
-<script src="../../resources/threejs/r108/three.min.js"></script>
 
-<script src="../../resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="../resources/threejs-lesson-utils.js"></script>
 
-<script src="../resources/threejs-lights.js"></script>
 
+<script type="module" src="../resources/threejs-lights.js"></script>

+ 2 - 2
threejs/lessons/ru/threejs-material-table.md
View File 

@@ -7,6 +7,6 @@ Mesh. Вот таблица, показывающая, какие функции
 
 
 <div>
 
 <div id="material-table" class="threejs_center"></div>
 
-<script src="resources/threejs-material-table.js"></script>
 
-<link rel="stylesheet" href="resources/threejs-material-table.css">
 
+<script type="module" src="../resources/threejs-material-table.js"></script>
 
+<link rel="stylesheet" href="../resources/threejs-material-table.css">
 
 </div>

+ 1 - 4
threejs/lessons/ru/threejs-materials.md
View File 

@@ -318,9 +318,6 @@ flat shaded
 
 </div>
 
 
 <canvas id="c"></canvas>
 
-<script src="../../resources/threejs/r108/three.min.js"></script>
 
-<script src="../../resources/threejs/r108/js/controls/TrackballControls.js"></script>
 
-<script src="../resources/threejs-lesson-utils.js"></script>
 
-<script src="../resources/threejs-materials.js"></script>
 
+<script type="module" src="../resources/threejs-materials.js"></script>

+ 1 - 4
threejs/lessons/ru/threejs-primitives.md
View File 

@@ -331,8 +331,5 @@ function addLineGeometry(x, y, geometry) {
 
 Далее давайте рассмотрим [как работает граф сцены и как его использовать](threejs-scenegraph.html).
 
 
 <canvas id="c"></canvas>
 
-<script src="../../resources/threejs/r108/three.min.js"></script>
 
-<script src="../../resources/threejs/r108/js/controls/TrackballControls.js"></script>
 
-<script src="../resources/threejs-lesson-utils.js"></script>
 
-<script src="../resources/threejs-primitives.js"></script>
 
+<script type="module" src="../resources/threejs-primitives.js"></script>
 
 <link rel="stylesheet" href="resources/threejs-primitives.css">

+ 1 - 4
threejs/lessons/ru/threejs-textures.md
View File 

@@ -616,8 +616,5 @@ roughness
 
 -->
 
 
 <canvas id="c"></canvas>
 
-<script src="../../resources/threejs/r108/three.min.js"></script>
 
-<script src="../../resources/threejs/r108/js/controls/TrackballControls.js"></script>
 
-<script src="../resources/threejs-lesson-utils.js"></script>
 
-<script src="../resources/threejs-textures.js"></script>
 
+<script type="module" src="../resources/threejs-textures.js"></script>
 
 <link rel="stylesheet" href="resources/threejs-textures.css">

+ 1 - 2
threejs/lessons/threejs-align-html-elements-to-3d.md
View File 

@@ -785,5 +785,4 @@ elements with your 3D. A few things I might change.
 
 Next up let's make it so you can [pick and highlight a country](threejs-indexed-textures.html).
 
 
 <link rel="stylesheet" href="resources/threejs-align-html-elements-to-3d.css">
 
-<script src="/3rdparty/dat.gui.min.js"></script>
 
-<script src="resources/threejs-align-html-elements-to-3d.js"></script>
 
+<script type="module" src="resources/threejs-align-html-elements-to-3d.js"></script>

+ 1 - 4
threejs/lessons/threejs-cameras.md
View File 

@@ -597,7 +597,4 @@ That's the fundamentals of cameras. We'll cover a few common ways to move camera
 
 in other articles. For now let's move on to [shadows](threejs-shadows.html).
 
 
 <canvas id="c"></canvas>
 
-<script src="../resources/threejs/r108/three.min.js"></script>
 
-<script src="../resources/threejs/r108/js/controls/TrackballControls.js"></script>
 
-<script src="resources/threejs-lesson-utils.js"></script>
 
-<script src="resources/threejs-cameras.js"></script>
 
+<script type="module" src="resources/threejs-cameras.js"></script>

+ 1 - 4
threejs/lessons/threejs-custom-buffergeometry.md
View File 

@@ -461,9 +461,6 @@ make your own geometry and how to dynamically update the contents of a
 
 depends on your needs.
 
 
 <canvas id="c"></canvas>
 
-<script src="../resources/threejs/r108/three.min.js"></script>
 
-<script src="../resources/threejs/r108/js/controls/TrackballControls.js"></script>
 
-<script src="resources/threejs-lesson-utils.js"></script>
 
-<script src="resources/threejs-custom-buffergeometry.js"></script>
 
+<script type="module" src="resources/threejs-custom-buffergeometry.js"></script>

+ 1 - 5
threejs/lessons/threejs-fog.md
View File 

@@ -272,8 +272,4 @@ By turning fog off on the materials for the house we can fix that issue.
 
 </div>
 
 
 <canvas id="c"></canvas>
 
-<script src="../resources/threejs/r108/three.min.js"></script>
 
-<script src="../resources/threejs/r108/js/controls/TrackballControls.js"></script>
 
-<script src="../resources/threejs/r108/js/loaders/GLTFLoader.js"></script>
 
-<script src="resources/threejs-lesson-utils.js"></script>
 
-<script src="resources/threejs-fog.js"></script>
 
+<script type="module" src="resources/threejs-fog.js"></script>

+ 1 - 4
threejs/lessons/threejs-lights.md
View File 

@@ -574,7 +574,4 @@ possible to achieve your goals.
 
 Next up let's go over [dealing with cameras](threejs-cameras.html).
 
 
 <canvas id="c"></canvas>
 
-<script src="../resources/threejs/r108/three.min.js"></script>
 
-<script src="../resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs-lesson-utils.js"></script>
 
-<script src="resources/threejs-lights.js"></script>
 
+<script type="module" src="resources/threejs-lights.js"></script>

+ 1 - 1
threejs/lessons/threejs-material-table.md
View File 

@@ -7,7 +7,7 @@ is a table showing which material support which features.
 
 
 <div>
 
 <div id="material-table" class="threejs_center"></div>
 
-<script src="resources/threejs-material-table.js"></script>
 
+<script type="module" src="resources/threejs-material-table.js"></script>
 
 <link rel="stylesheet" href="resources/threejs-material-table.css">
 
 </div>

+ 1 - 4
threejs/lessons/threejs-materials.md
View File 

@@ -304,9 +304,6 @@ switch from using one to using the other.
 
 </div>
 
 
 <canvas id="c"></canvas>
 
-<script src="../resources/threejs/r108/three.min.js"></script>
 
-<script src="../resources/threejs/r108/js/controls/TrackballControls.js"></script>
 
-<script src="resources/threejs-lesson-utils.js"></script>
 
-<script src="resources/threejs-materials.js"></script>
 
+<script type="module" src="resources/threejs-materials.js"></script>

+ 1 - 5
threejs/lessons/threejs-optimize-lots-of-objects.md
View File 

@@ -532,8 +532,4 @@ though there are creative solutions. We'll explore one in
 
 [another article](threejs-optimize-lots-of-objects-animated.html).
 
 
 <canvas id="c"></canvas>
 
-<script src="../resources/threejs/r108/three.min.js"></script>
 
-<script src="../resources/threejs/r108/js/controls/TrackballControls.js"></script>
 
-<script src="../../3rdparty/dat.gui.min.js"></script>
 
-<script src="resources/threejs-lesson-utils.js"></script>
 
-<script src="resources/threejs-lots-of-objects.js"></script>
 
+<script type="module" src="resources/threejs-lots-of-objects.js"></script>

+ 1 - 1
threejs/lessons/threejs-post-processing-3dlut.md
View File 

@@ -491,5 +491,5 @@ The sample below is just a modification of the code above. We only draw the back
 
 
 One thing completely skipped is how the shader itself works. Hopefully we can cover a little more GLSL in the future. For now, if you're curious, you can follow the links in the [post processing article](threejs-post-processing.html) as well as maybe [take a look at this video](https://www.youtube.com/watch?v=rfQ8rKGTVlg#t=24m30s).
 
 
-<script src="resources/threejs-post-processing-3dlut.js"></script>
 
+<script type="module" src="resources/threejs-post-processing-3dlut.js"></script>

+ 1 - 4
threejs/lessons/threejs-primitives.md
View File 

@@ -349,10 +349,7 @@ Next up let's go over [how three's scene graph works and how
 
 to use it](threejs-scenegraph.html).
 
 
 <canvas id="c"></canvas>
 
-<script src="../resources/threejs/r108/three.min.js"></script>
 
-<script src="../resources/threejs/r108/js/controls/TrackballControls.js"></script>
 
-<script src="resources/threejs-lesson-utils.js"></script>
 
-<script src="resources/threejs-primitives.js"></script>
 
 <link rel="stylesheet" href="resources/threejs-primitives.css">
 
+<script type="module" src="resources/threejs-primitives.js"></script>

+ 1 - 4
threejs/lessons/threejs-textures.md
View File 

@@ -625,8 +625,5 @@ roughness
 
 -->
 
 
 <canvas id="c"></canvas>
 
-<script src="../resources/threejs/r108/three.min.js"></script>
 
-<script src="../resources/threejs/r108/js/controls/TrackballControls.js"></script>
 
-<script src="resources/threejs-lesson-utils.js"></script>
 
-<script src="resources/threejs-textures.js"></script>
 
 <link rel="stylesheet" href="resources/threejs-textures.css">
 
+<script type="module" src="resources/threejs-textures.js"></script>

+ 1 - 5
threejs/lessons/threejs-voxel-geometry.md
View File 

@@ -1213,10 +1213,6 @@ I hope this has given you some ideas where to start and how
 
 to generate some what efficient geometry.
 
 
 <canvas id="c"></canvas>
 
-<script src="../resources/threejs/r108/three.min.js"></script>
 
-<script src="../resources/threejs/r108/js/utils/BufferGeometryUtils.js"></script>
 
-<script src="../resources/threejs/r108/js/controls/TrackballControls.js"></script>
 
-<script src="resources/threejs-lesson-utils.js"></script>
 
-<script src="resources/threejs-voxel-geometry.js"></script>
 
+<script type="module" src="resources/threejs-voxel-geometry.js"></script>

+ 1 - 1
threejs/resources/editor-settings.js
View File 

@@ -46,7 +46,7 @@ function fixSourceLinks(url, source) {
 
   const prefix = getPrefix(url);
 
 
   function addPrefix(url) {
 
-    return url.indexOf('://') < 0 && url[0] !== '?' ? (prefix + url) : url;
 
+    return url.indexOf('://') < 0 && !url.startsWith('data:') && url[0] !== '?' ? (prefix + url).replace(/\/.\//g, '/') : url;
 
   }
 
   function makeLinkFDedQuotes(match, fn, q1, url, q2) {
 
     return fn + q1 + addPrefix(url) + q2;

+ 5 - 8
threejs/threejs-align-html-elements-to-3d-globe-too-many-labels.html
View File 

@@ -57,13 +57,10 @@
 
       <div id="labels"></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/utils/BufferGeometryUtils.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {BufferGeometryUtils} from './resources/threejs/r108/examples/jsm/utils/BufferGeometryUtils.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -76,7 +73,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.z = 2.5;
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.enableDamping = true;
 
   controls.enablePan = false;
 
   controls.minDistance = 1.2;

+ 7 - 10
threejs/threejs-align-html-elements-to-3d-globe.html
View File 

@@ -57,14 +57,11 @@
 
       <div id="labels"></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/utils/BufferGeometryUtils.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="../3rdparty/dat.gui.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE, dat */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {BufferGeometryUtils} from './resources/threejs/r108/examples/jsm/utils/BufferGeometryUtils.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import { GUI } from '../3rdparty/dat.gui.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -77,7 +74,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.z = 2.5;
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.enableDamping = true;
 
   controls.enablePan = false;
 
   controls.minDistance = 1.2;
 
@@ -156,7 +153,7 @@ function main() {
 
     minArea: 20,
 
     maxVisibleDot: -0.2,
 
   };
 
-  const gui = new dat.GUI({width: 300});
 
+  const gui = new GUI({width: 300});
 
   gui.add(settings, 'minArea', 0, 50).onChange(requestRenderIfNotRequested);
 
   gui.add(settings, 'maxVisibleDot', -1, 1, 0.01).onChange(requestRenderIfNotRequested);

+ 4 - 7
threejs/threejs-align-html-to-3d-w-hiding.html
View File 

@@ -54,12 +54,9 @@
 
       <div id="labels"></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -72,7 +69,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.z = 7;
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 0, 0);
 
   controls.update();

+ 4 - 7
threejs/threejs-align-html-to-3d-w-sorting.html
View File 

@@ -56,12 +56,9 @@
 
       <div id="labels"></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -74,7 +71,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.z = 7;
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 0, 0);
 
   controls.update();

+ 4 - 7
threejs/threejs-align-html-to-3d.html
View File 

@@ -54,12 +54,9 @@
 
       <div id="labels"></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -72,7 +69,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.z = 7;
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 0, 0);
 
   controls.update();

+ 2 - 5
threejs/threejs-background-css.html
View File 

@@ -21,11 +21,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 4 - 7
threejs/threejs-background-cubemap.html
View File 

@@ -19,12 +19,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -38,7 +35,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.z = 3;
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 0, 0);
 
   controls.update();

+ 4 - 7
threejs/threejs-background-equirectangularmap.html
View File 

@@ -19,12 +19,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -38,7 +35,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.z = 3;
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 0, 0);
 
   controls.update();

+ 2 - 5
threejs/threejs-background-scene-background-fixed-aspect.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-background-scene-background.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-background-separate-scene-bad-aspect.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-background-separate-scene.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 4 - 7
threejs/threejs-billboard-labels-w-sprites-adjust-height.html
View File 

@@ -19,12 +19,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -37,7 +34,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 2, 5);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 2, 0);
 
   controls.update();

+ 4 - 7
threejs/threejs-billboard-labels-w-sprites.html
View File 

@@ -19,12 +19,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -37,7 +34,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 2, 5);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 2, 0);
 
   controls.update();

+ 4 - 7
threejs/threejs-billboard-trees-no-billboards.html
View File 

@@ -19,12 +19,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -37,7 +34,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 2, 5);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 2, 0);
 
   controls.minPolarAngle = 0;
 
   controls.maxPolarAngle = Math.PI / 2;

+ 4 - 7
threejs/threejs-billboard-trees-static-billboards.html
View File 

@@ -19,12 +19,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -37,7 +34,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 2, 5);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 2, 0);
 
   controls.minPolarAngle = 0;
 
   controls.maxPolarAngle = Math.PI / 2;

+ 6 - 9
threejs/threejs-cameras-logarithmic-depth-buffer.html
View File 

@@ -20,13 +20,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="../3rdparty/dat.gui.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE, dat */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import { GUI } from '../3rdparty/dat.gui.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -68,13 +65,13 @@ function main() {
 
     camera.updateProjectionMatrix();
 
   }
 
 
-  const gui = new dat.GUI();
 
+  const gui = new GUI();
 
   gui.add(camera, 'fov', 1, 180).onChange(updateCamera);
 
   const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
 
   gui.add(minMaxGUIHelper, 'min', 0.00001, 50, 0.00001).name('near').onChange(updateCamera);
 
   gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far').onChange(updateCamera);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 5, 0);
 
   controls.update();

+ 7 - 10
threejs/threejs-cameras-orthographic-2-scenes.html
View File 

@@ -36,13 +36,10 @@
 
        <div id="view2" tabindex="2"></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="../3rdparty/dat.gui.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE, dat */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import { GUI } from '../3rdparty/dat.gui.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -82,13 +79,13 @@ function main() {
 
     }
 
   }
 
 
-  const gui = new dat.GUI();
 
+  const gui = new GUI();
 
   gui.add(camera, 'zoom', 0.01, 1, 0.01).listen();
 
   const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
 
   gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near');
 
   gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far');
 
 
-  const controls = new THREE.OrbitControls(camera, view1Elem);
 
+  const controls = new OrbitControls(camera, view1Elem);
 
   controls.target.set(0, 5, 0);
 
   controls.update();
 
 
@@ -101,7 +98,7 @@ function main() {
 
   camera2.position.set(16, 28, 40);
 
   camera2.lookAt(0, 5, 0);
 
 
-  const controls2 = new THREE.OrbitControls(camera2, view2Elem);
 
+  const controls2 = new OrbitControls(camera2, view2Elem);
 
   controls2.target.set(0, 5, 0);
 
   controls2.update();

+ 4 - 7
threejs/threejs-cameras-orthographic-canvas-top-left-origin.html
View File 

@@ -32,13 +32,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="../3rdparty/dat.gui.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import { GUI } from '../3rdparty/dat.gui.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 7 - 10
threejs/threejs-cameras-perspective-2-scenes.html
View File 

@@ -36,13 +36,10 @@
 
        <div id="view2" tabindex="2"></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="../3rdparty/dat.gui.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE, dat */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import { GUI } from '../3rdparty/dat.gui.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -82,13 +79,13 @@ function main() {
 
     }
 
   }
 
 
-  const gui = new dat.GUI();
 
+  const gui = new GUI();
 
   gui.add(camera, 'fov', 1, 180);
 
   const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
 
   gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near');
 
   gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far');
 
 
-  const controls = new THREE.OrbitControls(camera, view1Elem);
 
+  const controls = new OrbitControls(camera, view1Elem);
 
   controls.target.set(0, 5, 0);
 
   controls.update();
 
 
@@ -101,7 +98,7 @@ function main() {
 
   camera2.position.set(40, 10, 30);
 
   camera2.lookAt(0, 5, 0);
 
 
-  const controls2 = new THREE.OrbitControls(camera2, view2Elem);
 
+  const controls2 = new OrbitControls(camera2, view2Elem);
 
   controls2.target.set(0, 5, 0);
 
   controls2.update();

+ 6 - 9
threejs/threejs-cameras-perspective.html
View File 

@@ -20,13 +20,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="../3rdparty/dat.gui.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE, dat */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import { GUI } from '../3rdparty/dat.gui.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -66,13 +63,13 @@ function main() {
 
     camera.updateProjectionMatrix();
 
   }
 
 
-  const gui = new dat.GUI();
 
+  const gui = new GUI();
 
   gui.add(camera, 'fov', 1, 180).onChange(updateCamera);
 
   const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
 
   gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near').onChange(updateCamera);
 
   gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far').onChange(updateCamera);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 5, 0);
 
   controls.update();

+ 6 - 9
threejs/threejs-cameras-z-fighting.html
View File 

@@ -20,13 +20,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="../3rdparty/dat.gui.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE, dat */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import { GUI } from '../3rdparty/dat.gui.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -65,13 +62,13 @@ function main() {
 
     camera.updateProjectionMatrix();
 
   }
 
 
-  const gui = new dat.GUI();
 
+  const gui = new GUI();
 
   gui.add(camera, 'fov', 1, 180).onChange(updateCamera);
 
   const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
 
   gui.add(minMaxGUIHelper, 'min', 0.00001, 50, 0.00001).name('near').onChange(updateCamera);
 
   gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far').onChange(updateCamera);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 5, 0);
 
   controls.update();

+ 2 - 5
threejs/threejs-canvas-textured-cube-qix.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-canvas-textured-cube.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 4 - 8
threejs/threejs-canvas-textured-labels-one-canvas.html
View File 

@@ -19,12 +19,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -37,7 +34,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 2, 5);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 2, 0);
 
   controls.update();
 
 
@@ -177,7 +174,6 @@ function main() {
 
     return needResize;
 
   }
 
 
-
 
   function render() {
 
     if (resizeRendererToDisplaySize(renderer)) {
 
       const canvas = renderer.domElement;

+ 4 - 8
threejs/threejs-canvas-textured-labels-scale-to-fit.html
View File 

@@ -19,12 +19,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -37,7 +34,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 2, 5);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 2, 0);
 
   controls.update();
 
 
@@ -162,7 +159,6 @@ function main() {
 
     return needResize;
 
   }
 
 
-
 
   function render() {
 
     if (resizeRendererToDisplaySize(renderer)) {
 
       const canvas = renderer.domElement;

+ 4 - 8
threejs/threejs-canvas-textured-labels.html
View File 

@@ -19,12 +19,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -37,7 +34,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 2, 5);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 2, 0);
 
   controls.update();
 
 
@@ -154,7 +151,6 @@ function main() {
 
     return needResize;
 
   }
 
 
-
 
   function render() {
 
     if (resizeRendererToDisplaySize(renderer)) {
 
       const canvas = renderer.domElement;

+ 4 - 7
threejs/threejs-cleanup-loaded-files.html
View File 

@@ -24,13 +24,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/loaders/GLTFLoader.js"></script>
 
-<script>
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {GLTFLoader} from './resources/threejs/r108/examples/jsm/loaders/GLTFLoader.js';
 
 
-'use strict';
 
-
 
-/* global THREE */
 
 
 class ResourceTracker {
 
   constructor() {
 
@@ -145,7 +142,7 @@ function main() {
 
     camera.lookAt(boxCenter.x, boxCenter.y, boxCenter.z);
 
   }
 
 
-  const gltfLoader = new THREE.GLTFLoader();
 
+  const gltfLoader = new GLTFLoader();
 
   function loadGLTF(url) {
 
     return new Promise((resolve, reject) => {
 
       gltfLoader.load(url, resolve, undefined, reject);

+ 3 - 6
threejs/threejs-cleanup-simple.html
View File 

@@ -24,13 +24,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/loaders/GLTFLoader.js"></script>
 
-<script>
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {GLTFLoader} from './resources/threejs/r108/examples/jsm/loaders/GLTFLoader.js';
 
 
-'use strict';
 
-
 
-/* global THREE */
 
 
 class ResourceTracker {
 
   constructor() {

+ 2 - 5
threejs/threejs-custom-buffergeometry-cube-indexed.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-custom-buffergeometry-cube-typedarrays.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-custom-buffergeometry-cube.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-custom-buffergeometry-dynamic.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-custom-geometry-cube-face-colors.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-custom-geometry-cube-face-normals.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-custom-geometry-cube-texcoords.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-custom-geometry-cube-vertex-colors.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-custom-geometry-cube-vertex-normals.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-custom-geometry-cube.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 4 - 7
threejs/threejs-custom-geometry-heightmap.html
View File 

@@ -19,12 +19,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -37,7 +34,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(20, 20, 20);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 0, 0);
 
   controls.update();

+ 2 - 5
threejs/threejs-debug-js-clearing-logger.html
View File 

@@ -32,11 +32,8 @@
 
       <pre></pre>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 class ClearingLogger {
 
   constructor(elem) {

+ 2 - 5
threejs/threejs-debug-js-html-elements.html
View File 

@@ -33,11 +33,8 @@
 
       <div>z:<span id="z"></span></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-debug-js-params.html
View File 

@@ -43,11 +43,8 @@
 
     </div>
 
     <div id="info">click to launch</div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 /**
 
   * Returns the query parameters as a key/value object.

+ 4 - 7
threejs/threejs-debugging-mcve.html
View File 

@@ -1,12 +1,9 @@
 
 <body>
 
   <canvas id="c"></canvas>
 
 </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -19,7 +16,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 1000, 2000);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 5, 0);
 
   controls.update();

+ 4 - 7
threejs/threejs-fog-gui.html
View File 

@@ -19,17 +19,14 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="../3rdparty/dat.gui.min.js"></script>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE, dat */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import { GUI } from '../3rdparty/dat.gui.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
   const renderer = new THREE.WebGLRenderer({canvas});
 
-  const gui = new dat.GUI();
 
+  const gui = new GUI();
 
 
   const fov = 75;
 
   const aspect = 2;  // the canvas default

+ 2 - 5
threejs/threejs-fog.html
View File 

@@ -19,11 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-fundamentals-3-cubes.html
View File 

@@ -9,11 +9,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-fundamentals-with-animation.html
View File 

@@ -9,11 +9,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-fundamentals-with-light.html
View File 

@@ -9,11 +9,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 2 - 5
threejs/threejs-fundamentals.html
View File 

@@ -9,11 +9,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');

+ 8 - 11
threejs/threejs-game-check-animations.html
View File 

@@ -73,14 +73,11 @@
 
       </div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r108/js/loaders/GLTFLoader.js"></script>
 
-<script src="resources/threejs/r108/js/utils/SkeletonUtils.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import {GLTFLoader} from './resources/threejs/r108/examples/jsm/loaders/GLTFLoader.js';
 
+import {SkeletonUtils} from './resources/threejs/r108/examples/jsm/utils/SkeletonUtils.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -93,7 +90,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 20, 40);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 5, 0);
 
   controls.update();
 
 
@@ -130,7 +127,7 @@ function main() {
 
     knight: { url: 'resources/models/knight/KnightCharacter.gltf' },
 
   };
 
   {
 
-    const gltfLoader = new THREE.GLTFLoader(manager);
 
+    const gltfLoader = new GLTFLoader(manager);
 
     for (const model of Object.values(models)) {
 
       gltfLoader.load(model.url, (gltf) => {
 
         model.gltf = gltf;
 
@@ -158,7 +155,7 @@ function main() {
 
     prepModelsAndAnimations();
 
 
     Object.values(models).forEach((model, ndx) => {
 
-      const clonedScene = THREE.SkeletonUtils.clone(model.gltf.scene);
 
+      const clonedScene = SkeletonUtils.clone(model.gltf.scene);
 
       const root = new THREE.Object3D();
 
       root.add(clonedScene);
 
       scene.add(root);

+ 10 - 13
threejs/threejs-game-conga-line-w-notes.html
View File 

@@ -149,15 +149,12 @@
 
     </div>
 
     <div id="labels"></div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r108/js/loaders/GLTFLoader.js"></script>
 
-<script src="resources/threejs/r108/js/utils/SkeletonUtils.js"></script>
 
-<script src="../3rdparty/dat.gui.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE, dat */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import {GLTFLoader} from './resources/threejs/r108/examples/jsm/loaders/GLTFLoader.js';
 
+import {SkeletonUtils} from './resources/threejs/r108/examples/jsm/utils/SkeletonUtils.js';
 
+import { GUI } from '../3rdparty/dat.gui.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -170,7 +167,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 40, 80);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.enableKeys = false;
 
   controls.target.set(0, 5, 0);
 
   controls.update();
 
@@ -208,7 +205,7 @@ function main() {
 
     knight: { url: 'resources/models/knight/KnightCharacter.gltf' },
 
   };
 
   {
 
-    const gltfLoader = new THREE.GLTFLoader(manager);
 
+    const gltfLoader = new GLTFLoader(manager);
 
     for (const model of Object.values(models)) {
 
       gltfLoader.load(model.url, (gltf) => {
 
         model.gltf = gltf;
 
@@ -573,7 +570,7 @@ function main() {
 
     constructor(gameObject, model) {
 
       super(gameObject);
 
       this.model = model;
 
-      this.animRoot = THREE.SkeletonUtils.clone(this.model.gltf.scene);
 
+      this.animRoot = SkeletonUtils.clone(this.model.gltf.scene);
 
       this.mixer = new THREE.AnimationMixer(this.animRoot);
 
       gameObject.transform.add(this.animRoot);
 
       this.actions = {};
 
@@ -623,7 +620,7 @@ function main() {
 
     }
 
   }
 
 
-  const gui = new dat.GUI();
 
+  const gui = new GUI();
 
   gui.add(globals, 'debug').onChange(showHideDebugInfo);
 
   gui.close();

+ 10 - 13
threejs/threejs-game-conga-line.html
View File 

@@ -149,15 +149,12 @@
 
     </div>
 
     <div id="labels"></div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r108/js/loaders/GLTFLoader.js"></script>
 
-<script src="resources/threejs/r108/js/utils/SkeletonUtils.js"></script>
 
-<script src="../3rdparty/dat.gui.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE, dat */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import {GLTFLoader} from './resources/threejs/r108/examples/jsm/loaders/GLTFLoader.js';
 
+import {SkeletonUtils} from './resources/threejs/r108/examples/jsm/utils/SkeletonUtils.js';
 
+import { GUI } from '../3rdparty/dat.gui.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -170,7 +167,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 40, 80);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.enableKeys = false;
 
   controls.target.set(0, 5, 0);
 
   controls.update();
 
@@ -208,7 +205,7 @@ function main() {
 
     knight: { url: 'resources/models/knight/KnightCharacter.gltf' },
 
   };
 
   {
 
-    const gltfLoader = new THREE.GLTFLoader(manager);
 
+    const gltfLoader = new GLTFLoader(manager);
 
     for (const model of Object.values(models)) {
 
       gltfLoader.load(model.url, (gltf) => {
 
         model.gltf = gltf;
 
@@ -498,7 +495,7 @@ function main() {
 
     constructor(gameObject, model) {
 
       super(gameObject);
 
       this.model = model;
 
-      this.animRoot = THREE.SkeletonUtils.clone(this.model.gltf.scene);
 
+      this.animRoot = SkeletonUtils.clone(this.model.gltf.scene);
 
       this.mixer = new THREE.AnimationMixer(this.animRoot);
 
       gameObject.transform.add(this.animRoot);
 
       this.actions = {};
 
@@ -548,7 +545,7 @@ function main() {
 
     }
 
   }
 
 
-  const gui = new dat.GUI();
 
+  const gui = new GUI();
 
   gui.add(globals, 'debug').onChange(showHideDebugInfo);
 
 
   const labelContainerElem = document.querySelector('#labels');

+ 8 - 11
threejs/threejs-game-just-player.html
View File 

@@ -79,14 +79,11 @@
 
       </div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r108/js/loaders/GLTFLoader.js"></script>
 
-<script src="resources/threejs/r108/js/utils/SkeletonUtils.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import {GLTFLoader} from './resources/threejs/r108/examples/jsm/loaders/GLTFLoader.js';
 
+import {SkeletonUtils} from './resources/threejs/r108/examples/jsm/utils/SkeletonUtils.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -99,7 +96,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 40, 80);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.enableKeys = false;
 
   controls.target.set(0, 5, 0);
 
   controls.update();
 
@@ -137,7 +134,7 @@ function main() {
 
     knight: { url: 'resources/models/knight/KnightCharacter.gltf' },
 
   };
 
   {
 
-    const gltfLoader = new THREE.GLTFLoader(manager);
 
+    const gltfLoader = new GLTFLoader(manager);
 
     for (const model of Object.values(models)) {
 
       gltfLoader.load(model.url, (gltf) => {
 
         model.gltf = gltf;
 
@@ -267,7 +264,7 @@ function main() {
 
     constructor(gameObject, model) {
 
       super(gameObject);
 
       this.model = model;
 
-      this.animRoot = THREE.SkeletonUtils.clone(this.model.gltf.scene);
 
+      this.animRoot = SkeletonUtils.clone(this.model.gltf.scene);
 
       this.mixer = new THREE.AnimationMixer(this.animRoot);
 
       gameObject.transform.add(this.animRoot);
 
       this.actions = {};

+ 8 - 11
threejs/threejs-game-load-models.html
View File 

@@ -73,14 +73,11 @@
 
       </div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r108/js/loaders/GLTFLoader.js"></script>
 
-<script src="resources/threejs/r108/js/utils/SkeletonUtils.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import {GLTFLoader} from './resources/threejs/r108/examples/jsm/loaders/GLTFLoader.js';
 
+import {SkeletonUtils} from './resources/threejs/r108/examples/jsm/utils/SkeletonUtils.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -93,7 +90,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 20, 40);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 5, 0);
 
   controls.update();
 
 
@@ -130,7 +127,7 @@ function main() {
 
     knight: { url: 'resources/models/knight/KnightCharacter.gltf' },
 
   };
 
   {
 
-    const gltfLoader = new THREE.GLTFLoader(manager);
 
+    const gltfLoader = new GLTFLoader(manager);
 
     for (const model of Object.values(models)) {
 
       gltfLoader.load(model.url, (gltf) => {
 
         model.gltf = gltf;
 
@@ -158,7 +155,7 @@ function main() {
 
     prepModelsAndAnimations();
 
 
     Object.values(models).forEach((model, ndx) => {
 
-      const clonedScene = THREE.SkeletonUtils.clone(model.gltf.scene);
 
+      const clonedScene = SkeletonUtils.clone(model.gltf.scene);
 
       const root = new THREE.Object3D();
 
       root.add(clonedScene);
 
       scene.add(root);

+ 8 - 11
threejs/threejs-game-player-input.html
View File 

@@ -119,14 +119,11 @@
 
       </div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r108/js/loaders/GLTFLoader.js"></script>
 
-<script src="resources/threejs/r108/js/utils/SkeletonUtils.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import {GLTFLoader} from './resources/threejs/r108/examples/jsm/loaders/GLTFLoader.js';
 
+import {SkeletonUtils} from './resources/threejs/r108/examples/jsm/utils/SkeletonUtils.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -139,7 +136,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 40, 80);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.enableKeys = false;
 
   controls.target.set(0, 5, 0);
 
   controls.update();
 
@@ -177,7 +174,7 @@ function main() {
 
     knight: { url: 'resources/models/knight/KnightCharacter.gltf' },
 
   };
 
   {
 
-    const gltfLoader = new THREE.GLTFLoader(manager);
 
+    const gltfLoader = new GLTFLoader(manager);
 
     for (const model of Object.values(models)) {
 
       gltfLoader.load(model.url, (gltf) => {
 
         model.gltf = gltf;
 
@@ -458,7 +455,7 @@ function main() {
 
     constructor(gameObject, model) {
 
       super(gameObject);
 
       this.model = model;
 
-      this.animRoot = THREE.SkeletonUtils.clone(this.model.gltf.scene);
 
+      this.animRoot = SkeletonUtils.clone(this.model.gltf.scene);
 
       this.mixer = new THREE.AnimationMixer(this.animRoot);
 
       gameObject.transform.add(this.animRoot);
 
       this.actions = {};

+ 5 - 9
threejs/threejs-indexed-textures-picking-and-highlighting.html
View File 

@@ -57,13 +57,10 @@
 
       <div id="labels"></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/utils/BufferGeometryUtils.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {BufferGeometryUtils} from './resources/threejs/r108/examples/jsm/utils/BufferGeometryUtils.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -76,7 +73,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.z = 2.5;
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.enableDamping = true;
 
   controls.enablePan = false;
 
   controls.minDistance = 1.2;
 
@@ -425,7 +422,6 @@ function main() {
 
 
     controls.update();
 
 
-
 
     updateLabels();
 
 
     renderer.render(scene, camera);

+ 5 - 9
threejs/threejs-indexed-textures-picking-debounced.html
View File 

@@ -57,13 +57,10 @@
 
       <div id="labels"></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/utils/BufferGeometryUtils.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {BufferGeometryUtils} from './resources/threejs/r108/examples/jsm/utils/BufferGeometryUtils.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -76,7 +73,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.z = 2.5;
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.enableDamping = true;
 
   controls.enablePan = false;
 
   controls.minDistance = 1.2;
 
@@ -453,7 +450,6 @@ function main() {
 
 
     controls.update();
 
 
-
 
     updateLabels();
 
 
     renderer.render(scene, camera);

+ 5 - 9
threejs/threejs-indexed-textures-picking.html
View File 

@@ -57,13 +57,10 @@
 
       <div id="labels"></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/utils/BufferGeometryUtils.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {BufferGeometryUtils} from './resources/threejs/r108/examples/jsm/utils/BufferGeometryUtils.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -76,7 +73,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.z = 2.5;
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.enableDamping = true;
 
   controls.enablePan = false;
 
   controls.minDistance = 1.2;
 
@@ -356,7 +353,6 @@ function main() {
 
 
     controls.update();
 
 
-
 
     updateLabels();
 
 
     renderer.render(scene, camera);

+ 5 - 9
threejs/threejs-indexed-textures-random-colors.html
View File 

@@ -57,13 +57,10 @@
 
       <div id="labels"></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/utils/BufferGeometryUtils.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {BufferGeometryUtils} from './resources/threejs/r108/examples/jsm/utils/BufferGeometryUtils.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -76,7 +73,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.z = 2.5;
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.enableDamping = true;
 
   controls.enablePan = false;
 
   controls.minDistance = 1.2;
 
@@ -402,7 +399,6 @@ function main() {
 
 
     controls.update();
 
 
-
 
     updateLabels();
 
 
     renderer.render(scene, camera);

+ 6 - 9
threejs/threejs-lights-ambient.html
View File 

@@ -20,13 +20,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="../3rdparty/dat.gui.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE, dat */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import { GUI } from '../3rdparty/dat.gui.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -39,7 +36,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 10, 20);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 5, 0);
 
   controls.update();
 
 
@@ -104,7 +101,7 @@ function main() {
 
     const light = new THREE.AmbientLight(color, intensity);
 
     scene.add(light);
 
 
-    const gui = new dat.GUI();
 
+    const gui = new GUI();
 
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 
     gui.add(light, 'intensity', 0, 2, 0.01);
 
   }

+ 6 - 9
threejs/threejs-lights-directional-w-helper.html
View File 

@@ -20,13 +20,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="../3rdparty/dat.gui.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE, dat */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import { GUI } from '../3rdparty/dat.gui.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -39,7 +36,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 10, 20);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 5, 0);
 
   controls.update();
 
 
@@ -124,7 +121,7 @@ function main() {
 
     }
 
     updateLight();
 
 
-    const gui = new dat.GUI();
 
+    const gui = new GUI();
 
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 
     gui.add(light, 'intensity', 0, 2, 0.01);

+ 6 - 9
threejs/threejs-lights-directional.html
View File 

@@ -20,13 +20,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r108/three.min.js"></script>
 
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
 
-<script src="../3rdparty/dat.gui.min.js"></script>
 
-<script>
 
-'use strict';
 
-
 
-/* global THREE, dat */
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r108/build/three.module.js';
 
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 
+import { GUI } from '../3rdparty/dat.gui.module.js';
 
 
 function main() {
 
   const canvas = document.querySelector('#c');
 
@@ -39,7 +36,7 @@ function main() {
 
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
   camera.position.set(0, 10, 20);
 
 
-  const controls = new THREE.OrbitControls(camera, canvas);
 
+  const controls = new OrbitControls(camera, canvas);
 
   controls.target.set(0, 5, 0);
 
   controls.update();
 
 
@@ -107,7 +104,7 @@ function main() {
 
     scene.add(light);
 
     scene.add(light.target);
 
 
-    const gui = new dat.GUI();
 
+    const gui = new GUI();
 
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 
     gui.add(light, 'intensity', 0, 2, 0.01);
 
     gui.add(light.target.position, 'x', -10, 10);

Some files were not shown because too many files changed in this diff