I'm eager to craft a dynamic 3D line chart using three.js that emerges from left to right, similar to the demonstration on CNBC found here: http://youtu.be/ds7zhCqlrqk?t=12s
Initially, I explored options like hiding, masking, or clipping segments of the chart and animating the mask for a reveal effect, but it seemed unfeasible based on my research.
Therefore, I opted to reconstruct the chart's geometry and mesh entirely with each frame, gradually adding more elements to the chart. While this method performs adequately and stays within the required frame rate, it feels somewhat rudimentary, prompting me to seek simpler alternatives that might be eluding me.
For reference, you can view the current state of my project in this jsFiddle: http://jsfiddle.net/qzpC6/9/ Additionally, below is the function responsible for rebuilding the chart's geometry and mesh during each frame...
function incrementChart() {
if (currentPoint == points.length - 1) {
return;
}
var then = new Date().getTime();
currentPoint++;
var extent = startX;
var vectors = [];
for (var i = 0; i <= currentPoint; i++) {
vectors.push(new THREE.Vector2(extent, 50 * points[i]));
extent += spacing;
}
console.log(vectors);
vectors.push(new THREE.Vector2(extent - spacing, -50));
vectors.push(new THREE.Vector2(startX, -50));
vectors.push(new THREE.Vector2(startX, 50 * points[0]));
var newShape = new THREE.Shape(vectors);
var newGeometry = newShape.extrude(extrudeSettings);
var newShapeMesh = new THREE.Mesh(newShape.extrude(extrudeSettings), material);
parent.remove(shapeMesh);
shapeMesh = newShapeMesh;
parent.add(shapeMesh);
var now = new Date().getTime();
console.log(now - then);
}