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絆倒了。）