X and y are coordinates of object. Z is always 0. How can I move (with visible move animation, not popping up in different location) this object to new location using Three.js?

EDIT: Code example of object (mesh)

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

EDIT 2: I can make my mesh jump to new position with mesh.position.x=newx and mesh.position.y=newy but I want it to look smooth like in JQuery animate().

X and y are coordinates of object. Z is always 0. How can I move (with visible move animation, not popping up in different location) this object to new location using Three.js?

EDIT: Code example of object (mesh)

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

EDIT 2: I can make my mesh jump to new position with mesh.position.x=newx and mesh.position.y=newy but I want it to look smooth like in JQuery animate().

• javascript
• three.js

• Show us some code for helping us understand what you want. – user3998237 Commented Jan 20, 2015 at 1:44

1 Answer 1

The key to animating any kind of object is to move it small amounts, at a high refresh rate.

This means rendering the scene many times but moving the object in the direction you wish a little bit per frame.

e.g.

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