Question

编辑。解决方案

我需要知道如何在曲线中实现点的动画，以便在考虑到性能的情况下模拟3D中的字符串移动。

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

提供了{p> 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动画贝塞尔曲线

1 个答案: