Как воспроизводить и останавливать анимацию отдельных объектов three.js?

Question

[Андрей Шувалов]

Начал недавно изучать three.js, скачал пример с офф сайта , попробовал сделать стоп анимации, если объект "собрался" и воспроизведение анимации по нажатию на кнопку.

function animate() {
			if (anim){
			id = requestAnimationFrame( animate );
			render();
			stats.update();
				if (uniforms.amplitude.value <= 0.0005) {
					anim = false;
				}
			}
		}
		function render() {
			timer += 0.001;
			uniforms.amplitude.value = 1.0 + Math.sin( timer* 50);
			controls.update();
			renderer.render( scene, camera );
		}
		document.getElementById("but").addEventListener("click", function(){
			anim = true;
			animate();
		});

Если полностью останавливать всю анимацию, то все нормально, но нельзя например покрутить камерой вокруг объекта.
Попробовал изменить функцию анимации, но в таком случае после каждого нажатия на кнопку, анимация "ускоряется", а "фпс" в левом верхнем углу пишется не 60, как обычно, а 200, 300, 600+ и тд.

function animate() {
			id = requestAnimationFrame( animate );
			if (anim){
				timer += 0.001;
				uniforms.amplitude.value = 1.0 + Math.sin( timer* 50);
				controls.update();
				renderer.render( scene, camera );
				if (uniforms.amplitude.value <= 0.0005) {
					anim = false;
				}
			} else { 
				render(); 
			}
      stats.update();
		}
		function render() {
			controls.update();
			renderer.render( scene, camera );
		}

Подскажите в чем проблема этого ускорения анимации, или как можно по другому воспроизводить анимации отдельных объектов.

Answer 1

[Андрей Шувалов]

В общем у меня получилось пофиксить это путем остановки анимации перед каждым повторным ее вызовом

function animate() {
					if (anim) {
						cancelAnimationFrame(id)
						id = requestAnimationFrame( animate );
						explode();
					} else {
						cancelAnimationFrame(id)
						id = requestAnimationFrame( animate );
						render(); 
					}
			stats.update();
		}

Не знаю на сколько это правильно или оптимально, но по крайней мере работает так как надо.