diff --git a/src/block.ts b/src/block.ts index 75bc471..9ddcd9b 100644 --- a/src/block.ts +++ b/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.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() + this.position = position + this.initFaces() } 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 + }) + } } diff --git a/src/main.ts b/src/main.ts index f6dcd02..dfdbb4e 100644 --- a/src/main.ts +++ b/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") -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) -} +new TextureLoader("/grass.png", 16, 16, onTextureLoaded) 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)) }) diff --git a/src/textureLoader.ts b/src/textureLoader.ts new file mode 100644 index 0000000..7cc4943 --- /dev/null +++ b/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) + } +}