Question

我需要创建线性动画（类似于2d jquery对象中的slideUp），并显示一个非常复杂的网格（构建3d模型） - 从底部到顶部。

我正在寻找不透明度通道/不透明度地图或类似的东西，现在我知道这是不可能的。

使用纹理的精灵和改变偏移量不是最好的主意，因为我的UVs贴图过于复杂。

有没有办法在THREE.JS中创建该效果？

Answer 1

将整个场景渲染为第一个帧缓冲区（纹理） Rendre只能网格化为第二个帧缓冲区（纹理）。

渲染一个全屏矩形，使用前面提到的两个纹理，并使用下面某些版本的代码：

uniform sampler2D texScene;
uniform sampler2D texMesh;

uniform vec2 uResolution;
uniform float time;

void main() {
    vec2 uv = gl_FragCoord.xy / uResolution;

    vec3 s = texture2D( texScene, uv ).xyz;
    vec4 m = texture2D( texMesh, uv );

    // slide up effect
    float percent = clamp( time, 0, endAnim ) / endAnim;  // endAnim is the time animation ends (assuming animation starts at time=0)

    vec3 color = s;
    if( uv.y > (1.0 - percent) ) {
        color = s * (1.0 - m.a) + m.xyz * m.a;
    }
    gl_FragColor = vec4( color, 1.0 );
}

应该直观地理解代码是如何工作的。根据传递的时间，它会检查动画所处的百分比，并根据它计算它是否应包含网格的颜色，或者只是输出背景颜色。

希望它有所帮助。

Answer 2

或者，您可以使用gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)将建筑物绘制到屏幕上，并为建筑物添加Alpha渐变（从上到下）。

绘制到任何输出的方式是，WebGL评估源信息和目标信息（已经绘制到该输出的东西）并将两者结合起来，但是你可以决定它是如何做到的。 / p>

绘制到输出的等式可以宽松地描述为：

SOURCE_VALUE * [SOURCE_FACTOR] [BLEND EQUATION] DESTINATION_VALUE * [DESTINATION_FACTOR];

默认情况下为：

SOURCE_VALUE * 1 + DESTINATION_VALUE * 0;

此等式丢弃缓冲区中的所有现有信息，并使用新信息绘制它。我们想要做的是告诉WebGL将现有信息保留在我们没有绘制到缓冲区的位置，并将新信息带到我们要绘制的位置，因此公式变为：

SOURCE_VALUE * SRC_ALPHA + DESTINATION_VALUE * ONE_MINUS_SRC_ALPHA;

如果你的建筑在一个片段中是20％透明的，那么片段将是建筑物颜色的20％，以及建筑物后面任何颜色的80％。

这种绘制半透明物体的方法符合深度缓冲。

Answer 3

我想出了另一个解决方案。

我为整个建筑使用一个纹理（没有重复的图案）。我将UVS逐渐垂直放置（从纹理底部的底部开始，等等），然后通过填充透明矩形（画布纹理）来设置纹理动画。

// x - current step
// steps - number of steps

var canvas = document.getElementById('canvas-texture'),
    ctx    = canvas.getContext('2d');

ctx.beginPath();
ctx.drawImage(image, 0, 0);
ctx.globalCompositeOperation = 'destination-out';
ctx.fillRect(0, 0, width, height/steps * x);
ctx.closePath();

我很需要它，所以周末如果我找到一些时间我会尝试你的想法，如果你想我可以创造一些小提琴我的解决方案。

无论如何，谢谢你的帮助。

创建透明度动画，以三个j显示网格

3 个答案: