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
Unified 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>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -18,7 +18,7 @@ table {
 
 }
 
 }
 
 
 
 pre {
 
 pre {
 
-  background: #CCC;
 
+  background: rgb(143, 140, 140);
 
   padding: 1em;
 
   padding: 1em;
 
 }
 
 }
 
 pre>code {
 
 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.width = (rect.right - rect.left) * this.pixelRatio;
 
       renderInfo.height = (rect.bottom - rect.top) * this.pixelRatio;
 
       renderInfo.height = (rect.bottom - rect.top) * this.pixelRatio;
 
       renderInfo.left = rect.left * 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) {
 
       if (renderInfo.width !== oldWidth || renderInfo.height !== oldHeight) {
 
         oldWidth = renderInfo.width;
 
         oldWidth = renderInfo.width;
 
@@ -199,8 +199,8 @@ window.threejsLessonUtils = {
 
       camera.aspect = aspect;
 
       camera.aspect = aspect;
 
       camera.updateProjectionMatrix();
 
       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);
 
       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 width = (rect.right - rect.left) * renderInfo.pixelRatio;
 
         const height = (rect.bottom - rect.top) * renderInfo.pixelRatio;
 
         const height = (rect.bottom - rect.top) * renderInfo.pixelRatio;
 
         const left = rect.left * 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 cellSize = Math.min(width / numRough, height / numMetal) | 0;
 
         const xOff = (width - cellSize * numRough) / 2;
 
         const xOff = (width - cellSize * numRough) / 2;
 
@@ -110,7 +110,7 @@
 
         for (let m = 0; m < numMetal; ++m) {
 
         for (let m = 0; m < numMetal; ++m) {
 
           for (let r = 0; r < numRough; ++r) {
 
           for (let r = 0; r < numRough; ++r) {
 
             const x = left + xOff + r * cellSize;
 
             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.setViewport(x, y, cellSize, cellSize);
 
             renderer.setScissor(x, y, cellSize, cellSize);
 
             renderer.setScissor(x, y, cellSize, cellSize);
 
             const mesh = meshes[m][r];
 
             const mesh = meshes[m][r];

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

@@ -64,7 +64,10 @@
 
         camera.aspect = rtWidth / rtHeight;
 
         camera.aspect = rtWidth / rtHeight;
 
         camera.updateProjectionMatrix();
 
         camera.updateProjectionMatrix();
 
 
 
-        renderer.render(scene, camera, renderTarget);
 
+        renderer.setRenderTarget(renderTarget);
 
+
 
+        renderer.render(scene, camera);
 
+        renderer.setRenderTarget(null);
 
       },
 
       },
 
       render(renderInfo) {
 
       render(renderInfo) {
 
         const { width, height, renderer, pixelRatio } = 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).
 
 А пока давайте перейдем к [теням](threejs-shadows.html).
 
 
 
 <canvas id="c"></canvas>
 
 <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-lesson-utils.js"></script>
 
 <script src="../resources/threejs-cameras.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
 
 ```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` камеру для 
 Теперь мы можем использовать их. Мы передаем в `OrbitControls` камеру для 
@@ -468,8 +468,8 @@ gui.add(light, 'penumbra', 0, 1, 0.01);
 
 Для использования `RectAreaLight` нам нужно включить некоторые дополнительные возможности three.js
 
 Для использования `RectAreaLight` нам нужно включить некоторые дополнительные возможности three.js
 
 
 
 ```html
 
 ```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, индикатор все равно будет работать, 
 Если вы забудете RectAreaLightUniformsLib, индикатор все равно будет работать, 
@@ -564,7 +564,7 @@ gui.add(light, 'power', 0, 2000);
 
 Далее давайте перейдем к  [работе с камерами](threejs-cameras.html).
 
 Далее давайте перейдем к  [работе с камерами](threejs-cameras.html).
 
 
 
 <canvas id="c"></canvas>
 
 <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-lesson-utils.js"></script>
 
 <script src="../resources/threejs-lights.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>
 
 </div>
 
 
 
 <canvas id="c"></canvas>
 
 <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-lesson-utils.js"></script>
 
 <script src="../resources/threejs-materials.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.aspect = width / height;
 
   camera.updateProjectionMatrix();
 
   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);
 
   renderer.render(scene, camera);
 
 }
 
 }
 
@@ -313,8 +314,9 @@ function render(time) {
 
         left > renderer.domElement.clientWidth;
 
         left > renderer.domElement.clientWidth;
 
 
 
     if (!isOffscreen) {
 
     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);
 
       fn(time, rect);
 
     }
 
     }
 
@@ -469,7 +471,7 @@ document.querySelectorAll('[data-diagram]').forEach((elem) => {
 
 Сначала мы добавляем скрипт для контролов.
 
 Сначала мы добавляем скрипт для контролов.
 
 
 
 ```html
 
 ```html
 
-<script src="../resources/threejs/r98/js/controls/TrackballControls.js"></script>
 
+<script src="../resources/threejs/r102/js/controls/TrackballControls.js"></script>
 
 ```
 
 ```
 
 
 
 И затем мы можем добавить `TrackballControls` к каждой сцене, передавая элемент, связанный с этой сценой.
 
 И затем мы можем добавить `TrackballControls` к каждой сцене, передавая элемент, связанный с этой сценой.

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

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

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

@@ -615,8 +615,8 @@ roughness
 
 -->
 
 -->
 
 
 
 <canvas id="c"></canvas>
 
 <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-lesson-utils.js"></script>
 
 <script src="../resources/threejs-textures.js"></script>
 
 <script src="../resources/threejs-textures.js"></script>
 
 <style>
 
 <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.
 
 Let's add some controls in so we can rotate the camera.
 
 
 
 ```html
 
 ```html
 
-<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
+<script src="resources/threejs/r102/js/controls/OrbitControls.js"></script>
 
 ```
 
 ```
 
 
 
 ```js
 
 ```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);
 
   const height = Math.min(canvasRect.height, bottom - top);
 
 
 
   // setup the scissor to only render to that part of the canvas
 
   // 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 the aspect
 
   return width / height;
 
   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).
 
 in other articles. For now lets move on to [shadows](threejs-shadows.html).
 
 
 
 <canvas id="c"></canvas>
 
 <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-lesson-utils.js"></script>
 
 <script src="resources/threejs-cameras.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>
 
 </div>
 
 
 
 <canvas id="c"></canvas>
 
 <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-lesson-utils.js"></script>
 
 <script src="resources/threejs-fog.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
 
 in our page
 
 
 
 ```html
 
 ```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 
 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
 
 To use the `RectAreaLight` we need to include some extra three.js optional data
 
 
 
 ```html
 
 ```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
 
 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 height = 4;
 
 *const light = new THREE.RectAreaLight(color, intensity, width, height);
 
 *const light = new THREE.RectAreaLight(color, intensity, width, height);
 
 light.position.set(0, 10, 0);
 
 light.position.set(0, 10, 0);
 
-+light.rotation.x = THREE.Math.degToRad(30);
 
++light.rotation.x = THREE.Math.degToRad(-90);
 
 scene.add(light);
 
 scene.add(light);
 
 
 
 *const helper = new THREE.RectAreaLightHelper(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
 
 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
 
 Let's also adjust the GUI. We'll make it so we can rotate the light and adjust
 
 its `width` and `height`
 
 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).
 
 Next up let's go over [dealing with cameras](threejs-cameras.html).
 
 
 
 <canvas id="c"></canvas>
 
 <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-lesson-utils.js"></script>
 
 <script src="resources/threejs-lights.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`.
 
 We also need to include the `GLTFLoader` and we can get rid of the `OBJLoader2`.
 
 
 
 ```html
 
 ```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
 
 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.
 
 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
 
 ```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`,
 
 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`
 
 First we need to include the `MTLLoader`
 
 
 
 ```html
 
 ```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.
 
 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>
 
 </div>
 
 
 
 <canvas id="c"></canvas>
 
 <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-lesson-utils.js"></script>
 
 <script src="resources/threejs-materials.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.aspect = width / height;
 
   camera.updateProjectionMatrix();
 
   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);
 
   renderer.render(scene, camera);
 
 }
 
 }
 
@@ -293,8 +294,9 @@ function render(time) {
 
         left > renderer.domElement.clientWidth;
 
         left > renderer.domElement.clientWidth;
 
 
 
     if (!isOffscreen) {
 
     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);
 
       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.
 
 Adding interactively, for example a `TrackballControls` is just as easy. First we add the script for the control.
 
 
 
 ```html
 
 ```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.
 
 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
 
 We need to include the library
 
 
 
 ```html
 
 ```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.
 
 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`
 
 We also need to include the `BufferGeometryUtils`
 
 
 
 ```html
 
 ```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
 
 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).
 
 [another article](threejs-optimize-lots-of-objects-animated.html).
 
 
 
 <canvas id="c"></canvas>
 
 <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="../../3rdparty/dat.gui.min.js"></script>
 
 <script src="resources/threejs-lesson-utils.js"></script>
 
 <script src="resources/threejs-lesson-utils.js"></script>
 
 <script src="resources/threejs-lots-of-objects.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
 
 +        1,                                     // rect height
 
 +    );
 
 +    );
 
 +    // render the scene
 
 +    // 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
 
 +    // clear the view offset so rendering returns to normal
 
 +    camera.clearViewOffset();
 
 +    camera.clearViewOffset();
 
 +    //read the pixel
 
 +    //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.
 
 To use these classes we need to include a bunch of scripts.
 
 
 
 ```html
 
 ```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.
 
 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).
 
 to use it](threejs-scenegraph.html).
 
 
 
 <canvas id="c"></canvas>
 
 <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-lesson-utils.js"></script>
 
 <script src="resources/threejs-primitives.js"></script>
 
 <script src="resources/threejs-primitives.js"></script>
 
 <style>
 
 <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.
 
 that we can render in response to.
 
 
 
 ```html
 
 ```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
 
 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.
 
 Let's also add a simple dat.GUI GUI and make its changes render on demand.
 
 
 
 ```html
 
 ```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>
 
 +<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
 
   // 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.
 
 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>
 
 <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-lesson-utils.js"></script>
 
 <script src="resources/threejs-textures.js"></script>
 
 <script src="resources/threejs-textures.js"></script>
 
 <style>
 
 <style>

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

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

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

