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

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

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

1 个答案: