C U B E (openGL with three.js)

globalStyle.css

@@ -13,6 +13,10 @@ html {
   font-size: 1rem;
 }
 
+canvas {
+  position: absolute;
+}
+
 .pxFont {
   font-family: "Roboto", sans-serif;
   font-size: 1rem;

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 -->

style.css

@@ -41,6 +41,4 @@ body {
   position: absolute;
   top: round(0%, var(--pxDensityPx));
   left: round(0%, var(--pxDensityPx));
-  width: 100%;
-  height: 100%;
 }

synthwaveEffect.js

@@ -1,6 +1,33 @@
-const canvas = document.getElementById("synthwaveCanvas");
+// 1. Scene Setup
-const gl = canvas.getContext("webgl");
+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) {
+const mainDiv = document.getElementById("canvasContainer")
-  alert("WebGL not supported, using static image.");
+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();