Move points to saved position

Questions
, ,
1

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

What it is the best approach?

Thanks in advance

2

Move the object on a path

From the Collection of examples from discourse.threejs.org

SmoothTurnsToPath

3

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?

4

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?

5

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>
6

Thanks for all the efforts.

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

Thanks!

7

You are welcome. :slightly_smiling_face: