javascript - 在Three.js中逐步 “revealing”一个3d对象-我这样做对吗？

我正在寻找在three.js中创建动画3d折线图。技巧是我希望它从左向右“显示”，有点像来自CNBC的示例... http://youtu.be/ds7zhCqlrqk?t=12s

我研究了如何隐藏/蒙版/剪切图表的一部分，然后设置蒙版动画以显示出来，但是据我所知，这似乎是不可能的。

因此，我求助于完全重建图表的几何形状和每一帧的网格，每次都向图表添加更多内容。效果很好，并且我已经达到了我需要达到的帧速率，但是它看起来蛮强的，我想知道是否有一种我不知道的更简单的方法。

这是我现在拥有的jsFiddle。 http://jsfiddle.net/qzpC6/9/
这是重建图表几何图形和每一帧网格的函数...

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);
}

最佳答案

您对着色器有多熟悉？您可以使用ShaderMaterial并根据其gl_FragCoord.x逐步丢弃片段