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 函数返回我在实体上使用的对象。

使用 0.9.2 版的 AFrame（使用 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

尝试使用这个 sn-p 增强您的代码：

Object.defineProperty( skyBoxMaterial, 'envMap', {

    get: function () {

        return this.uniforms.envMap.value;

    }

} );

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

scene.background = texture;

three.js R111