THREE.WebGLProgram 由于定义的 v1 常量导致着色器错误

Question

我正在使用 Three.js 并且正在加载 HDR 作为场景的环境贴图。加载后，我收到此错误：

问题中的行是这样的：

我假设定义的 v1 会导致此行出现问题，因为它不是未定义的。

我正在这样加载 HDR 贴图：

      return new Promise((resolve, reject) => {
        new RGBELoader()
          .setDataType(THREE.HalfFloatType)
          .load(
            path, // <-- hdr file
            (texture) => {
              // I tried fromEquirectangular and fromCubemap
              // const envMap = this.pmremGenerator.fromEquirectangular(texture).texture;
              const envMap = this.pmremGenerator.fromCubemap(texture).texture;
              texture.needsUpdate = true;
    
              resolve({ envMap });
            },
            undefined,
            reject
          );
        });

有谁知道是什么导致了三个问题？

Answer 1

const envMap = this.pmremGenerator.fromCubemap(texture).texture;

我怀疑这个方法调用是否正确。 RGBELoader 无法加载立方贴图格式的纹理。您可能想使用 fromEquirectangular()。在使用此方法之前，您需要在 onLoad() 回调中添加以下行：

texture.mapping = THREE.EquirectangularReflectionMapping;

此外，请检查您的应用中是否确实需要使用 PMREMGenerator。在最新版本中，three.js 内部使用 PMREMGenerator 准备环境贴图以用于 PBR 材质。

THREE.WebGLProgram 由于定义的 v1 常量导致着色器错误

THREE.WebGLProgram Shader Error because of defined v1 constant

three.js