 # Move points to saved position

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

What it is the best approach?

Move the object on a path

SmoothTurnsToPath

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?

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

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

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/ -->
<title> SmoothTurnsToPath </title>
<meta charset="utf-8" />
<style>
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
</style>
<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);

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

// 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,
});

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

// mesh
mesh = new THREE.Mesh(geometry, material);

//mesh2 = mesh.clone();

// 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)
]);
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>``````

Thanks for all the efforts.

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

Thanks!

You are welcome. 