Анимированные кривые Безье 0.

Question

EDITED. РЕШЕНИЕ НАЙДЕНО

Мне нужно знать, как реализовать анимацию точек в кривой, чтобы имитировать движение струн в 3D с учетом производительности.

Несколько строк между двумя точками, например.

Fiddle предоставлено. (код обновлен)

1. Так что я 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.

(была достигнута цель. К сожалению, не моя. Я наткнулся на какой-то вспомогательный код Lib в http://cs.wellesley.edu/~cs307/lectures/15.shtml так Большое спасибо этим ребятам.)

Существует мало информации относительно кривой анимации в threejs.

Возможно, у кого-то уже есть что-то похожее.

Answer 1

(была достигнута цель. К сожалению, не моя. Я наткнулся на какой-то вспомогательный код Lib в http://cs.wellesley.edu/~cs307/lectures/15.shtml так Большое спасибо этим ребятам.)