@@ -19,8 +19,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -19,8 +19,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';

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

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

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

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

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

@@ -20,8 +20,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -36,8 +36,8 @@
 
        <div id="view2" tabindex="2"></div>
 
        <div id="view2" tabindex="2"></div>
 
     </div>
 
     </div>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';
 
@@ -183,8 +183,9 @@ function main() {
 
     const height = Math.min(canvasRect.height, bottom - top);
 
     const height = Math.min(canvasRect.height, bottom - top);
 
 
 
     // setup the scissor to only render to that part of the canvas
 
     // 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 the aspect
 
     return width / height;
 
     return width / height;

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

@@ -32,8 +32,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -36,8 +36,8 @@
 
        <div id="view2" tabindex="2"></div>
 
        <div id="view2" tabindex="2"></div>
 
     </div>
 
     </div>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';
 
@@ -183,8 +183,9 @@ function main() {
 
     const height = Math.min(canvasRect.height, bottom - top);
 
     const height = Math.min(canvasRect.height, bottom - top);
 
 
 
     // setup the scissor to only render to that part of the canvas
 
     // 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 the aspect
 
     return width / height;
 
     return width / height;

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

@@ -20,8 +20,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,8 +20,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

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

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

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

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

@@ -1,8 +1,8 @@
 
 <body>
 
 <body>
 
   <canvas id="c"></canvas>
 
   <canvas id="c"></canvas>
 
 </body>
 
 </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>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,7 +20,7 @@
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </body>
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 <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>
 
 <script>
 
 'use strict';
 
 'use strict';

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

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

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

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

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

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

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

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

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

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

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

@@ -20,8 +20,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,8 +20,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,8 +20,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,8 +20,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,8 +20,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,8 +20,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

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

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

@@ -20,8 +20,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,9 +20,9 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,9 +20,9 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,9 +20,9 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,9 +20,9 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,9 +20,9 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,9 +20,9 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,9 +20,9 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,9 +20,9 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,9 +20,9 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,10 +20,10 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,10 +20,10 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,11 +20,11 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,11 +20,11 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,11 +20,11 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,10 +20,10 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,10 +20,10 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -40,10 +40,10 @@
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
     <div id="ui"></div>
 
     <div id="ui"></div>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';
 
 
 
@@ -391,17 +391,6 @@ function main() {
 
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', 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();
 
 main();

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

@@ -19,9 +19,9 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';
 
 
 
@@ -215,17 +215,6 @@ function main() {
 
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', 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();
 
 main();

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

@@ -19,9 +19,9 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';
 
 
 
@@ -189,17 +189,6 @@ function main() {
 
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', 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();
 
 main();

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

@@ -40,10 +40,10 @@
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
     <div id="ui"></div>
 
     <div id="ui"></div>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';
 
 
 
@@ -229,7 +229,7 @@ function main() {
 
     });
 
     });
 
 
 
     return THREE.BufferGeometryUtils.mergeBufferGeometries(
 
     return THREE.BufferGeometryUtils.mergeBufferGeometries(
 
-       geometries, false);
 
+      geometries, false);
 
   }
 
   }
 
 
 
   async function loadData(info) {
 
   async function loadData(info) {
 
@@ -466,17 +466,6 @@ function main() {
 
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', 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();
 
 main();

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

@@ -40,10 +40,10 @@
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
     <div id="ui"></div>
 
     <div id="ui"></div>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';
 
 
 
@@ -398,17 +398,6 @@ function main() {
 
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', 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();
 
 main();

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

@@ -40,9 +40,9 @@
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
     <div id="ui"></div>
 
     <div id="ui"></div>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';
 
 
 
@@ -332,17 +332,6 @@ function main() {
 
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', 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();
 
 main();

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

@@ -19,8 +19,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';
 
 
 
@@ -186,17 +186,6 @@ function main() {
 
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', 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();
 
 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.
 
       and finding a undiscovered tomb full of mummies and treasure.
 
     </p>
 
     </p>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';
 
 
 
@@ -174,8 +174,9 @@ function main() {
 
           left > renderer.domElement.clientWidth;
 
           left > renderer.domElement.clientWidth;
 
 
 
       if (!isOffscreen) {
 
       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);
 
         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.
 
       and finding a undiscovered tomb full of mummies and treasure.
 
     </p>
 
     </p>
 
   </body>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';
 
 
 
@@ -158,8 +158,9 @@ function main() {
 
           left > renderer.domElement.clientWidth;
 
           left > renderer.domElement.clientWidth;
 
 
 
       if (!isOffscreen) {
 
       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);
 
         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.
 
       and finding a undiscovered tomb full of mummies and treasure.
 
     </p>
 
     </p>
 
   </body>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';
 
 
 
@@ -164,8 +164,9 @@ function main() {
 
           left > renderer.domElement.clientWidth;
 
           left > renderer.domElement.clientWidth;
 
 
 
       if (!isOffscreen) {
 
       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);
 
         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.
 
       and finding a undiscovered tomb full of mummies and treasure.
 
     </p>
 
     </p>
 
   </body>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';
 
 
 
@@ -140,8 +140,9 @@ function main() {
 
     camera.aspect = width / height;
 
     camera.aspect = width / height;
 
     camera.updateProjectionMatrix();
 
     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);
 
     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.
 
       and finding a undiscovered tomb full of mummies and treasure.
 
     </p>
 
     </p>
 
   </body>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';
 
 
 
@@ -142,8 +142,9 @@ function main() {
 
     camera.aspect = width / height;
 
     camera.aspect = width / height;
 
     camera.updateProjectionMatrix();
 
     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);
 
     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.
 
       and finding a undiscovered tomb full of mummies and treasure.
 
     </p>
 
     </p>
 
   </body>
 
   </body>
 
-<script src="resources/threejs/r98/three.min.js"></script>
 
+<script src="resources/threejs/r102/three.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';
 
 
 
@@ -142,8 +142,9 @@ function main() {
 
     camera.aspect = width / height;
 
     camera.aspect = width / height;
 
     camera.updateProjectionMatrix();
 
     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);
 
     renderer.render(scene, camera);
 
   }
 
   }

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

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

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

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

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

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

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

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

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

@@ -19,13 +19,13 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -20,9 +20,9 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -19,13 +19,13 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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="../3rdparty/dat.gui.min.js"></script>
 
 <script src="resources/lut-reader.js"></script>
 
 <script src="resources/lut-reader.js"></script>
 
 <script src="resources/drag-and-drop.js"></script>
 
 <script src="resources/drag-and-drop.js"></script>

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

@@ -19,13 +19,13 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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="../3rdparty/dat.gui.min.js"></script>
 
 <script src="resources/lut-reader.js"></script>
 
 <script src="resources/lut-reader.js"></script>
 
 <script src="resources/drag-and-drop.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>
 
     <p><button type="button">Save...</button></p>
 
     <div id="cube"><canvas id="c"></canvas></div>
 
     <div id="cube"><canvas id="c"></canvas></div>
 
   </body>
 
   </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/lut-reader.js"></script>
 
 <script src="resources/drag-and-drop.js"></script>
 
 <script src="resources/drag-and-drop.js"></script>
 
 <script>
 
 <script>

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

@@ -19,11 +19,11 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -19,15 +19,15 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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 src="../3rdparty/dat.gui.min.js"></script>
 
 <script>
 
 <script>
 
 'use strict';
 
 'use strict';

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

@@ -19,15 +19,15 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';

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

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

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

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

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

@@ -19,8 +19,8 @@
 
   <body>
 
   <body>
 
     <canvas id="c"></canvas>
 
     <canvas id="c"></canvas>
 
   </body>
 
   </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>
 
 <script>
 
 'use strict';
 
 'use strict';
 
 
 
@@ -110,17 +110,6 @@ function main() {
 
 
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   controls.addEventListener('change', requestRenderIfNotRequested);
 
   window.addEventListener('resize', 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();
 
 main();

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