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');