Three.js animated bezier curves

Question

EDITED. SOLUTION FOUND

I need to know how to implement animation of the points in a curve to simulate string movement in 3D with performance in mind.

Multiple strings between two points for example.

Fiddle provided. (code updated)

1. So I have curveObject and I'm trying to change position of a point1. (code updated)

      var camera, scene, renderer;
      var angle1 = angle2 = 0;
      var curve1, point1, curveObject, geometryCurve, materialCurve;
      var params1 = {P0x: 0, P0y: 0,
                  P1x: 2, P1y: 2,
                  P2x: -2, P2y: 1,
                  P3x: 0, P3y: 3,
                  steps: 30};

      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
      camera.position.z = 10;
      scene.add(camera);
      renderer = new THREE.WebGLRenderer( { antialias: true } );
      renderer.setClearColor( 0x16112b, 1 );
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      createBezierCurveNEW = function (cpList, steps) {

        var N = Math.round(steps)+1 || 20;

        var geometry = new THREE.Geometry();
        var curve = new THREE.CubicBezierCurve3();

        var cp = cpList[0];
        curve.v0 = new THREE.Vector3(cp[0], cp[1], cp[2]);
        cp = cpList[1];
        curve.v1 = new THREE.Vector3(cp[0], cp[1], cp[2]);
        cp = cpList[2];
        curve.v2 = new THREE.Vector3(cp[0], cp[1], cp[2]);
        cp = cpList[3];
        curve.v3 = new THREE.Vector3(cp[0], cp[1], cp[2]);

        var j, stepSize = 1/(N-1);
        for (j = 0; j < N; j++) {
            geometry.vertices.push( curve.getPoint(j * stepSize) );
        }
        return geometry;
      };


      function CreateCurve(){
        scene.remove(curve1);
        var controlPoints1 = [
            [params1.P0x, params1.P0y, 0],
            [params1.P1x, params1.P1y, 0],
            [params1.P2x, params1.P2y, 0],
            [params1.P3x, params1.P3y, 0] ];
        var curveGeom1 = createBezierCurveNEW(controlPoints1, params1.steps);
        var mat = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 5 } );
        curve1 = new THREE.Line( curveGeom1, mat );
        scene.add(curve1);
      };
      CreateCurve();


      function animate() {
          CreateCurve();
          render();
          angle1 -= .007;
          angle2 += .003;
          params1.P1x = Math.cos(angle1)+2;
          params1.P1y = Math.sin(angle1)+3;
          params1.P2x = -Math.cos(angle2)-2;
          params1.P2y = Math.cos(angle2)+1;
          requestAnimationFrame(animate);
        };
        animate();

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>

I see value increment in console, but no actual visual feedback. My guess - I need to update curve somehow.

Final goal is to smoothly animate slow sine-like movement of the curve. like control points of bezier curve are being moved in Photoshop.

(The goal was reached. Sadly not by my own. I've stumbled upon some helper code lib at http://cs.wellesley.edu/~cs307/lectures/15.shtml so BIG thanks to these guys.)

There is little info regarding curve animation in threejs.

Maybe someone already got going something similar.

Answer 1

(The goal was reached. Sadly not by my own. I've stumbled upon some helper code lib at http://cs.wellesley.edu/~cs307/lectures/15.shtml so BIG thanks to these guys.)