I am attempting to animate a 2D curve in Three.js gradually. Because I will require more than 4 control points, I have decided against using Bezier curves and instead opted for a SplineCurve.
When I check the position of geometry.vertices of my line, I notice that they are changing over time, but the geometry.attributes.position remains constant. Is it feasible to animate the line based on the curve animation? While I was able to achieve this with Bezier Curves, I'm struggling to find a solution with SplineCurve. Any assistance would be greatly appreciated. Below is my code:
Firstly, I create the line:
var curve = new THREE.SplineCurve( [
new THREE.Vector3( -10, 0, 10 ),
new THREE.Vector3( -5, 5, 5 ),
new THREE.Vector3( 0, 0, 0 ),
new THREE.Vector3( 5, -5, 5 ),
new THREE.Vector3( 10, 0, 10 )
] );
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
curveObject = new THREE.Line( geometry, material );
scene.add( curveObject );
curveObject.curve = curve;
Next, I attempt to update it:
curveObject.curve.points[0].x += 1;
curveObject.geometry.vertices = curveObject.curve.getPoints( 50 );
curveObject.geometry.verticesNeedUpdate = true;
curveObject.geometry.attributes.needsUpdate = true;