From 64ee0f1e832ddd5e3ecfc8a7589f8b7283936b76 Mon Sep 17 00:00:00 2001
From: Florian Sylvain <floriansylvain@mailo.com>
Date: Sun, 9 Jun 2024 22:29:39 +0200
Subject: [PATCH] feat: textures

---
 public/grass.png | Bin 0 -> 1283 bytes
 src/block.ts     |  10 ++++++
 src/face.ts      |  16 +++++++---
 src/main.ts      |  77 ++++++++++++++++++++++++++++++-----------------
 4 files changed, 71 insertions(+), 32 deletions(-)
 create mode 100644 public/grass.png

diff --git a/public/grass.png b/public/grass.png
new file mode 100644
index 0000000000000000000000000000000000000000..f45330956ac4b21ca1dd57c7ea13a7fd422363d6
GIT binary patch
literal 1283
zcmV+e1^oJnP)<h;3K|Lk000e1NJLTq000mG003YJ0ssI2o3my200001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1ei%gK~z{r?U&th
z8$}R>PtVUvmgHbNcH$%uiYls-0*V*l3SN#E;Kg_YDk;kR*zr&NBWZVL_<GC@H{5ZB
z*0MA^+jIJy)7`3)z4=MHP#dK^$z*%7q;@M+DaoFwUG&Xk>0T`;@Sw><H7cxRGu3;K
zQ|#+IY3}Q`RlQZaQm8j-rdBwlcBgu&aO7t+sD6-c`(YlP%MN6pkOAO*g_mO4KB`sK
zi_Qnsq%e~vKWs~hY(*g~I_Zy{!;u2KiwyWnr5DnPbnORtN;E)0xkIAnmB%3ny6r~s
zl?41&T1n^9LRzZ+rr?IG6d;PMOSQ?5krt|zI8YJ2a1G_1%LuknnACn(eeXoW+|6+T
zA7sEc&yVTtTJcEnlmjF}0F-9#?caDCS?&uIubpH#?I?(@YZ-yWQMgU7&W#L->}=E?
zx=^r|vO|eFxS=q<b?+N-XaIZeNy?3%@c{OzE$<mBTbI&sn$&QHMlT-)rGnvkxBsAL
z!vHGAeY=#QmB(}xto9u;9`{>3q`^=RiwCuPY^^eAkd8hJt^o*ufoPEKUDp2WMzKJH
z(Gfs$kLz^hlb(&VNy5En9eb(v-rJV`4PL2U9WdP1r!pc)$a&toQSKF{Q6D_;MxqyR
zy0@2C5P#?&@}P%BQ+VoLdGoXI47_0fPYvKT%yHsse{|5UAwK`ku-|?7C~L0XiD3=}
zz3w|yo&LQryTvcXm*1x4*(}|KI<yvAm@JHD%+zG*E`n;+ci2yxkS}BW{LPRaV$E$@
z)!9wt@%%iu*!Ipc5#hl?vwT4tS=d^>O7R;VrkgbG)$wpzyc_m^-dmjI^|LA6hS~Wr
z?N3TpQ%mcZ@8jy1nf>tfL0OjdXQPcaT%>drQwWR%yld6n>1KU0=JPcFH5pem`~IuL
z;4&L@YlAz@>+Q?cKj{RQ{use0!L>FHS~R@nJ+ScGz#<GW4Ix#YE3h;0&okNs!(xcO
zm4<m97C945zRlL%pCu0icPzz2xnp-K(^Sh?#_d$bj#*WzO$3!zOD#PzgcMN;cFKHu
zC#tlv8OQZF!fiDhQl$P+caqL*suM9Wpbf<qqd^o1;-*^HTfQK|Ec5--Wj8W#jxHR_
z21X59aBJ9wfH_JWslwK=kpc9lM?+!EEuhtH;(L}^An<YJK5JX10!DW><d{Pz2QF0E
zLQJb}QKj>YY?afzSUBysKla-2MFJLI91I%6M2FM;v^20;#z-<fObf(z^RSzT-8}5(
zVK)!EdFbWb&BJaU{x|awUmqua+;LMXSF05?P8HAARe^$0Y_X<U<J%WYm}aza>u$Iz
z=dQ?O)RTvt^OWb=ZH!+W&tb$XC!Fyr&k~<p0MbpESSZ3+r%fr_GR7}Y7o<bd=wvEZ
zV%K(>rd}^{LK75MgTWxv0+8XwPd8G-jVw?aNYQL`cUnK$IOb<CL?x37Tgp_orMP3Y
zl8`P9{N7FxlK9l2LwtRbD?dO(;WUhWYF)Hvek_WY6I%RvvE6vgu}2x0$At{~k5sr!
tgwyY3?sa7Guk+xJ$GDq^|9BqM{sK-R{8LI{EN=h+002ovPDHLkV1m}oZZ!Y^

literal 0
HcmV?d00001

diff --git a/src/block.ts b/src/block.ts
index 7ff66d8..75bc471 100644
--- a/src/block.ts
+++ b/src/block.ts
@@ -1,5 +1,12 @@
 import { Object3D, Vector3 } from "three"
 import Face from "./face"
+import { degToRad } from "three/src/math/MathUtils.js"
+
+function randInt(min: number, max: number): number {
+	const minCeiled = Math.ceil(min)
+	const maxFloored = Math.floor(max)
+	return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled)
+}
 
 export default class Block {
 	faces: Face[]
@@ -13,6 +20,9 @@ export default class Block {
 		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)
diff --git a/src/face.ts b/src/face.ts
index 7591af5..62d4ddd 100644
--- a/src/face.ts
+++ b/src/face.ts
@@ -1,8 +1,8 @@
 import {
-	Color,
 	InstancedMesh,
-	MeshLambertMaterial,
+	MeshBasicMaterial,
 	PlaneGeometry,
+	Texture,
 	Vector3
 } from "three"
 
@@ -43,14 +43,20 @@ export const FACE_ORIENTATION = [
 ]
 
 export default class Face {
-	material: MeshLambertMaterial
+	material: MeshBasicMaterial
 	orientation: Orientation
 	geometry: PlaneGeometry
 	instancedMesh: InstancedMesh | undefined
 	instaceIndex: number = 0
 
-	constructor(color: Color, orientation: Orientation, instancesCount: number) {
-		this.material = new MeshLambertMaterial({ color })
+	constructor(
+		orientation: Orientation,
+		instancesCount: number,
+		texture: Texture
+	) {
+		this.material = new MeshBasicMaterial({
+			map: texture
+		})
 
 		this.orientation = orientation
 
diff --git a/src/main.ts b/src/main.ts
index 5f14aaf..f6dcd02 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,39 +19,62 @@ const controls = new OrbitControls(camera, renderer.domElement)
 controls.update()
 document.body.appendChild(renderer.domElement)
 
-const ambientLight = new THREE.AmbientLight(new THREE.Color("white"), 5)
-scene.add(ambientLight)
+const image = document.createElement("img")
+image.src = "/grass.png"
+image.addEventListener("load", onImageLoaded, false)
 
-const chunk = [] as THREE.Vector3[]
-for (let i = -16; i < 16; i++) {
-	for (let j = -16; j < 16; j++) {
-		chunk.push(
-			new THREE.Vector3(
-				i,
-				Math.floor(Math.sin(i / 12) * 4 + Math.cos(j / 12) * 4),
-				j
-			)
-		)
+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)
 }
 
-const faces = [
-	new Face(new THREE.Color("white"), "Up", chunk.length),
-	new Face(new THREE.Color("red"), "Down", chunk.length),
-	new Face(new THREE.Color("blue"), "North", chunk.length),
-	new Face(new THREE.Color("green"), "East", chunk.length),
-	new Face(new THREE.Color("yellow"), "West", chunk.length),
-	new Face(new THREE.Color("purple"), "South", chunk.length)
-]
+function onTextureLoaded(textures: THREE.Texture[]) {
+	const chunk = [] as THREE.Vector3[]
+	for (let i = -16; i < 16; i++) {
+		for (let j = -16; j < 16; j++) {
+			chunk.push(
+				new THREE.Vector3(
+					i,
+					Math.ceil(Math.sin(i / 25) * 8 + Math.cos(j / 25) * 8),
+					j
+				)
+			)
+		}
+	}
 
-const cubes = [] as Block[]
-chunk.forEach((block) => {
-	cubes.push(new Block(faces, block))
-})
+	const faces = [
+		new Face("Up", chunk.length, textures[0]),
+		new Face("North", chunk.length, textures[1]),
+		new Face("South", chunk.length, textures[2]),
+		new Face("East", chunk.length, textures[3]),
+		new Face("West", chunk.length, textures[4]),
+		new Face("Down", chunk.length, textures[5])
+	]
 
-faces.forEach((face) => {
-	if (face.instancedMesh) scene.add(face.instancedMesh)
-})
+	const cubes = [] as Block[]
+	chunk.forEach((block) => {
+		cubes.push(new Block(faces, block))
+	})
+
+	faces.forEach((face) => {
+		if (face.instancedMesh) scene.add(face.instancedMesh)
+	})
+}
 
 camera.position.x = 20
 camera.position.y = 20