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