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 に答える