如何在Three.js中将物体从位置{x，y}移动到{newx，newy}？

Question

X 和 y 是物体的坐标。Z 始终为 0。如何使用 Three.js 将此对象移动到新位置（具有可见的移动动画，而不是在不同位置跳出）？

编辑：物体（网格）的代码示例

var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), new THREE.MeshBasicMaterial({img: THREE.ImageUtils.loadTexture('img.png')}))
scene.add(mesh)

编辑2：我可以通过mesh.position.x = newx和mesh.position.y = newy使我的网格跳到新位置，但我希望它看起来像JQuery动画中那样平滑。

- Bartek Kosa

---

请展示一些代码以帮助我们理解您想要的内容。 - user3998237

Answer 1

任何物体动画的关键是以高刷新率移动微小的量。这意味着需要多次渲染场景，但每帧只需稍微地朝所需方向移动物体。

例如：

var direction = new THREE.Vector3(0.3, 0.5, 0); // amount to move per frame

function animate() {
  object.position.add(direction); // add to position

  renderer.render(camera, scene); // render new frame

  requestAnimationFrame(animate); // keep looping
}

requestAnimationFrame(animate);

- Brendan Annable