3

我正在寻找在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);
}
4

1 回答 1

1

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

于 2015-02-18T12:49:14.997 回答