Как можно сделать анимацию плавнее?

let scene, camera, renderer;
let path, tubeGeometry;
const molecules = [];
const moleculeCount = 2000;
const moleculeGeometry = new THREE.SphereGeometry(0.05, 16, 16);
const moleculeMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const canvas = document.getElementById("myCanvas");
const tubeRadius = canvas.offsetWidth / 176;
const segmentCount = 40;
const rotationAngle = Math.PI / 3.5;
const speedCoefficient = 0.00001;
const fps = 25;
let clock = new THREE.Clock();
let interval = 1000 / fps;
let lastTime = 0;

function init() {
  // Set up scene, camera, and renderer
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ canvas: canvas });
  renderer.setSize(600, 600);

  createOvalPath();
  createMolecules();
  updateCameraPosition();

  window.addEventListener("resize", onWindowResize, false);
  onWindowResize();

  animate(0);
}

function createOvalPath() {
  // Create an oval-shaped tube geometry proportional to canvas size
  const canvasSize = Math.min(
    renderer.domElement.width,
    renderer.domElement.height
  );
  const a = canvasSize / 37; // semi-major axis (width)
  const b = canvasSize / 73; // semi-minor axis (height)
  const points = [];

  for (let i = 0; i <= segmentCount; i++) {
    const angle = (i / segmentCount) * Math.PI * 2;
    const x = a * Math.cos(angle);
    const y = b * Math.sin(angle);
    const z = 0;

    // Rotate the point around Y axis by 45 degrees
    const rotatedX = x * Math.cos(rotationAngle) - z * Math.sin(rotationAngle);
    const rotatedZ = x * Math.sin(rotationAngle) + z * Math.cos(rotationAngle);

    points.push(new THREE.Vector3(rotatedX - canvasSize / 80, y, rotatedZ));
  }

  path = new THREE.CatmullRomCurve3(points);
  tubeGeometry = new THREE.TubeGeometry(path, 200, tubeRadius, 8, true);
}

function createMolecules() {
  molecules.length = 0; // Clear existing molecules

  for (let i = 0; i < moleculeCount; i++) {
    const molecule = new THREE.Mesh(moleculeGeometry, moleculeMaterial);
    scene.add(molecule);
    molecules.push({
      mesh: molecule,
      position: Math.random(),
      speed: Math.random() * 0.00001 + 0.000002 // Much slower speed
    });
  }
}

function updateCameraPosition() {
  const canvasSize = Math.min(
    renderer.domElement.width,
    renderer.domElement.height
  );
  camera.position.z = canvasSize / 27.5;
}

function onWindowResize() {
  const canvasSize = Math.min(window.innerWidth, window.innerHeight);
  renderer.setSize(canvasSize, canvasSize);
  camera.aspect = 1;
  camera.updateProjectionMatrix();

  createOvalPath(); // Recreate oval path based on new canvas size
  updateCameraPosition();
}

function animate(time) {
  requestAnimationFrame(animate);

  const delta = clock.getDelta(); // Get time elapsed since last frame

  if (time - lastTime >= interval) {
    lastTime = time;

    molecules.forEach((molecule) => {
      molecule.position += molecule.speed * delta;
      if (molecule.position > 1) molecule.position -= 1; // Keep within the range [0, 1]
      const pointOnPath = path.getPointAt(molecule.position);
      const randomOffset = new THREE.Vector3(
        (Math.random() - 0.5) * tubeRadius,
        (Math.random() - 0.5) * tubeRadius,
        (Math.random() - 0.5) * tubeRadius
      );
      molecule.mesh.position.set(
        pointOnPath.x + randomOffset.x,
        pointOnPath.y + randomOffset.y,
        pointOnPath.z + randomOffset.z
      );
    });

    renderer.render(scene, camera);
  }
}

init();

html {
  font-size: 0.655vw !important;
}

canvas {
  width: 60rem !important;
  height: 60rem !important;
  aspect-ratio: 1 / 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<canvas id="myCanvas"></canvas>