From 961274e8f5f5e20e2643da12028aaecfdc745f9e Mon Sep 17 00:00:00 2001
From: Mylloon <kennel.anri@tutanota.com>
Date: Tue, 22 Nov 2022 10:40:56 +0100
Subject: [PATCH] add plane

---
 js/Plane.js | 29 +++++++++++++++++++++++++++++
 js/main.js  | 14 +++++++++-----
 js/utils.js | 19 +++++++++++++++++++
 3 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 js/Plane.js
 create mode 100644 js/utils.js

diff --git a/js/Plane.js b/js/Plane.js
new file mode 100644
index 0000000..c71adf7
--- /dev/null
+++ b/js/Plane.js
@@ -0,0 +1,29 @@
+import { Element } from "./Element.js";
+import { textureGradient } from "./utils.js";
+
+export class Plane extends Element {
+    constructor(width, height, color1, color2) {
+        super();
+        console.log(width, height);
+
+        const Tcolor1 = new THREE.Color(color1);
+        const Tcolor2 = new THREE.Color(color2);
+
+        this.data = new THREE.Mesh(
+            new THREE.PlaneGeometry(width, height),
+
+            new THREE.MeshBasicMaterial({
+                color: color1,
+                side: THREE.DoubleSide,
+                map: textureGradient(
+                    width,
+                    height,
+                    Tcolor1.getStyle(),
+                    Tcolor2.getStyle()
+                ),
+            })
+        );
+
+        this.data.rotation.x = 2;
+    }
+}
diff --git a/js/main.js b/js/main.js
index 56b45c8..4038a7f 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,6 @@
 import { Env } from "./Env.js";
-import { Element } from "./Element.js";
+import { Cube } from "./Cube.js";
+import { Plane } from "./Plane.js";
 
 window.addEventListener("load", () => main());
 
@@ -8,14 +9,17 @@ const main = () => {
 
     document.body.appendChild(env.getDomElement());
 
-    const cube = new Element();
-    env.addToScene(cube);
+    const plan = new Plane(
+        window.innerWidth / 50,
+        10,
+        THREE.Color.NAMES.white,
+        THREE.Color.NAMES.black
+    );
+    env.addToScene(plan);
 
     const animate = () => {
         requestAnimationFrame(animate);
 
-        cube.rotate();
-
         env.render();
     };
 
diff --git a/js/utils.js b/js/utils.js
new file mode 100644
index 0000000..81deb74
--- /dev/null
+++ b/js/utils.js
@@ -0,0 +1,19 @@
+export const textureGradient = (width, height, color1, color2) => {
+    const cnv = document.createElement("canvas");
+
+    const ctx = cnv.getContext("2d");
+    ctx.rect(0, 0, cnv.width, cnv.height);
+
+    console.log(width, height);
+    const gradient = ctx.createLinearGradient(0, 0, width / 4, 15 * height);
+    gradient.addColorStop(0, color1);
+    gradient.addColorStop(1, color2);
+
+    ctx.fillStyle = gradient;
+    ctx.fill();
+
+    const texture = new THREE.Texture(cnv);
+    texture.needsUpdate = true;
+
+    return texture;
+};