C U B E (openGL with three.js)

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