Wrongfully flipped HDR Texture

Questions
, , ,
1

I’m loading in a hrd texture into my project using a rgbeLoader but for some reason the textures reflection gets flipped.

image
image1265×592 39.1 KB

Notice how the sun is the background but still manages to reflect of the glass on the backside of the boat. There is no reflection on front side.

export function loadEnvironment(url) {
  let rgbeLoader = new RGBELoader();

  rgbeLoader
    .setPath("../../images/EquirecMap/")
    .load("skargarden.hdr", function (texture) {
      let pmremGenerator = new THREE.PMREMGenerator(renderer);
      pmremGenerator.compileEquirectangularShader();

      texture.mapping = THREE.EquirectangularReflectionMapping;

      envMap = pmremGenerator.fromEquirectangular(texture).texture;
      pmremGenerator.dispose();

      //scene.background = texture;

      let options = {
        generateMipmaps: true,
        minFilter: THREE.LinearMipmapLinearFilter,
        magFilter: THREE.LinearFilter
      };
      scene.background = new THREE.WebGLCubeRenderTarget(
        1200,
        options
      ).fromEquirectangularTexture(renderer, texture);

      scene.environment = texture;
    });
}

This is my loader settings. How do I reverse the reflection?

2

With recent three.js versions, you can simply do this:

 rgbeLoader
    .setPath("../../images/EquirecMap/")
    .load("skargarden.hdr", function (texture) {

      texture.mapping = THREE.EquirectangularReflectionMapping;

      scene.background = texture;
      scene.environment = texture;

Does it solve the issue?

3

Doesn’t solve it. Adds another problem

image
image1421×529 35.9 KB

So I think I need to flip it while using my old code

4

image
image1421×529 35.9 KB

5

What version of three.js are you using?

6

Not at home right now but I’ll check later!

7

Im usin v.145

import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.145/build/three.module.js";