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

update to r102

Gregg Tavares 6 years ago
parent
70aec366bd
commit
a3aad40d34
100 changed files with 336 additions and 399 deletions
Split View Show Diff Stats
  1. 10 10
      threejs/background.html
  2. 1 1
      threejs/lessons/resources/lesson.css
  3. 3 3
      threejs/lessons/resources/threejs-lesson-utils.js
  4. 2 2
      threejs/lessons/resources/threejs-materials.js
  5. 4 1
      threejs/lessons/resources/threejs-textures.js
  6. 2 2
      threejs/lessons/ru/threejs-cameras.md
  7. 6 6
      threejs/lessons/ru/threejs-lights.md
  8. 2 2
      threejs/lessons/ru/threejs-materials.md
  9. 7 5
      threejs/lessons/ru/threejs-multiple-scenes.md
  10. 2 2
      threejs/lessons/ru/threejs-primitives.md
  11. 2 2
      threejs/lessons/ru/threejs-textures.md
  12. 1 1
      threejs/lessons/threejs-backgrounds.md
  13. 5 4
      threejs/lessons/threejs-cameras.md
  14. 3 3
      threejs/lessons/threejs-fog.md
  15. 11 9
      threejs/lessons/threejs-lights.md
  16. 4 4
      threejs/lessons/threejs-load-gltf.md
  17. 7 7
      threejs/lessons/threejs-load-obj.md
  18. 2 2
      threejs/lessons/threejs-materials.md
  19. 7 5
      threejs/lessons/threejs-multiple-scenes.md
  20. 4 4
      threejs/lessons/threejs-optimize-lots-of-objects-animated.md
  21. 3 3
      threejs/lessons/threejs-optimize-lots-of-objects.md
  22. 4 1
      threejs/lessons/threejs-picking.md
  23. 8 8
      threejs/lessons/threejs-post-processing.md
  24. 2 2
      threejs/lessons/threejs-primitives.md
  25. 4 4
      threejs/lessons/threejs-rendering-on-demand.md
  26. 3 1
      threejs/lessons/threejs-rendertargets.md
  27. 2 2
      threejs/lessons/threejs-textures.md
  28. 1 1
      threejs/threejs-background-css.html
  29. 2 2
      threejs/threejs-background-cubemap.html
  30. 2 2
      threejs/threejs-background-equirectangularmap.html
  31. 1 1
      threejs/threejs-background-separate-scene-bad-aspect.html
  32. 1 1
      threejs/threejs-background-separate-scene.html
  33. 2 2
      threejs/threejs-cameras-logarithmic-depth-buffer.html
  34. 5 4
      threejs/threejs-cameras-orthographic-2-scenes.html
  35. 2 2
      threejs/threejs-cameras-orthographic-canvas-top-left-origin.html
  36. 5 4
      threejs/threejs-cameras-perspective-2-scenes.html
  37. 2 2
      threejs/threejs-cameras-perspective.html
  38. 2 2
      threejs/threejs-cameras-z-fighting.html
  39. 1 1
      threejs/threejs-debug-js-clearing-logger.html
  40. 1 1
      threejs/threejs-debug-js-html-elements.html
  41. 1 1
      threejs/threejs-debug-js-params.html
  42. 2 2
      threejs/threejs-debugging-mcve.html
  43. 1 1
      threejs/threejs-fog-gui.html
  44. 1 1
      threejs/threejs-fog.html
  45. 1 1
      threejs/threejs-fundamentals-3-cubes.html
  46. 1 1
      threejs/threejs-fundamentals-with-animation.html
  47. 1 1
      threejs/threejs-fundamentals-with-light.html
  48. 1 1
      threejs/threejs-fundamentals.html
  49. 2 2
      threejs/threejs-lights-ambient.html
  50. 2 2
      threejs/threejs-lights-directional-w-helper.html
  51. 2 2
      threejs/threejs-lights-directional.html
  52. 2 2
      threejs/threejs-lights-hemisphere.html
  53. 2 2
      threejs/threejs-lights-point-physically-correct.html
  54. 2 2
      threejs/threejs-lights-point.html
  55. 5 5
      threejs/threejs-lights-rectarea.html
  56. 2 2
      threejs/threejs-lights-spot-w-helper.html
  57. 3 3
      threejs/threejs-load-gltf-animated-cars.html
  58. 3 3
      threejs/threejs-load-gltf-car-path-fixed.html
  59. 3 3
      threejs/threejs-load-gltf-car-path.html
  60. 3 3
      threejs/threejs-load-gltf-dump-scenegraph-extra.html
  61. 3 3
      threejs/threejs-load-gltf-dump-scenegraph.html
  62. 3 3
      threejs/threejs-load-gltf-rotate-cars-fixed.html
  63. 3 3
      threejs/threejs-load-gltf-rotate-cars.html
  64. 3 3
      threejs/threejs-load-gltf-shadows.html
  65. 3 3
      threejs/threejs-load-gltf.html
  66. 4 4
      threejs/threejs-load-obj-auto-camera-xz.html
  67. 4 4
      threejs/threejs-load-obj-auto-camera.html
  68. 5 5
      threejs/threejs-load-obj-materials-fixed.html
  69. 5 5
      threejs/threejs-load-obj-materials-windmill2.html
  70. 5 5
      threejs/threejs-load-obj-materials.html
  71. 4 4
      threejs/threejs-load-obj-no-materials.html
  72. 4 4
      threejs/threejs-load-obj-wat.html
  73. 4 15
      threejs/threejs-lots-of-objects-animated.html
  74. 3 14
      threejs/threejs-lots-of-objects-merged-vertexcolors.html
  75. 3 14
      threejs/threejs-lots-of-objects-merged.html
  76. 5 16
      threejs/threejs-lots-of-objects-morphtargets-w-colors.html
  77. 4 15
      threejs/threejs-lots-of-objects-morphtargets.html
  78. 3 14
      threejs/threejs-lots-of-objects-multiple-data-sets.html
  79. 2 13
      threejs/threejs-lots-of-objects-slow.html
  80. 5 4
      threejs/threejs-multiple-scenes-controls.html
  81. 4 3
      threejs/threejs-multiple-scenes-generic.html
  82. 4 3
      threejs/threejs-multiple-scenes-selector.html
  83. 4 3
      threejs/threejs-multiple-scenes-v1.html
  84. 4 3
      threejs/threejs-multiple-scenes-v2.html
  85. 4 3
      threejs/threejs-multiple-scenes-v3.html
  86. 4 2
      threejs/threejs-picking-gpu.html
  87. 1 1
      threejs/threejs-picking-raycaster-complex-geo.html
  88. 1 1
      threejs/threejs-picking-raycaster-transparency.html
  89. 1 1
      threejs/threejs-picking-raycaster.html
  90. 7 7
      threejs/threejs-postprocessing-3dlut-identity.html
  91. 3 3
      threejs/threejs-postprocessing-3dlut-prep.html
  92. 7 7
      threejs/threejs-postprocessing-3dlut-w-loader.html
  93. 7 7
      threejs/threejs-postprocessing-3dlut.html
  94. 5 5
      threejs/threejs-postprocessing-adobe-lut-to-png-converter.html
  95. 5 5
      threejs/threejs-postprocessing-custom.html
  96. 9 9
      threejs/threejs-postprocessing-gui.html
  97. 9 9
      threejs/threejs-postprocessing.html
  98. 1 1
      threejs/threejs-primitives-text.html
  99. 1 1
      threejs/threejs-primitives.html
  100. 2 13
      threejs/threejs-render-on-demand-w-damping.html

