performance optimization for WebGL icosahedron

public_html/functions.js

@@ -199,7 +199,7 @@ window.onload = function() {
 		const length = direction.length();
 		
 		// Create cylinder
-		const geometry = new THREE.CylinderGeometry(radius, radius, length*lengthmultiplier, 5, 1);
+		const geometry = new THREE.CylinderGeometry(radius, radius, length*lengthmultiplier, 3, 1);
 		
 		// By default, cylinder is along Y-axis, so rotate it
 		geometry.rotateX(Math.PI / 2);
@@ -222,20 +222,30 @@ window.onload = function() {
 	// Animation state
 	let animating = true;
 	
+	let lastFrameTime = 0;
+	const targetFPS = 20;
+	const animMultiplier = 30/targetFPS;
+	const frameDuration = 1000 / targetFPS;
+	
 	// Animation function
-	function animate() {
-		requestAnimationFrame(animate);
-		
-		// Rotate if animation is enabled
-		if (animating) {
-			icosahedronGroup.rotation.x -= 0.002;
-			icosahedronGroup.rotation.y += 0.004;
-			icosahedronGroup.rotation.z -= 0.001;
-		}
-		
-		// Render
-		renderer.render(scene, camera);
+	function animate(now) {
+	  requestAnimationFrame(animate);
+
+	  const delta = now - lastFrameTime;
+	  if (delta < frameDuration) return;
+
+	  lastFrameTime = now;
+
+	  // Rotate if animation is enabled
+	  if (animating) {
+		icosahedronGroup.rotation.x -= 0.002 * animMultiplier;
+		icosahedronGroup.rotation.y += 0.004 * animMultiplier;
+		icosahedronGroup.rotation.z -= 0.001 * animMultiplier;
+	  }
+
+	  renderer.render(scene, camera);
 	}
+	
 	/* 
 	// Set up controls
 	const toggleAnimationBtn = document.getElementById('toggle-animation');