Могу ли я перейти к определенной позиции анимации при нажатии кнопки вместо анимации моей сетки?

#javascript #three.js

#javascript #three.js

Вопрос:

У меня есть измененная 3D сетка, которую я могу загрузить с помощью threejs . После загрузки модели я могу запустить анимационные клипы.

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

Есть ли какой-либо способ сделать это в threejs или есть какой-либо другой подход, который вы можете предложить?

Ответ №1:

Есть ли какой-либо способ сделать это в threejs или есть какой-либо другой подход, который вы можете предложить?

Да, я думаю, это должно быть возможно. При воспроизведении анимационного клипа с экземпляром AnimationAction вы можете немедленно приостановить его, а затем установить time свойству желаемое значение. Код выглядит следующим образом:

   const clipAction = mixer.clipAction( clip );
  clipAction.play();
  clipAction.paused = true;
  clipAction.time = 0.5;
  

Подход продемонстрирован здесь: https://jsfiddle.net/w6catxfh/1

Ответ №2:

Вы можете сделать это, если ваша анимация может быть параметризована по времени. Рассмотрим два метода перемещения куба вверх. С одной стороны, вы можете просто указать кубу перемещаться вверх от его текущей позиции на определенную величину в каждом цикле анимации:

 var animate = function () {
                requestAnimationFrame( animate );

                cube.position.y  = 0.01;

                renderer.render( scene, camera );
            };
  

Другой способ сделать ту же анимацию — описать положение куба как функцию времени:

 var currentTime = 0;

var animate = function () {
                requestAnimationFrame( animate );

                cube.position.y = 0.01 * currentTime;
                currentTime  = 1;

                renderer.render( scene, camera );
            };
  

Визуальный эффект тот же, но вы можете изменить currentTime переменную, чтобы она перемещалась по «временной шкале» анимации.