square shape made of triangles

synthwaveEffect.js

@@ -1,33 +1,87 @@
-// 1. Scene Setup
+CURRENT_PAGE = PAGES.SYNTHWAVE
-const scene = new THREE.Scene();
+
-const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const scene = new THREE.Scene()
-const renderer = new THREE.WebGLRenderer({ alpha: true }); // Enable transparency
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
-renderer.setSize(window.innerWidth, window.innerHeight);
+const renderer = new THREE.WebGLRenderer({ alpha: true })
+
+if (!renderer) {
+  alert("Renderer failed to load")
+}
+
+renderer.setSize(window.innerWidth, window.innerHeight)
 
 const mainDiv = document.getElementById("canvasContainer")
 mainDiv.appendChild(renderer.domElement)
 
-// 2. Make the background transparent
+renderer.setClearColor(0x000000, 0)
-renderer.setClearColor(0x000000, 0); // Transparent background (black color with alpha 0)
 
-// 3. Create a Cube
+const geometry = new THREE.BufferGeometry()
-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
+let meshVerts = [
-camera.position.z = 5;
+  1, 0, 1,
+  -1, 0, 1,
+  -1, 0, -1,
+  1, 0, -1
+]
 
-// 5. Animation Loop
+let meshIndices = [
-function animate() {
+  0, 1, 2,
-  requestAnimationFrame(animate);
+  0, 2, 3
+]
 
-  // Rotate the cube
-  cube.rotation.x += 0.01;
-  cube.rotation.y += 0.01;
 
-  renderer.render(scene, camera);
+geometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(meshVerts), 3))
+geometry.setIndex(new THREE.BufferAttribute(new Float32Array(meshIndices), 3))
+geometry.computeVertexNormals()
+
+const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })
+const mesh = new THREE.Mesh(geometry, material)
+
+scene.add(mesh)
+
+camera.position.z = 5
+camera.position.y = 2
+
+
+function generateHill(width, length, segments, minHeight, maxHeight, prevHillVerts) {
+  let hillVerts = []
+  let startPos = -width / 2
+
+  for (i = 0; i < segments; i++) {
+    hillVerts.push(i / (segments - 1) * width + startPos)
+    hillVerts.push(0)
+    hillVerts.push(length / 2)
+
+    hillVerts.push(i / (segments - 1) * width + startPos)
+    hillVerts.push(0)
+    hillVerts.push(-length / 2)
   }
 
-animate();
+  const geometry = new THREE.BufferGeometry()
+
+  geometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(hillVerts), 3))
+  //geometry.setIndex(new THREE.BufferAttribute(new Float32Array(hillIndices), 3))
+  //geometry.computeVertexNormals()
+
+  const material = new THREE.MeshBasicMaterial({ color: 0x00FF00, wireframe: true })
+  const newMesh = new THREE.Mesh(geometry, material)
+
+  return newMesh
+}
+
+
+function animate() {
+  requestAnimationFrame(animate)
+  
+  renderer.render(scene, camera)
+}
+
+scene.add(generateHill(2, 2, 9))
+animate()
+
+
+function onResizeSynthWave() {
+  renderer.setSize(window.innerWidth, window.innerHeight)
+  camera.aspect = window.innerWidth / window.innerHeight
+  camera.updateProjectionMatrix()
+}