alina
/
alinamarquardt.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

performance optimization for WebGL icosahedron

main
Alina Marquardt 2025-05-12 10:49:28 +02:00
parent ee9194da73
commit f5c5ebbb66
1 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public_html/functions.js
View File

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