Проблема с перемещением сетки в Babylon.js

Question

Я пытаюсь создать игру с красным предупреждением, чтобы заострить свои навыки JS и получить базовое понимание развития игры. Я пытаюсь переместить блок-сетку из одной части земли в другую. Однако он мгновенно перемещает блок, а не оживляет его.

Вот мой babylonjs-площадка ... http://www.babylonjs-playground.com/#OYE6Q

Я думаю, что проблема с этим блоком кода ...

var moveUnit = function (position, item) { 
    if (position.x > 0) { 
     while (item.position.x < position.x) { 
      item.position.x += 0.001; 
     } 
    } else { 
     while (item.position.x > position.x) { 
      item.position.x -= 0.001; 
     } 
    } 

    if (position.z > 0) { 
     while (item.position.z < position.z) { 
      item.position.z += 0.001; 
     } 
    } else { 
     while (item.position.z > position.z) { 
      item.position.z -= 0.001; 
     } 
    } 
} 

Answer 1

while (item.position.x < position.x) { 
     item.position.x += 0.001; 
    } 

Используя время цикла, ваше обновляют положение до конечной позиции с шагом в одном и том же кадре игры. Это равносильно тому:

item.position.x = position.x; 

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

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

Для этого объекты должны иметь представление о том, где они движутся между кадрами, и вам нужно ввести понятие времени в свою игру.

Посмотрите на this tutorial на примере концепции.

Answer 2

BABYLON.js имеет встроенную функцию анимации, которая автоматически обрабатывает временные ограничения для ячеек. Вот ссылка на рабочий пример!

http://www.babylonjs-playground.com/#OYE6Q#4