Three.js r111 THREE.ShaderLib.cube uniforms tCube to envMap issue

Question

I'm using AFrame to make a 360 panorama viewer, and I made a custom component to use a cubemap for the sky.

The texture with the 6 cube faces is loaded by a THREE.CubeTextureLoader and then I execute the following code.

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);

It returns the object that I use on my entity with the setObject3D function.

With version 0.9.2 of AFrame (which uses v0.102.2 of Three) this code works perfectly and I get the cube as intended. With version 1.0.1 (which uses v0.111.5), I get a problem cause ShaderLib was modified and the tCube uniformd does not exist anymore. I saw that there's an envMap uniform apparently serving the same purpose but when I set my texture on this attribute, I get WebGLProgram shader errors in the console

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'

Did anyone experiment the same issue or can help me on how to resolve it please? Do I need to manage my texture differently or is there an alternative to this use of shaders for a cubemap ?

Thanks!

Mugen87 Mugen87 · Accepted Answer · 2019-12-23T11:59:20

Try to enhance your code with this snippet:

Object.defineProperty( skyBoxMaterial, 'envMap', {

    get: function () {

        return this.uniforms.envMap.value;

    }

} );

BTW: It's highly recommended to use Scene.background if you need a skybox. In your case:

scene.background = texture;

three.js R111

Three.js r111 THREE.ShaderLib.cube uniforms tCube to envMap issue

1 Answers