+ 10 - 10
threejs/background.html
View File 

@@ -21,16 +21,16 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/SSAOShader.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/CopyShader.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/EffectComposer.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/RenderPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/ShaderPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/MaskPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/SSAOPass.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/GLTFLoader.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/SSAOShader.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/CopyShader.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/EffectComposer.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/RenderPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/ShaderPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/MaskPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/SSAOPass.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
 <script>
 
 'use strict';

+ 1 - 1
threejs/lessons/resources/lesson.css
View File 

@@ -18,7 +18,7 @@ table {
 
 }
 
 
 pre {
 
-  background: #CCC;
 
+  background: rgb(143, 140, 140);
 
   padding: 1em;
 
 }
 
 pre>code {

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

@@ -180,7 +180,7 @@ window.threejsLessonUtils = {
 
       renderInfo.width = (rect.right - rect.left) * this.pixelRatio;
 
       renderInfo.height = (rect.bottom - rect.top) * this.pixelRatio;
 
       renderInfo.left = rect.left * this.pixelRatio;
 
-      renderInfo.top = rect.top * this.pixelRatio;
 
+      renderInfo.bottom = (renderer.domElement.clientHeight - rect.bottom) * this.pixelRatio;
 
 
       if (renderInfo.width !== oldWidth || renderInfo.height !== oldHeight) {
 
         oldWidth = renderInfo.width;
 
@@ -199,8 +199,8 @@ window.threejsLessonUtils = {
 
       camera.aspect = aspect;
 
       camera.updateProjectionMatrix();
 
 
-      renderer.setViewport(renderInfo.left, renderInfo.top, renderInfo.width, renderInfo.height);
 
-      renderer.setScissor(renderInfo.left, renderInfo.top, renderInfo.width, renderInfo.height);
 
+      renderer.setViewport(renderInfo.left, renderInfo.bottom, renderInfo.width, renderInfo.height);
 
+      renderer.setScissor(renderInfo.left, renderInfo.bottom, renderInfo.width, renderInfo.height);
 
 
       settings.render(renderInfo);
 
     };

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

@@ -94,7 +94,7 @@
 
         const width = (rect.right - rect.left) * renderInfo.pixelRatio;
 
         const height = (rect.bottom - rect.top) * renderInfo.pixelRatio;
 
         const left = rect.left * renderInfo.pixelRatio;
 
-        const top = rect.top * renderInfo.pixelRatio;
 
+        const bottom = (renderer.domElement.clientHeight - rect.bottom) * renderInfo.pixelRatio;
 
 
         const cellSize = Math.min(width / numRough, height / numMetal) | 0;
 
         const xOff = (width - cellSize * numRough) / 2;
 
@@ -110,7 +110,7 @@
 
         for (let m = 0; m < numMetal; ++m) {
 
           for (let r = 0; r < numRough; ++r) {
 
             const x = left + xOff + r * cellSize;
 
-            const y = top + yOff + m * cellSize;
 
+            const y = bottom + yOff + m * cellSize;
 
             renderer.setViewport(x, y, cellSize, cellSize);
 
             renderer.setScissor(x, y, cellSize, cellSize);
 
             const mesh = meshes[m][r];

+ 4 - 1
threejs/lessons/resources/threejs-textures.js
View File 

@@ -64,7 +64,10 @@
 
         camera.aspect = rtWidth / rtHeight;
 
         camera.updateProjectionMatrix();
 
 
-        renderer.render(scene, camera, renderTarget);
 
+        renderer.setRenderTarget(renderTarget);
 
+
 
+        renderer.render(scene, camera);
 
+        renderer.setRenderTarget(null);
 
       },
 
       render(renderInfo) {
 
         const { width, height, renderer, pixelRatio } = renderInfo;

+ 2 - 2
threejs/lessons/ru/threejs-cameras.md
View File 

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

+ 6 - 6
threejs/lessons/ru/threejs-lights.md
View File 

@@ -28,8 +28,8 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
 включить их в нашу страницу.
 
 
 ```html
 
-<script src="../resources/threejs/r98/three.min.js"></script>
 
-+<script src="../resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="../resources/threejs/r102/three.min.js"></script>
 
++<script src="../resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 ```
 
 
 Теперь мы можем использовать их. Мы передаем в `OrbitControls` камеру для 
@@ -468,8 +468,8 @@ gui.add(light, 'penumbra', 0, 1, 0.01);
 
 Для использования `RectAreaLight` нам нужно включить некоторые дополнительные возможности three.js
 
 
 ```html
 
-<script src="../resources/threejs/r98/three.min.js"></script>
 
-+<script src="../resources/threejs/r98/js/lights/RectAreaLightUniformsLib.js"></script>
 
+<script src="../resources/threejs/r102/three.min.js"></script>
 
++<script src="../resources/threejs/r102/js/lights/RectAreaLightUniformsLib.js"></script>
 
 ```
 
 
 Если вы забудете RectAreaLightUniformsLib, индикатор все равно будет работать, 
@@ -564,7 +564,7 @@ gui.add(light, 'power', 0, 2000);
 
 Далее давайте перейдем к  [работе с камерами](threejs-cameras.html).
 
 
 <canvas id="c"></canvas>
 
-<script src="../../resources/threejs/r98/three.min.js"></script>
 
-<script src="../../resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="../../resources/threejs/r102/three.min.js"></script>
 
+<script src="../../resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../resources/threejs-lesson-utils.js"></script>
 
 <script src="../resources/threejs-lights.js"></script>

+ 2 - 2
threejs/lessons/ru/threejs-materials.md
View File 

@@ -317,8 +317,8 @@ flat shaded
 
 </div>
 
 
 <canvas id="c"></canvas>
 
-<script src="../../resources/threejs/r98/three.min.js"></script>
 
-<script src="../../resources/threejs/r98/js/controls/TrackballControls.js"></script>
 
+<script src="../../resources/threejs/r102/three.min.js"></script>
 
+<script src="../../resources/threejs/r102/js/controls/TrackballControls.js"></script>
 
 <script src="../resources/threejs-lesson-utils.js"></script>
 
 <script src="../resources/threejs-materials.js"></script>

+ 7 - 5
threejs/lessons/ru/threejs-multiple-scenes.md
View File 

@@ -168,8 +168,9 @@ function rendenerSceneInfo(sceneInfo) {
 
   camera.aspect = width / height;
 
   camera.updateProjectionMatrix();
 
 
-  renderer.setViewport(left, top, width, height);
 
-  renderer.setScissor(left, top, width, height);
 
+  const positiveYUpBottom = renderer.domElement.clientHeight - bottom;
 
+  renderer.setScissor(left, positiveYUpBottom, width, height);
 
+  renderer.setViewport(left, positiveYUpBottom, width, height);
 
 
   renderer.render(scene, camera);
 
 }
 
@@ -313,8 +314,9 @@ function render(time) {
 
         left > renderer.domElement.clientWidth;
 
 
     if (!isOffscreen) {
 
-      renderer.setViewport(left, top, width, height);
 
-      renderer.setScissor(left, top, width, height);
 
+      const positiveYUpBottom = renderer.domElement.clientHeight - bottom;
 
+      renderer.setScissor(left, positiveYUpBottom, width, height);
 
+      renderer.setViewport(left, positiveYUpBottom, width, height);
 
 
       fn(time, rect);
 
     }
 
@@ -469,7 +471,7 @@ document.querySelectorAll('[data-diagram]').forEach((elem) => {
 
 Сначала мы добавляем скрипт для контролов.
 
 
 ```html
 
-<script src="../resources/threejs/r98/js/controls/TrackballControls.js"></script>
 
+<script src="../resources/threejs/r102/js/controls/TrackballControls.js"></script>
 
 ```
 
 
 И затем мы можем добавить `TrackballControls` к каждой сцене, передавая элемент, связанный с этой сценой.

+ 2 - 2
threejs/lessons/ru/threejs-primitives.md
View File 

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

+ 2 - 2
threejs/lessons/ru/threejs-textures.md
View File 

@@ -615,8 +615,8 @@ roughness
 
 -->
 
 
 <canvas id="c"></canvas>
 
-<script src="../../resources/threejs/r98/three.min.js"></script>
 
-<script src="../../resources/threejs/r98/js/controls/TrackballControls.js"></script>
 
+<script src="../../resources/threejs/r102/three.min.js"></script>
 
+<script src="../../resources/threejs/r102/js/controls/TrackballControls.js"></script>
 
 <script src="../resources/threejs-lesson-utils.js"></script>
 
 <script src="../resources/threejs-textures.js"></script>
 
 <style>

+ 1 - 1
threejs/lessons/threejs-backgrounds.md
View File 

@@ -218,7 +218,7 @@ Note: the box must be larger than the camera's `near` setting but not so large t
 
 Let's add some controls in so we can rotate the camera.
 
 
 ```html
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 ```
 
 
 ```js

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

@@ -197,8 +197,9 @@ function setScissorForElement(elem) {
 
   const height = Math.min(canvasRect.height, bottom - top);
 
 
   // setup the scissor to only render to that part of the canvas
 
-  renderer.setScissor(left, top, width, height);
 
-  renderer.setViewport(left, top, width, height);
 
+  const positiveYUpBottom = canvasRect.height - bottom;
 
+  renderer.setScissor(left, positiveYUpBottom, width, height);
 
+  renderer.setViewport(left, positiveYUpBottom, width, height);
 
 
   // return the aspect
 
   return width / height;
 
@@ -595,7 +596,7 @@ That's the fundamentals of cameras. We'll cover a few common ways to move camera
 
 in other articles. For now lets move on to [shadows](threejs-shadows.html).
 
 
 <canvas id="c"></canvas>
 
-<script src="../resources/threejs/r98/three.min.js"></script>
 
-<script src="../resources/threejs/r98/js/controls/TrackballControls.js"></script>
 
+<script src="../resources/threejs/r102/three.min.js"></script>
 
+<script src="../resources/threejs/r102/js/controls/TrackballControls.js"></script>
 
 <script src="resources/threejs-lesson-utils.js"></script>
 
 <script src="resources/threejs-cameras.js"></script>

+ 3 - 3
threejs/lessons/threejs-fog.md
View File 

@@ -271,8 +271,8 @@ By turing fog of on the materials for the house we can fix that issue.
 
 </div>
 
 
 <canvas id="c"></canvas>
 
-<script src="../resources/threejs/r98/three.min.js"></script>
 
-<script src="../resources/threejs/r98/js/controls/TrackballControls.js"></script>
 
-<script src="../resources/threejs/r98/js/loaders/GLTFLoader.js"></script>
 
+<script src="../resources/threejs/r102/three.min.js"></script>
 
+<script src="../resources/threejs/r102/js/controls/TrackballControls.js"></script>
 
+<script src="../resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
 <script src="resources/threejs-lesson-utils.js"></script>
 
 <script src="resources/threejs-fog.js"></script>

+ 11 - 9
threejs/lessons/threejs-lights.md
View File 

@@ -28,8 +28,8 @@ an optional feature of three.js so first we need to include them
 
 in our page
 
 
 ```html
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-+<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
++<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 ```
 
 
 Then we can use them. We pass the `OrbitControls` a camera to 
@@ -475,8 +475,8 @@ The `RectAreaLight` only works with the `MeshStandardMaterai` and the
 
 To use the `RectAreaLight` we need to include some extra three.js optional data
 
 
 ```html
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-+<script src="resources/threejs/r98/js/lights/RectAreaLightUniformsLib.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
++<script src="resources/threejs/r102/js/lights/RectAreaLightUniformsLib.js"></script>
 
 ```
 
 
 If you forget the data the light will still work but it will look funny so
 
@@ -491,15 +491,17 @@ const color = 0xFFFFFF;
 
 +const height = 4;
 
 *const light = new THREE.RectAreaLight(color, intensity, width, height);
 
 light.position.set(0, 10, 0);
 
-+light.rotation.x = THREE.Math.degToRad(30);
 
++light.rotation.x = THREE.Math.degToRad(-90);
 
 scene.add(light);
 
 
 *const helper = new THREE.RectAreaLightHelper(light);
 
-scene.add(helper);
 
+*light.add(helper);
 
 ```
 
 
 One thing to notice is that unlike the `DirectionalLight` and the `SpotLight` the
 
-`RectAreaLight` does not use a target. It just uses its rotation.
 
+`RectAreaLight` does not use a target. It just uses its rotation. Another thing
 
+to notice is the helper needs to be a child of the light. It is not a child of the
 
+scene like other helpers.
 
 
 Let's also adjust the GUI. We'll make it so we can rotate the light and adjust
 
 its `width` and `height`
 
@@ -571,7 +573,7 @@ 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/r98/three.min.js"></script>
 
-<script src="../resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="../resources/threejs/r102/three.min.js"></script>
 
+<script src="../resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="resources/threejs-lesson-utils.js"></script>
 
 <script src="resources/threejs-lights.js"></script>

+ 4 - 4
threejs/lessons/threejs-load-gltf.md
View File 

@@ -100,10 +100,10 @@ I kept the auto framing code as before
 
 We also need to include the `GLTFLoader` and we can get rid of the `OBJLoader2`.
 
 
 ```html
 
--<script src="resources/threejs/r98/js/loaders/LoaderSupport.js"></script>
 
--<script src="resources/threejs/r98/js/loaders/OBJLoader2.js"></script>
 
--<script src="resources/threejs/r98/js/loaders/MTLLoader.js"></script>
 
-+<script src="resources/threejs/r98/js/loaders/GLTFLoader.js"></script>
 
+-<script src="resources/threejs/r102/js/loaders/LoaderSupport.js"></script>
 
+-<script src="resources/threejs/r102/js/loaders/OBJLoader2.js"></script>
 
+-<script src="resources/threejs/r102/js/loaders/MTLLoader.js"></script>
 
++<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
 ```
 
 
 And running that we get

+ 7 - 7
threejs/lessons/threejs-load-obj.md
View File 

@@ -45,8 +45,8 @@ that were being added to the scene.
 
 From that the first thing we need to do is include the `OBJLoader2` loader in our scene. The `OBJLoader2` also needs the `LoadingSupport.js` file so let's add both.
 
 
 ```html
 
-<script src="resources/threejs/r98/js/loaders/LoadingSupport.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/OBJLoader2.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/LoadingSupport.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/OBJLoader2.js"></script>
 
 ```
 
 
 Then to load the .OBJ file we create an instance of `OBJLoader2`,
 
@@ -144,11 +144,11 @@ Now that we have the textures available we can load the .MTL file.
 
 First we need to include the `MTLLoader`
 
 
 ```html
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/LoaderSupport.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/OBJLoader2.js"></script>
 
-+<script src="resources/threejs/r98/js/loaders/MTLLoader.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/LoaderSupport.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/OBJLoader2.js"></script>
 
++<script src="resources/threejs/r102/js/loaders/MTLLoader.js"></script>
 
 ```
 
 
 Then we first load the .MTL file. When it's finished loading we set the just loaded materials on to the `OBJLoader2` itself and then load the .OBJ file.

+ 2 - 2
threejs/lessons/threejs-materials.md
View File 

@@ -303,8 +303,8 @@ switch from using one to using the other.
 
 </div>
 
 
 <canvas id="c"></canvas>
 
-<script src="../resources/threejs/r98/three.min.js"></script>
 
-<script src="../resources/threejs/r98/js/controls/TrackballControls.js"></script>
 
+<script src="../resources/threejs/r102/three.min.js"></script>
 
+<script src="../resources/threejs/r102/js/controls/TrackballControls.js"></script>
 
 <script src="resources/threejs-lesson-utils.js"></script>
 
 <script src="resources/threejs-materials.js"></script>

+ 7 - 5
threejs/lessons/threejs-multiple-scenes.md
View File 

@@ -163,8 +163,9 @@ function rendenerSceneInfo(sceneInfo) {
 
   camera.aspect = width / height;
 
   camera.updateProjectionMatrix();
 
 
-  renderer.setViewport(left, top, width, height);
 
-  renderer.setScissor(left, top, width, height);
 
+  const positiveYUpBottom = canvasRect.height - bottom;
 
+  renderer.setScissor(left, positiveYUpBottom, width, height);
 
+  renderer.setViewport(left, positiveYUpBottom, width, height);
 
 
   renderer.render(scene, camera);
 
 }
 
@@ -293,8 +294,9 @@ function render(time) {
 
         left > renderer.domElement.clientWidth;
 
 
     if (!isOffscreen) {
 
-      renderer.setViewport(left, top, width, height);
 
-      renderer.setScissor(left, top, width, height);
 
+      const positiveYUpBottom = renderer.domElement.clientHeight - bottom;
 
+      renderer.setScissor(left, positiveYUpBottom, width, height);
 
+      renderer.setViewport(left, positiveYUpBottom, width, height);
 
 
       fn(time, rect);
 
     }
 
@@ -441,7 +443,7 @@ No change to the visuals but the code is even more generic.
 
 Adding interactively, for example a `TrackballControls` is just as easy. First we add the script for the control.
 
 
 ```html
 
-<script src="resources/threejs/r98/js/controls/TrackballControls.js"></script>
 
+<script src="resources/threejs/r102/js/controls/TrackballControls.js"></script>
 
 ```
 
 
 And then we can add a `TrackballControls` to each scene passing in the element associated with that scene.

+ 4 - 4
threejs/lessons/threejs-optimize-lots-of-objects-animated.md
View File 

@@ -377,10 +377,10 @@ because the original webgl globe uses
 
 We need to include the library
 
 
 ```html
 
-<script src="resources/threejs/r98/three.js"></script>
 
-<script src="resources/threejs/r98/js/utils/BufferGeometryUtils.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-+<script src="resources/threejs/r98/js/libs/tween.min.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/utils/BufferGeometryUtils.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
++<script src="resources/threejs/r102/js/libs/tween.min.js"></script>
 
 ```
 
 
 And then create a `Tween` to animate the influences.

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

@@ -428,7 +428,7 @@ them into a single mesh.
 
 We also need to include the `BufferGeometryUtils`
 
 
 ```html
 
-<script src="resources/threejs/r98/js/utils/BufferGeometryUtils.js"></script>
 
+<script src="resources/threejs/r102/js/utils/BufferGeometryUtils.js"></script>
 
 ```
 
 
 And now, at least on my machine, I get 60 frames per second
 
@@ -531,8 +531,8 @@ 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/r98/three.min.js"></script>
 
-<script src="../resources/threejs/r98/js/controls/TrackballControls.js"></script>
 
+<script src="../resources/threejs/r102/three.min.js"></script>
 
+<script src="../resources/threejs/r102/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>

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

@@ -357,7 +357,10 @@ Then let's change the `PickHelper` into a `GPUPickHelper`. It will use a `WebGLR
 
 +        1,                                     // rect height
 
 +    );
 
 +    // render the scene
 
-+    renderer.render(scene, camera, pickingTexture);
 
++    renderer.setRenderTarget(pickingTexture)
 
++    renderer.render(scene, camera);
 
++    renderer.setRenderTarget(null);
 
++
 
 +    // clear the view offset so rendering returns to normal
 
 +    camera.clearViewOffset();
 
 +    //read the pixel

+ 8 - 8
threejs/lessons/threejs-post-processing.md
View File 

@@ -81,14 +81,14 @@ Since the `filmPass` is the last pass we set its `renderToScreen` property to tr
 
 To use these classes we need to include a bunch of scripts.
 
 
 ```html
 
-<script src="resources/threejs/r98/js/shaders/CopyShader.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/ConvolutionShader.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/FilmShader.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/EffectComposer.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/RenderPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/ShaderPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/BloomPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/FilmPass.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/CopyShader.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/ConvolutionShader.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/FilmShader.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/EffectComposer.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/RenderPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/ShaderPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/BloomPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/FilmPass.js"></script>
 
 ```
 
 
 For pretty much any post processing `EffectComposer.js`, `RenderPass.js`, `ShaderPass.js`, and `CopyShader.js` are required. The rest depend on which effects you plan to use.

+ 2 - 2
threejs/lessons/threejs-primitives.md
View File 

@@ -338,8 +338,8 @@ 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/r98/three.min.js"></script>
 
-<script src="../resources/threejs/r98/js/controls/TrackballControls.js"></script>
 
+<script src="../resources/threejs/r102/three.min.js"></script>
 
+<script src="../resources/threejs/r102/js/controls/TrackballControls.js"></script>
 
 <script src="resources/threejs-lesson-utils.js"></script>
 
 <script src="resources/threejs-primitives.js"></script>
 
 <style>

+ 4 - 4
threejs/lessons/threejs-rendering-on-demand.md
View File 

@@ -29,8 +29,8 @@ First we'll add in the `OrbitControls` so there is something that could change
 
 that we can render in response to.
 
 
 ```html
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-+<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
++<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 ```
 
 
 and set them up
 
@@ -181,8 +181,8 @@ below slides.
 
 Let's also add a simple dat.GUI GUI and make its changes render on demand.
 
 
 ```html
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 +<script src="../3rdparty/dat.gui.min.js"></script>
 
 ```

+ 3 - 1
threejs/lessons/threejs-rendertargets.md
View File 

@@ -94,7 +94,9 @@ function render(time) {
 
   });
 
 
   // draw render target scene to render target
 
-  renderer.render(rtScene, rtCamera, renderTarget);
 
+  renderer.setRenderTarget(renderTarget);
 
+  renderer.render(rtScene, rtCamera);
 
+  renderer.setRenderTarget(null);
 
 ```
 
 
 Then we render the scene with the single cube that is using the render target's texture to the canvas.

+ 2 - 2
threejs/lessons/threejs-textures.md
View File 

@@ -618,8 +618,8 @@ roughness
 
 -->
 
 
 <canvas id="c"></canvas>
 
-<script src="../resources/threejs/r98/three.min.js"></script>
 
-<script src="../resources/threejs/r98/js/controls/TrackballControls.js"></script>
 
+<script src="../resources/threejs/r102/three.min.js"></script>
 
+<script src="../resources/threejs/r102/js/controls/TrackballControls.js"></script>
 
 <script src="resources/threejs-lesson-utils.js"></script>
 
 <script src="resources/threejs-textures.js"></script>
 
 <style>

+ 1 - 1
threejs/threejs-background-css.html
View File 

@@ -21,7 +21,7 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 2 - 2
threejs/threejs-background-cubemap.html
View File 

@@ -19,8 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script>
 
 'use strict';

+ 2 - 2
threejs/threejs-background-equirectangularmap.html
View File 

@@ -19,8 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script>
 
 'use strict';

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

@@ -19,7 +19,7 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 1 - 1
threejs/threejs-background-separate-scene.html
View File 

@@ -19,7 +19,7 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

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

@@ -20,8 +20,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 5 - 4
threejs/threejs-cameras-orthographic-2-scenes.html
View File 

@@ -36,8 +36,8 @@
 
        <div id="view2" tabindex="2"></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';
 
@@ -183,8 +183,9 @@ function main() {
 
     const height = Math.min(canvasRect.height, bottom - top);
 
 
     // setup the scissor to only render to that part of the canvas
 
-    renderer.setScissor(left, top, width, height);
 
-    renderer.setViewport(left, top, width, height);
 
+    const positiveYUpBottom = canvasRect.height - bottom;
 
+    renderer.setScissor(left, positiveYUpBottom, width, height);
 
+    renderer.setViewport(left, positiveYUpBottom, width, height);
 
 
     // return the aspect
 
     return width / height;

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

@@ -32,8 +32,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 5 - 4
threejs/threejs-cameras-perspective-2-scenes.html
View File 

@@ -36,8 +36,8 @@
 
        <div id="view2" tabindex="2"></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';
 
@@ -183,8 +183,9 @@ function main() {
 
     const height = Math.min(canvasRect.height, bottom - top);
 
 
     // setup the scissor to only render to that part of the canvas
 
-    renderer.setScissor(left, top, width, height);
 
-    renderer.setViewport(left, top, width, height);
 
+    const positiveYUpBottom = canvasRect.height - bottom;
 
+    renderer.setScissor(left, positiveYUpBottom, width, height);
 
+    renderer.setViewport(left, positiveYUpBottom, width, height);
 
 
     // return the aspect
 
     return width / height;

+ 2 - 2
threejs/threejs-cameras-perspective.html
View File 

@@ -20,8 +20,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 2 - 2
threejs/threejs-cameras-z-fighting.html
View File 

@@ -20,8 +20,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

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

@@ -32,7 +32,7 @@
 
       <pre></pre>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 1 - 1
threejs/threejs-debug-js-html-elements.html
View File 

@@ -33,7 +33,7 @@
 
       <div>z:<span id="z"></span></div>
 
     </div>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 1 - 1
threejs/threejs-debug-js-params.html
View File 

@@ -43,7 +43,7 @@
 
     </div>
 
     <div id="info">click to launch</div>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 2 - 2
threejs/threejs-debugging-mcve.html
View File 

@@ -1,8 +1,8 @@
 
 <body>
 
   <canvas id="c"></canvas>
 
 </body>
 
-<script src="resources/threejs/r94/three.js"></script>
 
-<script src="resources/threejs/r94/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script>
 
 'use strict';

+ 1 - 1
threejs/threejs-fog-gui.html
View File 

@@ -20,7 +20,7 @@
 
     <canvas id="c"></canvas>
 
   </body>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 1 - 1
threejs/threejs-fog.html
View File 

@@ -19,7 +19,7 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 1 - 1
threejs/threejs-fundamentals-3-cubes.html
View File 

@@ -9,7 +9,7 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 1 - 1
threejs/threejs-fundamentals-with-animation.html
View File 

@@ -9,7 +9,7 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 1 - 1
threejs/threejs-fundamentals-with-light.html
View File 

@@ -9,7 +9,7 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 1 - 1
threejs/threejs-fundamentals.html
View File 

@@ -9,7 +9,7 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 2 - 2
threejs/threejs-lights-ambient.html
View File 

@@ -20,8 +20,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

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

@@ -20,8 +20,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 2 - 2
threejs/threejs-lights-directional.html
View File 

@@ -20,8 +20,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 2 - 2
threejs/threejs-lights-hemisphere.html
View File 

@@ -20,8 +20,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 2 - 2
threejs/threejs-lights-point-physically-correct.html
View File 

@@ -20,8 +20,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 2 - 2
threejs/threejs-lights-point.html
View File 

@@ -20,8 +20,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 5 - 5
threejs/threejs-lights-rectarea.html
View File 

@@ -20,9 +20,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/lights/RectAreaLightUniformsLib.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/lights/RectAreaLightUniformsLib.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';
 
@@ -127,11 +127,11 @@ function main() {
 
     const height = 4;
 
     const light = new THREE.RectAreaLight(color, intensity, width, height);
 
     light.position.set(0, 10, 0);
 
-    light.rotation.x = THREE.Math.degToRad(30);
 
+    light.rotation.x = THREE.Math.degToRad(-90);
 
     scene.add(light);
 
 
     const helper = new THREE.RectAreaLightHelper(light);
 
-    scene.add(helper);
 
+    light.add(helper);
 
 
     function updateLight() {
 
       helper.update();

+ 2 - 2
threejs/threejs-lights-spot-w-helper.html
View File 

@@ -20,8 +20,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 3 - 3
threejs/threejs-load-gltf-animated-cars.html
View File 

@@ -20,9 +20,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r94/three.js"></script>
 
-<script src="resources/threejs/r94/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r94/js/loaders/GLTFLoader.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 3 - 3
threejs/threejs-load-gltf-car-path-fixed.html
View File 

@@ -20,9 +20,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r94/three.js"></script>
 
-<script src="resources/threejs/r94/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r94/js/loaders/GLTFLoader.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 3 - 3
threejs/threejs-load-gltf-car-path.html
View File 

@@ -20,9 +20,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r94/three.js"></script>
 
-<script src="resources/threejs/r94/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r94/js/loaders/GLTFLoader.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 3 - 3
threejs/threejs-load-gltf-dump-scenegraph-extra.html
View File 

@@ -20,9 +20,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r94/three.js"></script>
 
-<script src="resources/threejs/r94/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r94/js/loaders/GLTFLoader.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 3 - 3
threejs/threejs-load-gltf-dump-scenegraph.html
View File 

@@ -20,9 +20,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r94/three.js"></script>
 
-<script src="resources/threejs/r94/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r94/js/loaders/GLTFLoader.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 3 - 3
threejs/threejs-load-gltf-rotate-cars-fixed.html
View File 

@@ -20,9 +20,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r94/three.js"></script>
 
-<script src="resources/threejs/r94/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r94/js/loaders/GLTFLoader.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 3 - 3
threejs/threejs-load-gltf-rotate-cars.html
View File 

@@ -20,9 +20,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r94/three.js"></script>
 
-<script src="resources/threejs/r94/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r94/js/loaders/GLTFLoader.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 3 - 3
threejs/threejs-load-gltf-shadows.html
View File 

@@ -20,9 +20,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r94/three.js"></script>
 
-<script src="resources/threejs/r94/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r94/js/loaders/GLTFLoader.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 3 - 3
threejs/threejs-load-gltf.html
View File 

@@ -20,9 +20,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r94/three.js"></script>
 
-<script src="resources/threejs/r94/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r94/js/loaders/GLTFLoader.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 4 - 4
threejs/threejs-load-obj-auto-camera-xz.html
View File 

@@ -20,10 +20,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/LoaderSupport.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/OBJLoader2.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/LoaderSupport.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/OBJLoader2.js"></script>
 
 <script>
 
 'use strict';

+ 4 - 4
threejs/threejs-load-obj-auto-camera.html
View File 

@@ -20,10 +20,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/LoaderSupport.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/OBJLoader2.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/LoaderSupport.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/OBJLoader2.js"></script>
 
 <script>
 
 'use strict';

+ 5 - 5
threejs/threejs-load-obj-materials-fixed.html
View File 

@@ -20,11 +20,11 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/LoaderSupport.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/OBJLoader2.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/MTLLoader.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/LoaderSupport.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/OBJLoader2.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/MTLLoader.js"></script>
 
 <script>
 
 'use strict';

+ 5 - 5
threejs/threejs-load-obj-materials-windmill2.html
View File 

@@ -20,11 +20,11 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/LoaderSupport.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/OBJLoader2.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/MTLLoader.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/LoaderSupport.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/OBJLoader2.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/MTLLoader.js"></script>
 
 <script>
 
 'use strict';

+ 5 - 5
threejs/threejs-load-obj-materials.html
View File 

@@ -20,11 +20,11 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/LoaderSupport.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/OBJLoader2.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/MTLLoader.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/LoaderSupport.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/OBJLoader2.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/MTLLoader.js"></script>
 
 <script>
 
 'use strict';

+ 4 - 4
threejs/threejs-load-obj-no-materials.html
View File 

@@ -20,10 +20,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/LoaderSupport.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/OBJLoader2.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/LoaderSupport.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/OBJLoader2.js"></script>
 
 <script>
 
 'use strict';

+ 4 - 4
threejs/threejs-load-obj-wat.html
View File 

@@ -20,10 +20,10 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/LoaderSupport.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/OBJLoader2.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/LoaderSupport.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/OBJLoader2.js"></script>
 
 <script>
 
 'use strict';

+ 4 - 15
threejs/threejs-lots-of-objects-animated.html
View File 

@@ -40,10 +40,10 @@
 
     <canvas id="c"></canvas>
 
     <div id="ui"></div>
 
   </body>
 
-<script src="resources/threejs/r98/three.js"></script>
 
-<script src="resources/threejs/r98/js/utils/BufferGeometryUtils.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/libs/tween.min.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/utils/BufferGeometryUtils.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/libs/tween.min.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -391,17 +391,6 @@ function main() {
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', requestRenderIfNotRequested);
 
-
 
-  // note: this is a workaround for an OrbitControls issue
 
-  // in an iframe. Will remove once the issue is fixed in
 
-  // three.js
 
-  window.addEventListener('mousedown', (e) => {
 
-    e.preventDefault();
 
-    window.focus();
 
-  });
 
-  window.addEventListener('keydown', (e) => {
 
-    e.preventDefault();
 
-  });
 
 }
 
 
 main();

+ 3 - 14
threejs/threejs-lots-of-objects-merged-vertexcolors.html
View File 

@@ -19,9 +19,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.js"></script>
 
-<script src="resources/threejs/r98/js/utils/BufferGeometryUtils.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/utils/BufferGeometryUtils.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -215,17 +215,6 @@ function main() {
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', requestRenderIfNotRequested);
 
-
 
-  // note: this is a workaround for an OrbitControls issue
 
-  // in an iframe. Will remove once the issue is fixed in
 
-  // three.js
 
-  window.addEventListener('mousedown', (e) => {
 
-    e.preventDefault();
 
-    window.focus();
 
-  });
 
-  window.addEventListener('keydown', (e) => {
 
-    e.preventDefault();
 
-  });
 
 }
 
 
 main();

+ 3 - 14
threejs/threejs-lots-of-objects-merged.html
View File 

@@ -19,9 +19,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.js"></script>
 
-<script src="resources/threejs/r98/js/utils/BufferGeometryUtils.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/utils/BufferGeometryUtils.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -189,17 +189,6 @@ function main() {
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', requestRenderIfNotRequested);
 
-
 
-  // note: this is a workaround for an OrbitControls issue
 
-  // in an iframe. Will remove once the issue is fixed in
 
-  // three.js
 
-  window.addEventListener('mousedown', (e) => {
 
-    e.preventDefault();
 
-    window.focus();
 
-  });
 
-  window.addEventListener('keydown', (e) => {
 
-    e.preventDefault();
 
-  });
 
 }
 
 
 main();

+ 5 - 16
threejs/threejs-lots-of-objects-morphtargets-w-colors.html
View File 

@@ -40,10 +40,10 @@
 
     <canvas id="c"></canvas>
 
     <div id="ui"></div>
 
   </body>
 
-<script src="resources/threejs/r98/three.js"></script>
 
-<script src="resources/threejs/r98/js/utils/BufferGeometryUtils.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/libs/tween.min.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/utils/BufferGeometryUtils.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/libs/tween.min.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -229,7 +229,7 @@ function main() {
 
     });
 
 
     return THREE.BufferGeometryUtils.mergeBufferGeometries(
 
-       geometries, false);
 
+      geometries, false);
 
   }
 
 
   async function loadData(info) {
 
@@ -466,17 +466,6 @@ function main() {
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', requestRenderIfNotRequested);
 
-
 
-  // note: this is a workaround for an OrbitControls issue
 
-  // in an iframe. Will remove once the issue is fixed in
 
-  // three.js
 
-  window.addEventListener('mousedown', (e) => {
 
-    e.preventDefault();
 
-    window.focus();
 
-  });
 
-  window.addEventListener('keydown', (e) => {
 
-    e.preventDefault();
 
-  });
 
 }
 
 
 main();

+ 4 - 15
threejs/threejs-lots-of-objects-morphtargets.html
View File 

@@ -40,10 +40,10 @@
 
     <canvas id="c"></canvas>
 
     <div id="ui"></div>
 
   </body>
 
-<script src="resources/threejs/r98/three.js"></script>
 
-<script src="resources/threejs/r98/js/utils/BufferGeometryUtils.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/libs/tween.min.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/utils/BufferGeometryUtils.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/libs/tween.min.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -398,17 +398,6 @@ function main() {
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', requestRenderIfNotRequested);
 
-
 
-  // note: this is a workaround for an OrbitControls issue
 
-  // in an iframe. Will remove once the issue is fixed in
 
-  // three.js
 
-  window.addEventListener('mousedown', (e) => {
 
-    e.preventDefault();
 
-    window.focus();
 
-  });
 
-  window.addEventListener('keydown', (e) => {
 
-    e.preventDefault();
 
-  });
 
 }
 
 
 main();

+ 3 - 14
threejs/threejs-lots-of-objects-multiple-data-sets.html
View File 

@@ -40,9 +40,9 @@
 
     <canvas id="c"></canvas>
 
     <div id="ui"></div>
 
   </body>
 
-<script src="resources/threejs/r98/three.js"></script>
 
-<script src="resources/threejs/r98/js/utils/BufferGeometryUtils.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/utils/BufferGeometryUtils.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -332,17 +332,6 @@ function main() {
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', requestRenderIfNotRequested);
 
-
 
-  // note: this is a workaround for an OrbitControls issue
 
-  // in an iframe. Will remove once the issue is fixed in
 
-  // three.js
 
-  window.addEventListener('mousedown', (e) => {
 
-    e.preventDefault();
 
-    window.focus();
 
-  });
 
-  window.addEventListener('keydown', (e) => {
 
-    e.preventDefault();
 
-  });
 
 }
 
 
 main();

+ 2 - 13
threejs/threejs-lots-of-objects-slow.html
View File 

@@ -19,8 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -186,17 +186,6 @@ function main() {
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', requestRenderIfNotRequested);
 
-
 
-  // note: this is a workaround for an OrbitControls issue
 
-  // in an iframe. Will remove once the issue is fixed in
 
-  // three.js
 
-  window.addEventListener('mousedown', (e) => {
 
-    e.preventDefault();
 
-    window.focus();
 
-  });
 
-  window.addEventListener('keydown', (e) => {
 
-    e.preventDefault();
 
-  });
 
 }
 
 
 main();

+ 5 - 4
threejs/threejs-multiple-scenes-controls.html
View File 

@@ -48,8 +48,8 @@
 
       and finding a undiscovered tomb full of mummies and treasure.
 
     </p>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/TrackballControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/TrackballControls.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -174,8 +174,9 @@ function main() {
 
           left > renderer.domElement.clientWidth;
 
 
       if (!isOffscreen) {
 
-        renderer.setViewport(left, top, width, height);
 
-        renderer.setScissor(left, top, width, height);
 
+        const positiveYUpBottom = renderer.domElement.clientHeight - bottom;
 
+        renderer.setScissor(left, positiveYUpBottom, width, height);
 
+        renderer.setViewport(left, positiveYUpBottom, width, height);
 
 
         fn(time, rect);
 
       }

+ 4 - 3
threejs/threejs-multiple-scenes-generic.html
View File 

@@ -48,7 +48,7 @@
 
       and finding a undiscovered tomb full of mummies and treasure.
 
     </p>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -158,8 +158,9 @@ function main() {
 
           left > renderer.domElement.clientWidth;
 
 
       if (!isOffscreen) {
 
-        renderer.setViewport(left, top, width, height);
 
-        renderer.setScissor(left, top, width, height);
 
+        const positiveYUpBottom = renderer.domElement.clientHeight - bottom;
 
+        renderer.setScissor(left, positiveYUpBottom, width, height);
 
+        renderer.setViewport(left, positiveYUpBottom, width, height);
 
 
         fn(time, rect);
 
       }

+ 4 - 3
threejs/threejs-multiple-scenes-selector.html
View File 

@@ -48,7 +48,7 @@
 
       and finding a undiscovered tomb full of mummies and treasure.
 
     </p>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -164,8 +164,9 @@ function main() {
 
           left > renderer.domElement.clientWidth;
 
 
       if (!isOffscreen) {
 
-        renderer.setViewport(left, top, width, height);
 
-        renderer.setScissor(left, top, width, height);
 
+        const positiveYUpBottom = renderer.domElement.clientHeight - bottom;
 
+        renderer.setScissor(left, positiveYUpBottom, width, height);
 
+        renderer.setViewport(left, positiveYUpBottom, width, height);
 
 
         fn(time, rect);
 
       }

+ 4 - 3
threejs/threejs-multiple-scenes-v1.html
View File 

@@ -48,7 +48,7 @@
 
       and finding a undiscovered tomb full of mummies and treasure.
 
     </p>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -140,8 +140,9 @@ function main() {
 
     camera.aspect = width / height;
 
     camera.updateProjectionMatrix();
 
 
-    renderer.setViewport(left, top, width, height);
 
-    renderer.setScissor(left, top, width, height);
 
+    const positiveYUpBottom = renderer.domElement.clientHeight - bottom;
 
+    renderer.setScissor(left, positiveYUpBottom, width, height);
 
+    renderer.setViewport(left, positiveYUpBottom, width, height);
 
 
     renderer.render(scene, camera);
 
   }

+ 4 - 3
threejs/threejs-multiple-scenes-v2.html
View File 

@@ -49,7 +49,7 @@
 
       and finding a undiscovered tomb full of mummies and treasure.
 
     </p>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -142,8 +142,9 @@ function main() {
 
     camera.aspect = width / height;
 
     camera.updateProjectionMatrix();
 
 
-    renderer.setViewport(left, top, width, height);
 
-    renderer.setScissor(left, top, width, height);
 
+    const positiveYUpBottom = renderer.domElement.clientHeight - bottom;
 
+    renderer.setScissor(left, positiveYUpBottom, width, height);
 
+    renderer.setViewport(left, positiveYUpBottom, width, height);
 
 
     renderer.render(scene, camera);
 
   }

+ 4 - 3
threejs/threejs-multiple-scenes-v3.html
View File 

@@ -49,7 +49,7 @@
 
       and finding a undiscovered tomb full of mummies and treasure.
 
     </p>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -142,8 +142,9 @@ function main() {
 
     camera.aspect = width / height;
 
     camera.updateProjectionMatrix();
 
 
-    renderer.setViewport(left, top, width, height);
 
-    renderer.setScissor(left, top, width, height);
 
+    const positiveYUpBottom = renderer.domElement.clientHeight - bottom;
 
+    renderer.setScissor(left, positiveYUpBottom, width, height);
 
+    renderer.setViewport(left, positiveYUpBottom, width, height);
 
 
     renderer.render(scene, camera);
 
   }

+ 4 - 2
threejs/threejs-picking-gpu.html
View File 

@@ -19,7 +19,7 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -151,7 +151,9 @@ function main() {
 
           1,                                     // rect height
 
       );
 
       // render the scene
 
-      renderer.render(scene, camera, pickingTexture);
 
+      renderer.setRenderTarget(pickingTexture);
 
+      renderer.render(scene, camera);
 
+      renderer.setRenderTarget(null);
 
       // clear the view offset so rendering returns to normal
 
       camera.clearViewOffset();
 
       //read the pixel

+ 1 - 1
threejs/threejs-picking-raycaster-complex-geo.html
View File 

@@ -19,7 +19,7 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 1 - 1
threejs/threejs-picking-raycaster-transparency.html
View File 

@@ -19,7 +19,7 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 1 - 1
threejs/threejs-picking-raycaster.html
View File 

@@ -19,7 +19,7 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 7 - 7
threejs/threejs-postprocessing-3dlut-identity.html
View File 

@@ -19,13 +19,13 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/GLTFLoader.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/CopyShader.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/EffectComposer.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/RenderPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/ShaderPass.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/CopyShader.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/EffectComposer.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/RenderPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/ShaderPass.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 3 - 3
threejs/threejs-postprocessing-3dlut-prep.html
View File 

@@ -20,9 +20,9 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r94/three.js"></script>
 
-<script src="resources/threejs/r94/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r94/js/loaders/GLTFLoader.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
 <script>
 
 'use strict';

+ 7 - 7
threejs/threejs-postprocessing-3dlut-w-loader.html
View File 

@@ -19,13 +19,13 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/GLTFLoader.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/CopyShader.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/EffectComposer.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/RenderPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/ShaderPass.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/CopyShader.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/EffectComposer.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/RenderPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/ShaderPass.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script src="resources/lut-reader.js"></script>
 
 <script src="resources/drag-and-drop.js"></script>

+ 7 - 7
threejs/threejs-postprocessing-3dlut.html
View File 

@@ -19,13 +19,13 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
-<script src="resources/threejs/r98/js/loaders/GLTFLoader.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/CopyShader.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/EffectComposer.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/RenderPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/ShaderPass.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/loaders/GLTFLoader.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/CopyShader.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/EffectComposer.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/RenderPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/ShaderPass.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script src="resources/lut-reader.js"></script>
 
 <script src="resources/drag-and-drop.js"></script>

+ 5 - 5
threejs/threejs-postprocessing-adobe-lut-to-png-converter.html
View File 

@@ -30,11 +30,11 @@
 
     <p><button type="button">Save...</button></p>
 
     <div id="cube"><canvas id="c"></canvas></div>
 
   </body>
 
-<script src="resources/threejs/r98/three.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/CopyShader.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/EffectComposer.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/RenderPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/ShaderPass.js"></script>
 
+<script src="resources/threejs/r102/three.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/CopyShader.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/EffectComposer.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/RenderPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/ShaderPass.js"></script>
 
 <script src="resources/lut-reader.js"></script>
 
 <script src="resources/drag-and-drop.js"></script>
 
 <script>

+ 5 - 5
threejs/threejs-postprocessing-custom.html
View File 

@@ -19,11 +19,11 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/CopyShader.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/EffectComposer.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/RenderPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/ShaderPass.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/CopyShader.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/EffectComposer.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/RenderPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/ShaderPass.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 9 - 9
threejs/threejs-postprocessing-gui.html
View File 

@@ -19,15 +19,15 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/CopyShader.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/ConvolutionShader.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/FilmShader.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/EffectComposer.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/RenderPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/ShaderPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/BloomPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/FilmPass.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/CopyShader.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/ConvolutionShader.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/FilmShader.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/EffectComposer.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/RenderPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/ShaderPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/BloomPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/FilmPass.js"></script>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 'use strict';

+ 9 - 9
threejs/threejs-postprocessing.html
View File 

@@ -19,15 +19,15 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/CopyShader.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/ConvolutionShader.js"></script>
 
-<script src="resources/threejs/r98/js/shaders/FilmShader.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/EffectComposer.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/RenderPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/ShaderPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/BloomPass.js"></script>
 
-<script src="resources/threejs/r98/js/postprocessing/FilmPass.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/CopyShader.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/ConvolutionShader.js"></script>
 
+<script src="resources/threejs/r102/js/shaders/FilmShader.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/EffectComposer.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/RenderPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/ShaderPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/BloomPass.js"></script>
 
+<script src="resources/threejs/r102/js/postprocessing/FilmPass.js"></script>
 
 <script>
 
 'use strict';

+ 1 - 1
threejs/threejs-primitives-text.html
View File 

@@ -19,7 +19,7 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 1 - 1
threejs/threejs-primitives.html
View File 

@@ -19,7 +19,7 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 'use strict';

+ 2 - 13
threejs/threejs-render-on-demand-w-damping.html
View File 

@@ -19,8 +19,8 @@
 
   <body>
 
     <canvas id="c"></canvas>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 <script>
 
 'use strict';
 
 
@@ -110,17 +110,6 @@ function main() {
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', requestRenderIfNotRequested);
 
-
 
-  // note: this is a workaround for an OrbitControls issue
 
-  // in an iframe. Will remove once the issue is fixed in
 
-  // three.js
 
-  window.addEventListener('mousedown', (e) => {
 
-    e.preventDefault();
 
-    window.focus();
 
-  });
 
-  window.addEventListener('keydown', (e) => {
 
-    e.preventDefault();
 
-  });
 
 }
 
 
 main();

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