Three.JS kann HDR nicht ändern RGBELoader Offset.y Wert

Question

Ich habe ein Objekt, das, wenn eine normale Textur angewendet wird, erlaubt mir den Offset.y Wert zu ändern, aber wenn ich RGBELoader und eine HDR-Datei verwende, kann ich den Offset nicht mehr ändern .y.

Mein Code ist wie folgt:

   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); 
       }); 


      }); 

Die HDR-Bild lädt gerade fein und auf das Objekt angewendet wird, so wie es ist, wenn ich eine normale Textur verwenden aber ich kann nicht nur die Textur bewegen um das Modell an alle.

Ich habe versucht, mit Wiederholung und alle Arten von Kombinationen zu wickeln, aber der störrische Offset wird nicht funktionieren!

Ich möchte auch hinzufügen Ich lerne derzeit three.js (genial!) Entschuldigen Sie den Code oben, wenn es irgendwelche zusätzlichen Fehler hat.

Vielen Dank für jede Hilfe im Voraus es macht mich verrückt!

Shader-Code unter

 <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

Ihren benutzerdefinierten Shader muß die offset/repeat behandeln.

Fügen Sie Ihren Uniformen offsetRepeat hinzu;

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

und ändern Sie Ihre Vertex-Shader

uniform vec4 offsetRepeat; 
varying vec2 vUv; 

void main() { 

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

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

} 

Ihre Textur muss sein Power-of-two und setzen

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

three.js r.75