diff --git a/public_html/functions.js b/public_html/functions.js
index d4c7520..41f4e43 100644
--- a/public_html/functions.js
+++ b/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');