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

Question

[Вячеслав Яшников]

Анимация движется очень быстро, не могу понять почему изменение смещения точек в функции animate никак не влияет на плавность, хотелось бы чтобы анимация была более плавная, сейчас она выглядит как шум

Answer 1

[Roman]

Такой вариант подойдет ?

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: 0x3076e2 });
const canvas = document.getElementById("myCanvas");
const tubeRadius = canvas.offsetWidth / 176;
const segmentCount = 400; // Увеличили количество сегментов для еще большей плавности
const rotationAngle = Math.PI / 3.5; // 45 degrees in radians
const speedCoefficient = 0.00005; // Еще медленнее движение
let clock = new THREE.Clock();
const fps = 60; // Частоту кадров оставляем на 60
let interval = 1000 / fps;
let lastTime = 0;

function init() {
  // Устанавливаем сцену, камеру и рендерер
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffffff);
  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() {
  // Создаем эллиптическую трубу пропорциональную размеру canvas
  const canvasSize = Math.min(
    renderer.domElement.width,
    renderer.domElement.height
  );
  const a = canvasSize / 35;
  const b = canvasSize / 70;
  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;

    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, 400, tubeRadius, 16, true);
}

function createMolecules() {
  molecules.length = 0;

  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.05 + 0.01 // Еще медленное движение
    });
  }
}

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

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

  createOvalPath();
  updateCameraPosition();
}

function animate(time) {
  requestAnimationFrame(animate);

  const delta = clock.getDelta();

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

    molecules.forEach((molecule) => {
      molecule.position += molecule.speed * delta;
      if (molecule.position > 1) molecule.position -= 1;

      const pointOnPath = path.getPointAt(molecule.position);

      molecule.mesh.position.lerp(pointOnPath, 0.05);
    });

    renderer.render(scene, camera);
  }
}

init();

Answer 2

[Сергей Водаков]

const speedCoefficient = 0.0001;
Константа нигде не используется, поэтому ее изменение ни на что не влияет.
Если в функции animate(time)

molecules.forEach((molecule) => {
      molecule.position += molecule.speed * delta;

Заменить на:

molecules.forEach((molecule) => {
      molecule.position += molecule.speed * delta * speedCoefficient;

То все станет медленнее, и толщина кольца уменьшится.
при speedCoefficient = 1 будет так, как до изменения.