My current project involves drawing a CubicBezierCurve3 curve in three js. However, I want to enhance the drawing process by visualizing it as a moving rocket leaving behind a gas trail. Rather than having the entire curve drawn at once, I aim to draw it part-by-part with a smooth transition.
My Approach:
To begin, I collect all the points that make up the CubicBezierCurve3 and store them in a variable named 'allpoints'. Let's assume that we have exactly 50 points in the CubicBezierCurve3.
var curve = new THREE.CubicBezierCurve3( new THREE.Vector3( -5, 0, 20 ), new THREE.Vector3(0, 15, 0 ), new THREE.Vector3(0, 15, 0 ), new THREE.Vector3( 2, 0, -10 ) ); geometry = new THREE.Geometry(); geometry.vertices = curve.getPoints( 50 ); allpoints = geometry.vertices;During each iteration, I plot 10 points as follows:
Iteration 0: plots points 0 to 9 Iteration 1: plots points 10 to 19 Iteration 2: plots points 20 to 29 Iteration 3: plots points 30 to 39 Iteration 4: plots points 40 to 49
The function I've implemented ensures that 10 points are plotted in each iteration. With a total of 50 points, I call cancelAnimationFrame at the end of the 5th iteration to stop the drawing process. The function includes certain adjustments to handle timing issues; for instance, the 10-point sequence is only plotted every 10 iterations to ensure a smooth transition.
function drawPointCloud() {
// Function logic goes here...
}
JS Fiddles:
- Check out this JS Fiddle example demonstrating the smooth transition concept
- Here's another JS Fiddle example showcasing all points in the CubicBezierCurve3
Is there a more efficient way or API available to achieve this incremental drawing effect? Additionally, I'm interested in adding a delay to the points before they disappear, similar to the fading of an LED. I am open to exploring alternative approaches to incrementally drawing parts of a given cubic bezier curve.