# Move points to saved position

**URL:** <https://discourse.threejs.org/t/move-points-to-saved-position/25719>\
**Category:** Questions\
**Tags:** points, webgl, geometry\
**Created:** [April 26, 2021, 5:43pm UTC](https://discourse.threejs.org/t/move-points-to-saved-position/25719 "2021-04-26T17:43:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![fossas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fossas/32/40154_2.png) [@fossas](https://discourse.threejs.org/u/fossas)\
**Post date:** [April 26, 2021, 5:43pm UTC](https://discourse.threejs.org/t/move-points-to-saved-position/25719/1 "2021-04-26T17:43:33Z")

</div>

Hello, I have a geometry with spreaded points and the saved initial position. I basically want to animate them to the initial position.

[[Album] imgur.com ![](https://i.imgur.com/0ynUdz9.png?fb "imgur.com") ](https://imgur.com/a/1kLka3u)

What it is the best approach?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [April 26, 2021, 6:04pm UTC](https://discourse.threejs.org/t/move-points-to-saved-position/25719/2 "2021-04-26T18:04:20Z")

</div>

Move the object on a path

From the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315)

[SmoothTurnsToPath](https://hofk.de/main/discourse.threejs/2019/SmoothTurnsToPath/SmoothTurnsToPath.html)

---

<div class="post-metadata">

**Author:** ![fossas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fossas/32/40154_2.png) [@fossas](https://discourse.threejs.org/u/fossas)\
**Post date:** [April 26, 2021, 6:06pm UTC](https://discourse.threejs.org/t/move-points-to-saved-position/25719/3 "2021-04-26T18:06:03Z")

</div>

Awesome, I will try.

And if I am speaking about vertex points? This is still the best apporach?  
Also, if I am not wrong this won’t work on drawing a path between point containing x,y,z?

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [April 26, 2021, 6:22pm UTC](https://discourse.threejs.org/t/move-points-to-saved-position/25719/4 "2021-04-26T18:22:52Z")

</div>

I don’t know if that’s the best approach at all.  
It always depends on what exactly you want to achieve.

Very popular are also movements with tween.js

> **[GitHub - tweenjs/tween.js: JavaScript/TypeScript animation engine](https://github.com/tweenjs/tween.js/)**
>
> JavaScript/TypeScript animation engine. Contribute to tweenjs/tween.js development by creating an account on GitHub.

> [@Tween.js how to do a yoyo animation](https://discourse.threejs.org/t/tween-js-how-to-do-a-yoyo-animation/23073):
>
> Hi, Sorry first for this stupid question but really i don’t sucess to make a simple tween with yoyo on my cube. (i come from Phaser and tween is just a formality) i have follow the RTFM but i don’t sucess… Could you tell me where i’m wrong ? Thanks

> [@Pause a tween.js animation](https://discourse.threejs.org/t/pause-a-tween-js-animation/5987):
>
> I want to pause animation. In this code ball moving back and forward on click and i need to make it pause it on click and continue on unpause. This is the [code](https://jsfiddle.net/Sallivan/fu5m8by7/1/) . Any help?

What do you mean by vertex points exactly?  
What should move and how?

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [April 26, 2021, 6:28pm UTC](https://discourse.threejs.org/t/move-points-to-saved-position/25719/5 "2021-04-26T18:28:51Z")

</div>

Without drawing the path (original modified)

```
<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/how-to-make-an-object-to-take-smooth-turns-at-edges-between-points/11276/2 -->
<!-- https://jsfiddle.net/wb6j52q7/ -->
<head>
  <title> SmoothTurnsToPath </title>
  <meta charset="utf-8" />
  <style>	
	body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;	
	}
  </style>
</head>
<body> </body>
<!-- <script src="../js/three.min.111.js"></script>
	<script src="../js/OrbitControls.js"></script>
-->
	<script src="https://threejs.org/build/three.min.js""></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>

// @author Fyrestar + Mugen87

// three.js info box follows shape
var renderer, scene, camera;
var angle = 0;
var position = 0;

// direction vector for movement
var direction = new THREE.Vector3(1, 0, 0);
// var axis = new THREE.Vector3(0, 0, 1);
//var axis = new THREE.Vector3();
// scalar to simulate speed
var speed = 0.5;

init();
animate();

function init() {
  // info
  var info = document.createElement('div');
  info.style.position = 'absolute';
  info.style.top = '30px';
  info.style.width = '100%';
  info.style.textAlign = 'center';
  info.style.color = '#fff';
  info.style.fontWeight = 'bold';
  info.style.backgroundColor = 'transparent';
  info.style.zIndex = '1';
  info.style.fontFamily = 'Monospace';
  info.innerHTML = "three.js - move objects on and relative to a path ";
  document.body.appendChild(info);

  // renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();

  // ambient light
  var ambient = new THREE.AmbientLight(0x404040);
  scene.add(ambient);

  // directional light
  var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  directionalLight.position.set(-1, -1, 1);
  scene.add(directionalLight);

  // camera
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(-100, -100, 20);
  camera.up.set(0, 0, 1);

  // controls
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.target = new THREE.Vector3(25, -25, 0);
  controls.update();

  // material
  var material = new THREE.MeshPhongMaterial({
    color: 0xff0000,
    shading: THREE.FlatShading
  });

  // geometry
  var geometry = new THREE.BoxGeometry(10, 10, 10);

  // mesh
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  
  //mesh2 = mesh.clone();
  //scene.add( mesh2 );
  
  // set a initial rotation
  //mesh2.rotation.z = Math.PI/4;
 // mesh2.position.set( -40,-60,0);
  
  // the path
  path = new THREE.Path([
    new THREE.Vector2(-50, -50),
    new THREE.Vector2(0, -50)
  ]);
  var arcRadius = 50;
  path.moveTo(0, 0 - arcRadius);
  path.absarc(0, 0, arcRadius, -Math.PI / 2, 0, false);
  path.lineTo(50, 50);

  //drawPath();
  
  // Start angle and point
  previousAngle = getAngle( position );
  previousPoint = path.getPointAt( position );

}

function move() {
  
  // add up to position for movement
  position += 0.001;

  // get the point at position
  var point = path.getPointAt(position);
  
  console.log(point)
  mesh.position.x = point.x;
  mesh.position.y = point.y;
var axis = new THREE.Vector3(0, 0, 1);
  const angle = getAngle(position);
  // set the quaternion
  mesh.quaternion.setFromAxisAngle( axis, angle );
    
  previousPoint = point;
  previousAngle = angle;
    
}

function getAngle( position ){
// get the 2Dtangent to the curve
  var tangent = path.getTangent(position).normalize();

  // change tangent to 3D
  angle = - Math.atan( tangent.x / tangent.y);
  
  return angle;
  
}

// render
function render() {
  renderer.render(scene, camera);
}

// animate
function animate() {
  move();
  requestAnimationFrame(animate);
  render();
}

</script>
</html>
```

---

<div class="post-metadata">

**Author:** ![fossas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fossas/32/40154_2.png) [@fossas](https://discourse.threejs.org/u/fossas)\
**Post date:** [April 26, 2021, 6:46pm UTC](https://discourse.threejs.org/t/move-points-to-saved-position/25719/6 "2021-04-26T18:46:05Z")

</div>

Thanks for all the efforts.

I think TWEEN will do the job for me. It is quite performant.

Thanks!

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [April 26, 2021, 6:47pm UTC](https://discourse.threejs.org/t/move-points-to-saved-position/25719/7 "2021-04-26T18:47:20Z")

</div>

You are welcome. 🙂
