javascript - Three.js - 网格对象位置的异步更新

Question

我正在开发一个 Three.js 应用程序，我在其中绘制了一个显示对象的网格。我有多个对象，根据它们的位置在网格上呈现。我根据从 REST API 获取的数据创建和渲染元素——我每 300 毫秒轮询一次。目前，我正在 animate() 函数中进行提取调用，我在其中检查上次请求是否已经过了 300 毫秒。当我从 API 收到数据时，我迭代所有网格对象并将它们的位置更新到它们的新位置。

我无法让对象平稳地从一个位置移动到另一个位置 - 当设置新位置时，元素只是在网格上“跳跃”。 我怎样才能使物体平稳移动？有没有更好的方法来更新对象位置和处理来自 API 的异步数据？

我没有添加我的代码，因为它很长而且大部分都不相关..

编辑:-更多信息

在我的动画函数中，我获取数据以获取要添加到场景中的新对象，或者如果项目已经存在，则更新它们的位置。请参阅此代码示例以更好地理解我正在尝试做什么:

  const objects = {}; // This holds all objects Meshes in scene

    function animate(){
      if (new Date().getTime() - lastTime  > 300){
         axios
          .get(DATA_URL)
          .then(data => {
            /** Data is array of objects to add or update in scene.
             *  Here I am iterating over the data array and see if item exists  
             *  in objects or not. If exists - I just update Mesh positions, 
             . otherwise I create a new mesh and add it to the scene
*/


             data.forEach(item => {
               let mesh;
               if (objects[item.id]){
                 mesh = objects[item.id]
               }else{

                 mesh = // Create new mesh
                 objects[item.id] = mesh
               }

              // update position
               mesh.position.set(item.x, item.y, item.z);
             })
          })
      }
    }

Answer 1

如果我没听错，那么，作为一个选项，您可以使用 Tween.js 库来完成:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(1, 2, 3);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);

var items = [];
setInterval( addItem, 300);

function addItem(){
  var tween = new TWEEN.Tween({val:0}).to({val:1}, 100).onUpdate(
    function(value){
      items.forEach(v => {
        v.position.z -= value.val * 0.5;
      })
    }
  ).onComplete(item)
  .start();
}

function item(){
  var item = new THREE.Mesh(new THREE.SphereGeometry(0.25, 4, 2), new THREE.MeshBasicMaterial({color: Math.random() * 0xffffff, wireframe: true}));
  scene.add(item);
  items.push(item);
}

render();
function render(){
  requestAnimationFrame(render);
  TWEEN.update();
  renderer.render(scene, camera);
}

body{
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>