使用 quadmaterial 交叉淡入淡出 - ThreeJS 语法

Question

编写淡入淡出过渡时，以下代码是什么意思？我希望实现与 http://jsfiddle.net/DW9q4/85/ 相同的效果，但我有 2 个场景，其中 2 个不同的地图立方体通过 PerspectiveCamera 渲染。我无法理解发生了什么，代码在做什么？

uniforms: {

        tDiffuse1: {
            type: "t",
            value: rtTexture1                                
        },
        tDiffuse2: {
            type: "t",
            value: rtTexture2                                
        },
        mixRatio: {
            type: "f",
            value: 0.5
        },
        opacity: {
            type: "f",
            value: 1.0
        }

    },
    vertexShader: [

        "varying vec2 vUv;",

        "void main() {",

        "vUv = vec2( uv.x, 1.0 - uv.y );",
        "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

        "}"

    ].join("\n"),
    fragmentShader: [

        "uniform float opacity;",
        "uniform float mixRatio;",

        "uniform sampler2D tDiffuse1;",
        "uniform sampler2D tDiffuse2;",

        "varying vec2 vUv;",

        "void main() {",

        "vec4 texel1 = texture2D( tDiffuse1, vUv );",
        "vec4 texel2 = texture2D( tDiffuse2, vUv );",
        "gl_FragColor = opacity * mix( texel1, texel2, mixRatio );",

        "}"

    ].join("\n")

非常感谢所有帮助！

Answer 1

如果您用谷歌搜索 'vertexShader' 或 'fragmentShader'，您会得到大量的搜索结果。这些着色器是 WebGL 的核心。如果您想了解着色器和 WebGl，可以使用许多在线资源。 Three.js 为您生成着色器调用。对于大多数正常工作，您可以忽略着色器并完全使用 three.js。

使用 quadmaterial 交叉淡入淡出 - ThreeJS 语法

Cross-fade using quadmaterial - ThreeJS syntax

three.js

cross-fade