Accessing opacity of scene background's cubetexture

Questions
1

I understand you can set a CubeTexture as the background of your scene, as seen in this example.

When doing so, under the hood, the WebGLRenderer creates a cube that renders the BackSide of the faces:

boxMesh = new Mesh(
	new BoxBufferGeometry( 1, 1, 1 ),
	new ShaderMaterial( {
		uniforms: ShaderLib.cube.uniforms,
		vertexShader: ShaderLib.cube.vertexShader,
		fragmentShader: ShaderLib.cube.fragmentShader,
		side: BackSide,
		depthTest: true,
		depthWrite: false,
		fog: false
	} )
);

I saw that ShaderLib.cube.uniforms contains the following values:

uniforms: {
	tCube: { value: null },
	tFlip: { value: - 1 },
	opacity: { value: 1.0 }
},

The above code can be found here… which leads me to believe that there has to be a way to access the opacity uniform and modify it. Has anybody had any success playing with this opacity value? If so, how did you access it? I’ve tried trowling through

WebGLRenderer.background
WebGLRenderer.context

The only methods available to do anything to the background seem to be getters/setters for ClearColor and ClearAlpha. Is there any way, or do I just need to re-build my own background cube?

2

Try it like that: https://jsfiddle.net/f2Lommf5/6929/

You create a skybox without WebGLBackground which allows more control over the visual appearance.

1 Like
3

Thanks! Yeah, I ended up copy-pasting the code from WebGLBackground.js into my own Mesh at the end of the day.

So basically, once you assign scene.background = THREE.CubeTexture, there’s no built-in way to access or modify that specific object, right?

4

Correct, since the box mesh is encapsulated by WebGLBackground. You have no access to is geometry or material.

2 Likes