clean: texture loading class

src/block.ts

@@ -13,26 +13,10 @@ export default class Block {
 	facesIndexes: number[] = []
 	position: Vector3
 
-	constructor(faces: Face[], coordinates: Vector3) {
+	constructor(faces: Face[], position: Vector3) {
 		this.faces = faces
-		this.position = coordinates
+		this.position = position
-
+		this.initFaces()
-		this.faces.forEach((face) => {
-			const dummy = new Object3D()
-			dummy.position.add(coordinates)
-			if (face.orientation === "Up" || face.orientation === "Down") {
-				dummy.rotateOnAxis(new Vector3(0, 1, 0), degToRad(90 * randInt(0, 4)))
-			}
-			dummy.updateMatrix()
-			face.instancedMesh?.setMatrixAt(face.instaceIndex, dummy.matrix)
-			this.facesIndexes.push(face.instaceIndex)
-			face.instaceIndex += 1
-		})
-	}
-
-	translate(vec3: Vector3) {
-		this.position.add(vec3)
-		this.updateFacesPosition()
 	}
 
 	setPosition(vec3: Vector3) {
@@ -49,4 +33,18 @@ export default class Block {
 			face.instancedMesh!.instanceMatrix.needsUpdate = true
 		})
 	}
+
+	private initFaces() {
+		this.faces.forEach((face) => {
+			const dummy = new Object3D()
+			dummy.position.add(this.position)
+			if (face.orientation === "Up" || face.orientation === "Down") {
+				dummy.rotateOnAxis(new Vector3(0, 1, 0), degToRad(90 * randInt(0, 4)))
+			}
+			dummy.updateMatrix()
+			face.instancedMesh?.setMatrixAt(face.instaceIndex, dummy.matrix)
+			this.facesIndexes.push(face.instaceIndex)
+			face.instaceIndex += 1
+		})
+	}
 }

src/main.ts

@@ -3,6 +3,7 @@ import * as THREE from "three"
 import { OrbitControls } from "three/addons/controls/OrbitControls.js"
 import Face from "./face"
 import Block from "./block"
+import TextureLoader from "./textureLoader"
 
 const scene = new THREE.Scene()
 const camera = new THREE.PerspectiveCamera(
@@ -19,29 +20,7 @@ const controls = new OrbitControls(camera, renderer.domElement)
 controls.update()
 document.body.appendChild(renderer.domElement)
 
-const image = document.createElement("img")
+new TextureLoader("/grass.png", 16, 16, onTextureLoaded)
-image.src = "/grass.png"
-image.addEventListener("load", onImageLoaded, false)
-
-function onImageLoaded() {
-	const textures = [] as THREE.Texture[]
-
-	for (let i = 0; i < 6; i++) {
-		const canvas = document.createElement("canvas")
-		canvas.width = 16
-		canvas.height = 16
-
-		const context = canvas.getContext("2d")
-		context?.drawImage(image, 0, 16 * i, 16, 16, 0, 0, 16, 16)
-
-		const texture = new THREE.Texture(canvas)
-		texture.needsUpdate = true
-		texture.magFilter = THREE.NearestFilter
-		textures.push(texture)
-	}
-
-	onTextureLoaded(textures)
-}
 
 function onTextureLoaded(textures: THREE.Texture[]) {
 	const chunk = [] as THREE.Vector3[]
@@ -68,6 +47,7 @@ function onTextureLoaded(textures: THREE.Texture[]) {
 
 	const cubes = [] as Block[]
 	chunk.forEach((block) => {
+		// TODO PUSH FACES ONLY IN CONTACT WITH AIR
 		cubes.push(new Block(faces, block))
 	})
 

src/textureLoader.ts

@@ -0,0 +1,55 @@
+import { NearestFilter, Texture } from "three"
+
+export default class TextureLoader {
+	private image: HTMLImageElement
+	private width: number
+	private height: number
+
+	constructor(
+		src: string,
+		width: number,
+		height: number,
+		callback: (textures: Texture[]) => void
+	) {
+		this.image = document.createElement("img")
+		this.image.src = src
+		this.width = width
+		this.height = height
+
+		this.image.addEventListener(
+			"load",
+			() => this.onImageLoaded(callback),
+			false
+		)
+	}
+
+	private onImageLoaded(callback: (textures: Texture[]) => void) {
+		const textures = [] as Texture[]
+
+		for (let i = 0; i < 6; i++) {
+			const canvas = document.createElement("canvas")
+			canvas.width = this.width
+			canvas.height = this.height
+
+			const context = canvas.getContext("2d")
+			context?.drawImage(
+				this.image,
+				0,
+				this.height * i,
+				this.width,
+				this.height,
+				0,
+				0,
+				this.width,
+				this.height
+			)
+
+			const texture = new Texture(canvas)
+			texture.needsUpdate = true
+			texture.magFilter = NearestFilter
+			textures.push(texture)
+		}
+
+		callback(textures)
+	}
+}