title: Animate every point of a line to another line with three.js
body: <p>I want to implement an animation.</p>
  <p>The animation should be a line move to another line. There will be some deformation in the process of the line moving</p>
  <p>There is a correspondence between the points of the two lines.</p>
  <p>How to implements it with three.js?</p>
  <p>I try to use the tween.js.It works.</p>
  <pre><code>    const material = new THREE.LineBasicMaterial({ color: 0x0000ff })
      const geometry = new THREE.BufferGeometry().setAttribute('position',
          new THREE.Float32BufferAttribute([-2, 0, 0, -0.5, 0, -0.5, 0, 0, -2], 3))
      const line = new THREE.Line(geometry, material)
  
      var position2 = new Float32Array([5, 0, 0, 1, 1, 1, 0, 0, 5])
      setupObjectPositionTween(line, geometry.attributes.position.array, position2,
          10000, 0, TWEEN.Easing.Linear.None)      // duration, delay, easing
      scene.add(line)
  
      
      function setupObjectPositionTween(object, source, target, duration, delay, easing) {
          new TWEEN.Tween(source)
          .to(target, duration)
          .delay(delay)
          .easing(easing)
          .onUpdate(function () {
              // console.log(object,source,target)
              object.geometry.attributes.position.array = source
              object.geometry.attributes.position.needsUpdate=true
          })
          .start()
      }
  
  and in the render function
  
      TWEEN.update()
  </code></pre>
  <p><a href="https://i.stack.imgur.com/XzMpJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XzMpJ.png" alt="point to point" /></a>
  <a href="https://i.stack.imgur.com/TNRyW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TNRyW.png" alt="line to line" /></a></p>