add plane

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;
+    }
+}

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();
     };
 

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;
+};