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

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

本文关键字：移动 newy newx 位置 Three js 对象      更新时间：2023-09-26

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（）一样平滑。

对任何类型的对象进行动画处理的关键是以高刷新率将其少量移动。

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

例如

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);
相关文章：