MazeMesh as module

MazeMesh.js

@@ -0,0 +1,64 @@
+import * as THREE from 'three';
+
+const mazeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
+
+class MazeMesh extends THREE.InstancedMesh {
+    constructor( width, length, material ) {
+        super( mazeGeometry, material, width*length - 2 );
+        this.length = length
+        this.width = width
+        this.map = new Array(length).fill().map(() => new Array(width).fill(1))
+        this.start = new THREE.Vector3(width/2, .1, length/2)
+        this.exit = new THREE.Vector3(Math.floor(width/2), 0, 1)
+        this.count = length * width - 2
+
+        this.dig(this.exit)
+        this.dig(new THREE.Vector3(Math.floor(width/2), 0, 0))
+        this.build ( this.exit )
+        let matrix = new THREE.Matrix4()
+        let i=0
+        this.map.forEach((row, z) => {
+            row.forEach((isWall, x) => {
+                if (isWall) {
+                    matrix.setPosition( x + .5 - width/2, 0.5, z + .5 - length/2)
+                    this.setMatrixAt( i, matrix );
+                    i++
+                }
+            })
+        })
+    }
+    
+    dig(position) {
+        this.map[position.z][position.x] = 0
+    }
+
+    static DIRECTIONS = [
+        new THREE.Vector3( 0, 0, -1),
+        new THREE.Vector3( 0, 0,  1),
+        new THREE.Vector3(-1, 0,  0),
+        new THREE.Vector3( 1, 0,  0),
+    ]
+    build(position) {
+        for (var direction of Array.from(this.constructor.DIRECTIONS).sort(x => .5 - Math.random())) {
+            var step1 = position.clone().add(direction)
+            var step2 = step1.clone().add(direction)
+            if (this.isWall(step2) == 1) {
+                this.dig(step1)
+                this.dig(step2)
+                this.count -= 2
+                this.build(step2)
+            }
+        }
+    }
+
+    isWall(position) {
+        if (0 <= position.x && position.x < this.width &&
+            0 <= position.z && position.z < this.length) {
+            return this.map[Math.floor(position.z)][Math.floor(position.x)]
+        } else {
+            return -1
+        }
+    }
+}
+
+export { MazeMesh }

index.html

@@ -19,7 +19,8 @@
 			{
 				"imports": {
 					"three": "https://unpkg.com/three@0.152.2/build/three.module.js",
-					"three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/"
+					"three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/",
+					"MazeMesh": "./MazeMesh.js"
 				}
 			}
 		</script>

main.js

@@ -12,65 +12,7 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 import { Water } from 'three/addons/objects/Water.js';
 import { Sky } from 'three/addons/objects/Sky.js';
 
-const mazeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
+import { MazeMesh } from 'MazeMesh';
-class MazeMesh extends THREE.InstancedMesh {
-    constructor( width, length, material ) {
-        super( mazeGeometry, material, width*length - 2 );
-        this.length = length
-        this.width = width
-        this.map = new Array(length).fill().map(() => new Array(width).fill(1))
-        this.start = new THREE.Vector3(width/2, .1, length/2)
-        this.exit = new THREE.Vector3(Math.floor(width/2), 0, 1)
-        this.count = length * width - 2
-
-        this.dig(this.exit)
-        this.dig(new THREE.Vector3(Math.floor(width/2), 0, 0))
-        this.build ( this.exit )
-        let matrix = new THREE.Matrix4()
-        let i=0
-        this.map.forEach((row, z) => {
-            row.forEach((isWall, x) => {
-                if (isWall) {
-                    matrix.setPosition( x + .5 - width/2, 0.5, z + .5 - length/2)
-                    this.setMatrixAt( i, matrix );
-                    i++
-                }
-            })
-        })
-    }
-    
-    dig(position) {
-        this.map[position.z][position.x] = 0
-    }
-
-    static DIRECTIONS = [
-        new THREE.Vector3( 0, 0, -1),
-        new THREE.Vector3( 0, 0,  1),
-        new THREE.Vector3(-1, 0,  0),
-        new THREE.Vector3( 1, 0,  0),
-    ]
-    build(position) {
-        for (var direction of Array.from(this.constructor.DIRECTIONS).sort(x => .5 - Math.random())) {
-            var step1 = position.clone().add(direction)
-            var step2 = step1.clone().add(direction)
-            if (this.isWall(step2) == 1) {
-                this.dig(step1)
-                this.dig(step2)
-                this.count -= 2
-                this.build(step2)
-            }
-        }
-    }
-
-    isWall(position) {
-        if (0 <= position.x && position.x < this.width &&
-            0 <= position.z && position.z < this.length) {
-            return this.map[Math.floor(position.z)][Math.floor(position.x)]
-        } else {
-            return -1
-        }
-    }
-}
 
 const latitude  = THREE.MathUtils.degToRad(35)
 const longitude = THREE.MathUtils.degToRad(25)