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

Question

我有一個對象，它在應用普通紋理時允許我更改offset.y值，但是在使用RGBELoader和HDR文件時，我不能再更改偏移量.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

您的自定義着色器的Shader代碼必須處理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); 

} 

你的質地必須是功率的二，並設置

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

three.js所r.75