在 Three.js 中逐步“显示”一个 3d 对象——我这样做对吗？答案

【问题标题】：Progressively "revealing" a 3d object in Three.js -- Am I doing this right?在 Three.js 中逐步“显示”一个 3d 对象——我这样做对吗？
【发布时间】：2015-02-18 20:49:14
【问题描述】：

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

【问题讨论】：

标签： javascript three.js

【解决方案1】：

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

【讨论】：

我最终明白了这一点，但从来没有学过足够的 glsl 来做到这一点。而且我认为如何“密封”几何图形的右端可能仍然存在问题。我还考虑过做一个单独的渲染通道，并在渲染器上使用“剪刀”参数来剪掉我不想看到的部分。最终只是换了一种风格。