如何在 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 animate() 中那样平滑.

Answer 1

为任何类型的对象设置动画的关键是以高刷新率.[=11=移动小量]

这意味着多次渲染场景，但每帧将对象朝您希望的方向移动一点点。

例如

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);

如何在 Three.js 中将对象从位置 {x,y} 移动到 {newx,newy}

How to move object from position {x,y} to {newx,newy} in Three.js

javascript

three.js