javascript - How do you animate or move specific points on a plane in three.js? -

i have texture mapped plane. suppose want move particular points in plane. how go doing so?

for example, want move bottom right corner @ particular speed , top right corner @ particular speed.

var camera; var scene; var renderer; var mesh;  init(); animate();  function init() {      scene = new three.scene();     camera = new three.perspectivecamera( 70, window.innerwidth / window.innerheight, 1, 1000);      var light = new three.directionallight( 0xffffff );     light.position.set( 0, 1, 1 ).normalize();     scene.add(light);       var geometry = new three.planegeometry( 50, 50);        var texture = three.imageutils.loadtexture('images/03032122.png', {}, function() {     renderer.render(scene, camera);     })     var material = new three.meshbasicmaterial({map: texture, transparent: true })       mesh = new three.mesh(geometry, material );     mesh.position.z = -50;     scene.add( mesh );      renderer = new three.webglrenderer({ alpha: true });     renderer.setsize( window.innerwidth, window.innerheight );      renderer.setclearcolor( 0xffffff, 1);     document.body.appendchild( renderer.domelement );      window.addeventlistener( 'resize', onwindowresize, false );      render(); }  function animate() {     //mesh.scale.x+= 0.0003;       render();     requestanimationframe( animate );  }  function render() {     renderer.render( scene, camera ); }   function onwindowresize() {     camera.aspect = window.innerwidth / window.innerheight;     camera.updateprojectionmatrix();     renderer.setsize( window.innerwidth, window.innerheight );     render(); } 

you can modify geometry after mesh creation accessing vertices array. if want vertex of rank 1 move linearly in +x direction, can add in render function :

mesh.geometry.vertices[1].x+=.01; mesh.geometry.verticesneedupdate=true; 

beware use planebuffergeometry instead of planegeometry.