Как управлять анимацией в Three.js?

Question

[serhii328764]

Привет! На проекте с использованием three.js построен глобус, на котором есть точки стран. При нажатии на точку страны происходит прокрутка глобуса в нужную точку. Как управлять данной анимацией? В идеале получить событие завершения анимации для выполнения связанного кода.

Сейчас это выглядит так:

raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);

Если есть пересечение со слоем точки нужной страны, то задаются координаты:
target.x и target.y и глобус начинает крутиться.
Как управлять этой анимацией?

Comments

[Николай Чуприк]

Вопрос не понятен, конкретизируйте. Что значит: как управлять?

Какой вопрос — такой ответ. Надо с каждым кадром пересчитывать угол поворота глобуса и рендерить. Желательно поворачивать глобус не с постоянной скоростью, а с ускорение вначале и замедлением в конце. Ничего конкретнее сказать нельзя, не видя устройство модели.

[serhii328764]

я только начинаю знакомиться с проектом и с three.js в частности, поэтому многое пока и не ясно. Выше вы пишете:
"Желательно поворачивать глобус не с постоянной скоростью, а с ускорение вначале и замедлением в конце. "

Это все в функции render реализуется?

[Николай Чуприк]

serhii328764, нет, всю механику вы рассчитываете сами.

[serhii328764]

Николай, а можете прояснить ситуацию. Есть функция
function animate() {
requestAnimationFrame(animate);
render();
}

в функции render() вся механика.
Так вот - когда загрузить компьютер, например, открыть четрые разных браузера, то время вращения от двух одинаковых точек удлинняется. Я правильно понимаю, что мы на это влиять не можем, чтобы всегдя была одинаковая длительность, так как функция requestAnimationFrame сама говорит когда браузер готов для следующей перерисовки, и из-за того, что процессор более загружен, то время увеличивается. Или не так?