put offscreen back to non es6 module

threejs/lessons/threejs-offscreencanvas.md

@@ -10,6 +10,10 @@ to a web worker so as not to slow down the responsiveness of the browser. It
 also means data is loaded and parsed in the worker so possibly less jank while
 the page loads.
 
+One big issue with offscreen canvas is, at least in Chrome, es6 modules are not yet
+supported on web workers, so, unlike all the other examples on this site that use
+es6 modules these examples will use class scripts.
+
 Getting *started* using it is pretty straight forward. Let's port the 3 spinning cube
 example from [the article on responsiveness](threejs-responsive.html).
 
@@ -92,7 +96,7 @@ So now we just need to start changing the `main` we pasted into
 The first thing we need to do is include THREE.js into our worker.
 
 ```js
-importScripts('https://threejsfundamentals.org/threejs/resources/threejs/r108/three.min.js');
+importScripts('resources/threejs/r108/build/three.min.js');
 ```
 
 Then instead of looking up the canvas from the DOM we'll receive it from the
@@ -290,7 +294,7 @@ HTML file.
 
 /* global importScripts, init, state */
 
-importScripts('resources/threejs/r108/three.min.js');
+importScripts('resources/threejs/r108/build/three.min.js');
 +importScripts('shared-cubes.js');
 
 function size(data) {
@@ -315,11 +319,11 @@ self.onmessage = function(e) {
 
 note we include `shared-cubes.js` which is all our three.js code
 
-Similarly we need to include `shared-cubes.js` in the main page
+Similarly we need to include three.js and  `shared-cubes.js` in the main page
 
-```js
-import * as THREE from './resources/three/r108/build/three.module.js';
-import {init, state} from './shared-cubes.js';
+```html
+<script src="resources/threejs/r108/build/three.min.js"></script>
+<script src="shared-cubes.js"><script>
 ```
 We can remove the HTML and CSS we added previously
 
@@ -728,8 +732,8 @@ We also need to actually add the `OrbitControls` to the top of
 the script
 
 ```js
-importScripts('resources/threejs/r108/three.js');
-+importScripts('resources/threejs/r108/js/controls/OrbitControls.js');
+importScripts('resources/threejs/r108/build/three.min/js');
++importScripts('resources/threejs/r108/examples/js/controls/OrbitControls.js');
 *importScripts('shared-orbitcontrols.js');
 ```
 

threejs/offscreencanvas-cubes.js

@@ -1,8 +1,8 @@
-'use strict';
+'use strict';  // eslint-disable-line
 
 /* global importScripts, THREE */
 
-importScripts('resources/threejs/r108/three.min.js');
+importScripts('resources/threejs/r108/build/three.min.js');
 
 const state = {
   width: 300,   // canvas default

threejs/offscreencanvas-worker-cubes.js

@@ -2,7 +2,7 @@
 
 /* global importScripts, init, state */
 
-importScripts('resources/threejs/r108/three.min.js');
+importScripts('resources/threejs/r108/build/three.min.js');
 importScripts('shared-cubes.js');
 
 function size(data) {

threejs/offscreencanvas-worker-orbitcontrols.js

@@ -2,8 +2,8 @@
 
 /* global importScripts, init, THREE */
 
-importScripts('resources/threejs/r108/three.js');
-importScripts('resources/threejs/r108/js/controls/OrbitControls.js');
+importScripts('resources/threejs/r108/build/three.min.js');
+importScripts('resources/threejs/r108/examples/js/controls/OrbitControls.js');
 importScripts('shared-orbitcontrols.js');
 
 function noop() {

threejs/offscreencanvas-worker-picking.js

@@ -2,7 +2,7 @@
 
 /* global importScripts, init, state, pickPosition */
 
-importScripts('resources/threejs/r108/three.min.js');
+importScripts('resources/threejs/r108/build/three.min.js');
 importScripts('shared-picking.js');
 
 function size(data) {

threejs/shared-cubes.js

@@ -1,6 +1,4 @@
-import * as THREE from 'resources/threejs/r108/build/three.module.js';
-
-export const state = {
+const state = {
   width: 300,   // canvas default
   height: 150,  // canvas default
 };

threejs/shared-orbitcontrols.js

@@ -1,7 +1,4 @@
-import * as THREE from './resources/threejs/r108/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
-
-export function init(data) {   /* eslint-disable-line no-unused-vars */
+function init(data) {   /* eslint-disable-line no-unused-vars */
   const {canvas, inputElement} = data;
   const renderer = new THREE.WebGLRenderer({canvas});
 
@@ -12,7 +9,7 @@ export function init(data) {   /* eslint-disable-line no-unused-vars */
   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 4;
 
-  const controls = new OrbitControls(camera, inputElement);
+  const controls = new THREE.OrbitControls(camera, inputElement);
   controls.target.set(0, 0, 0);
   controls.update();
 

threejs/shared-picking.js

@@ -1,13 +1,11 @@
-import * as THREE from './resources/threejs/r108/build/three.module.js';
-
-export const state = {
+const state = {
   width: 300,   // canvas default
   height: 150,  // canvas default
 };
 
-export const pickPosition = {x: 0, y: 0};
+const pickPosition = {x: 0, y: 0};
 
-export function init(data) {  // eslint-disable-line no-unused-vars
+function init(data) {  // eslint-disable-line no-unused-vars
   const {canvas} = data;
   const renderer = new THREE.WebGLRenderer({canvas});
 

threejs/threejs-offscreencanvas-w-fallback.html

@@ -19,8 +19,12 @@
   <body>
     <canvas id="c"></canvas>
   </body>
-<script type="module">
-import {state, init} from './shared-cubes.js';
+<script src="resources/threejs/r108/build/three.min.js"></script>
+<script src="shared-cubes.js"></script>
+<script>
+'use strict';  // eslint-disable-line
+
+/* globals state, init */
 
 function startWorker(canvas) {
   const offscreen = canvas.transferControlToOffscreen();

threejs/threejs-offscreencanvas-w-orbitcontrols.html

@@ -22,8 +22,13 @@
   <body>
     <canvas id="c" tabindex="1"></canvas>
   </body>
-<script type="module">
-import {init} from './shared-orbitcontrols.js';
+<script src="resources/threejs/r108/build/three.min.js"></script>
+<script src="resources/threejs/r108/examples/js/controls/OrbitControls.js"></script>
+<script src="shared-orbitcontrols.js"></script>
+<script>
+'use strict';  // eslint-disable-line
+
+/* global init */
 
 const mouseEventHandler = makeSendPropertiesHandler([
   'ctrlKey',

threejs/threejs-offscreencanvas-w-picking.html

@@ -19,8 +19,13 @@
   <body>
     <canvas id="c"></canvas>
   </body>
-<script type="module">
-import {state, init, pickPosition} from './shared-picking.js';
+<script src="resources/threejs/r108/build/three.min.js"></script>
+<script src="resources/threejs/r108/examples/js/controls/OrbitControls.js"></script>
+<script src="shared-picking.js"></script>
+<script>
+'use strict';  // eslint-disable-line
+
+/* global state, init, pickPosition */
 
 let sendMouse;
 

threejs/threejs-offscreencanvas.html

@@ -31,7 +31,8 @@
       <div>no OffscreenCanvas support</div>
     </div>
   </body>
-<script type="module">
+<script>
+'use strict';  // eslint-disable-line
 
 function main() {  /* eslint consistent-return: 0 */
   const canvas = document.querySelector('#c');