Three.js r111 THREE.ShaderLib.cube 将 tCube 统一到 envMap 问题

Question

我正在使用 AFrame 制作 360 全景查看器，并制作了一个自定义组件来使用天空的立方体贴图。

具有 6 个立方体面的纹理由 THREE.CubeTextureLoader 加载，然后我执行以下代码。

var shader = THREE.ShaderLib['cube'];
shader.uniforms['tCube'].value = texture;

var skyBoxMaterial = new THREE.ShaderMaterial({
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: shader.uniforms,
    depthTest: false,
    side: THREE.BackSide,
    transparent: true
});

var size = 1000;
var skyBoxGeometry = new THREE.CubeGeometry(size, size, size);

return new THREE.Mesh(skyBoxGeometry, skyBoxMaterial);

它使用 setObject3D 函数返回我在实体上使用的对象。

使用 AFrame 0.9.2 版（使用 v0.102.2 of Three），这段代码完美运行，我按预期得到了立方体。使用 1.0.1 版（使用 v0.111.5）时，我遇到了一个问题，因为 ShaderLib 被修改并且统一的 tCube 不再存在。我看到有一个 envMap 统一显然用于相同的目的但是当我在这个属性上设置我的纹理时，我在控制台中收到 WebGLProgram 着色器错误

index.js:27291 THREE.WebGLProgram: shader error:  0 35715 false gl.getProgramInfoLog invalid shaders
THREE.WebGLShader: gl.getShaderInfoLog() fragment
ERROR: 0:308: 'envColor' : undeclared identifier
ERROR: 0:308: '=' : dimension mismatch
ERROR: 0:308: 'assign' : cannot convert from 'const highp float' to 'FragColor mediump 4-component vector of float'

有没有人尝试过同样的问题，或者可以帮助我解决这个问题吗？我是否需要以不同的方式管理我的纹理，或者对于立方体贴图使用着色器是否有替代方法？

谢谢！

Answer 1

尝试使用以下代码段增强您的代码：

Object.defineProperty( skyBoxMaterial, 'envMap', {

    get: function () {

        return this.uniforms.envMap.value;

    }

} );

顺便说一句：如果您需要天空盒，强烈建议使用Scene.background。在你的情况下：

Object.defineProperty( skyBoxMaterial, 'envMap', {

    get: function () {

        return this.uniforms.envMap.value;

    }

} );

three.js R111