Three.js动画贝塞尔曲线

Question

EDITED。解决方案发现

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

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

Fiddle提供。 （更新代码）

1. 所以我curveObject，我试图改变一个点1的位置。 （代码更新）

     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所以非常感谢这些家伙在一些辅助代码LIB绊倒了。）

有关于threejs曲线动画一点信息。

也许有人已经得到了类似的东西。

Answer 1

（目标是达到了。可悲的是不是我自己的。我在http://cs.wellesley.edu/~cs307/lectures/15.shtml所以非常感谢这些家伙在一些辅助代码LIB绊倒了。）