From fe90281de27abacd4036d9f2807e3ba351feb2fa Mon Sep 17 00:00:00 2001
From: ByteDice <bytedice.official@gmail.com>
Date: Sun, 5 Jan 2025 02:08:47 +0100
Subject: [PATCH] C U B E (openGL with three.js)

---
 globalStyle.css    |  4 ++++
 index.html         |  4 ++--
 style.css          |  2 --
 synthwaveEffect.js | 37 ++++++++++++++++++++++++++++++++-----
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/globalStyle.css b/globalStyle.css
index f246278..ba9e478 100644
--- a/globalStyle.css
+++ b/globalStyle.css
@@ -13,6 +13,10 @@ html {
   font-size: 1rem;
 }
 
+canvas {
+  position: absolute;
+}
+
 .pxFont {
   font-family: "Roboto", sans-serif;
   font-size: 1rem;
diff --git a/index.html b/index.html
index d755a93..0b27012 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
     <img src="./assets/starNoise_512x512.png" draggable="false" id="starNoise">
     <img src="./assets/synthwaveSun_40x40.png" draggable="false" class="synthSun">
 
-    <canvas id="synthwaveCanvas"></canvas>
+    <div id="canvasContainer"></div>
     
     <!-- change discord URL to server URL -->
     <ul class="navBar">
@@ -68,7 +68,7 @@
   </div>
 
   <!-- libs -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 
   <!-- global -->
   <script src="./globalScript.js"></script> <!-- compact the other global scripts into this global script -->
diff --git a/style.css b/style.css
index 81f7ad3..afdd5fb 100644
--- a/style.css
+++ b/style.css
@@ -41,6 +41,4 @@ body {
   position: absolute;
   top: round(0%, var(--pxDensityPx));
   left: round(0%, var(--pxDensityPx));
-  width: 100%;
-  height: 100%;
 }
\ No newline at end of file
diff --git a/synthwaveEffect.js b/synthwaveEffect.js
index 4adf822..6fa8fb9 100644
--- a/synthwaveEffect.js
+++ b/synthwaveEffect.js
@@ -1,6 +1,33 @@
-const canvas = document.getElementById("synthwaveCanvas");
-const gl = canvas.getContext("webgl");
+// 1. Scene Setup
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ alpha: true }); // Enable transparency
+renderer.setSize(window.innerWidth, window.innerHeight);
 
-if (!gl) {
-  alert("WebGL not supported, using static image.");
-}
\ No newline at end of file
+const mainDiv = document.getElementById("canvasContainer")
+mainDiv.appendChild(renderer.domElement)
+
+// 2. Make the background transparent
+renderer.setClearColor(0x000000, 0); // Transparent background (black color with alpha 0)
+
+// 3. Create a Cube
+const geometry = new THREE.BoxGeometry();
+const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+const cube = new THREE.Mesh(geometry, material);
+scene.add(cube);
+
+// 4. Camera Position
+camera.position.z = 5;
+
+// 5. Animation Loop
+function animate() {
+  requestAnimationFrame(animate);
+  
+  // Rotate the cube
+  cube.rotation.x += 0.01;
+  cube.rotation.y += 0.01;
+  
+  renderer.render(scene, camera);
+}
+
+animate();
\ No newline at end of file