Three.js 动画贝塞尔曲线

Question

已编辑。找到解决方案

我需要知道如何实现曲线中点的动画以模拟 3D 中的弦运动并考虑到性能。

例如两点之间的多个字符串。

Fiddle 已提供。 （代码已更新）

所以我有 curveObject 并且我正在尝试更改 point1 的位置。 （代码已更新）

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

我在控制台看到值增加，但没有实际的视觉反馈。我的猜测 - 我需要以某种方式更新曲线。

最终目标是平滑地为曲线的缓慢正弦运动制作动画。就像在 Photoshop 中移动贝塞尔曲线的控制点一样。

（目标已达到。遗憾的是不是我自己实现的。我在 http://cs.wellesley.edu/~cs307/lectures/15.shtml 偶然发现了一些辅助代码库，非常感谢这些人。）

threejs中关于曲线动画的资料很少

也许有人已经开始做类似的事情了。

Answer 1

（目标已达到。遗憾的是不是我自己实现的。我在 http://cs.wellesley.edu/~cs307/lectures/15.shtml 偶然发现了一些辅助代码库，非常感谢这些人。）

Three.js 动画贝塞尔曲线

Three.js animated bezier curves

javascript

animation

three.js

curve

spline