Question

我有一个对象，当应用普通纹理时，我可以更改offset.y值，但是当使用RGBELoader和HDR文件时，我无法再改变offset.y。

我的代码如下：

                var loader3 = new THREE.ObjectLoader();
            loader3.load("model/dome/dome2.json",function ( obj ) {
                obj.scale.x = 7;
                obj.scale.y = 7;
                obj.scale.z = 7;
                obj.position.x = 0;
                obj.position.z = 0;
                obj.position.y = 0;


                var loader = new THREE.RGBELoader();
                var texture = loader.load( "maps/scene2.hdr", function( texture, textureData ){
                    materialHDR = new THREE.ShaderMaterial( {
                        uniforms: {
                            tDiffuse:  { type: "t", value: texture },
                            exposure:  { type: "f", value: textureData.exposure },
                            brightMax: { type: "f", value: textureData.gamma }
                            },
                        vertexShader: getText( 'vs-hdr' ),
                        fragmentShader: getText( 'fs-hdr' )
                    } );


                    texture.offset.y = 0.5; // HERE LIES THE PROBLEM
                    texture.flipY = true;

                    obj.traverse( function ( child ) {
                        if ( child instanceof THREE.Mesh ) {
                            child.material = materialHDR;
                            child.receiveShadow = true;
                            //child.material.side = THREE.BackSide;
                            child.material.side = THREE.DoubleSide;
                        }
                    });

                    scene.add( obj );
                } );


            });

HDR图像加载得很好，就像我使用普通纹理一样应用于对象但是我根本无法在模型周围移动纹理。

我尝试使用重复和各种组合进行换行，但顽固的偏移量不起作用！

我还想补充一下，我目前正在学习three.js（太棒了！）如果它有任何其他错误，请原谅上面的代码。

感谢您提前提供任何帮助，这让我疯了！

下面的着色器代码

        <script id="fs-hdr" type="x-shader/x-fragment">
        uniform sampler2D   tDiffuse;
        uniform float       exposure;
        uniform float       brightMax;
        varying vec2  vUv;
        vec3 decode_pnghdr( const in vec4 color ) {
            vec4 rgbcolor = vec4( 0.0, 0.0, 0.0, 0.0 );
            if ( color.w > 0.0 ) {
                float f = pow(2.0, 127.0*(color.w-0.5));
                rgbcolor.xyz = color.xyz * f;
            }
            return rgbcolor.xyz;
            /*
            // remove gamma correction
            vec4 res = color * color;
            // decoded RI
            float ri = pow( 2.0, res.w * 32.0 - 16.0 );
            // decoded HDR pixel
            res.xyz = res.xyz * ri;
            return res.xyz;
            */
        }
        void main() {
            vec4 color = texture2D( tDiffuse, vUv );
            color.xyz  = decode_pnghdr( color );
            // apply gamma correction and exposure
            //gl_FragColor = vec4( pow( exposure * color.xyz, vec3( 0.474 ) ), 1.0 );
            // Perform tone-mapping
            float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);
            float YD = exposure * (exposure/brightMax + 1.0) / (exposure + 1.0);
            color *= YD;
            gl_FragColor = vec4( color.xyz, 1.0 );
        }
    </script>

    <!-- HDR vertex shader -->

    <script id="vs-hdr" type="x-shader/x-vertex">
        varying vec2 vUv;
        void main() {
            vUv  = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 3 );
        }
    </script>

Answer 1

您的自定义着色器必须处理offset/repeat。

为你的制服添加offsetRepeat;

offsetRepeat: { type: "v4", value: new THREE.Vector4( 0, 0.5, 1, 1 ) }

修改你的顶点着色器

uniform vec4 offsetRepeat;
varying vec2 vUv;

void main() {

    vUv = uv * offsetRepeat.zw + offsetRepeat.xy;

    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

}

你的纹理必须是2的幂，并设置

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

three.js r.75

Three.JS无法更改HDR RGBELoader Offset.y值

1 个答案: