javascript - 逐步 "revealing"Three.js 中的 3d 对象——我这样做对吗？

Question

我想在 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);
}

Answer 1

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