Custom shader is taking texture from scene background texture instead of uniform texture I set. I searched on the internet and I have found no results

Questions
,
1 
const backgroundTexture = new THREE.TextureLoader().load("obrazky/space.jpg")


const _VS = `
varying vec2 vUv;
void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}`;
const _FS = `
uniform sampler2D globeTexture;
varying vec2 vUv;
void main() {
    gl_FragColor = texture2D(globeTexture, vUv);
}`;

const scene = new THREE.Scene();
scene.background = backgroundTexture;

const geometry = new THREE.SphereGeometry(5, 50, 50)
const material = new THREE.ShaderMaterial({
    uniform: {
        globeTexture: { value: new THREE.TextureLoader().load('obrazky/light-gray-concrete-wall.jpg') }
    },
    vertexShader: _VS,
    fragmentShader: _FS
});

const sphere = new THREE.Mesh(geometry, material);

scene.add(sphere);

here screenshot

image
image1786×901 169 KB

2

Check network panel and see what’s the response of new THREE.TextureLoader().load('obrazky/light-gray-concrete-wall.jpg') - maybe it’s loading wrong texture.

2 Likes
3

OK my bad, I made mistake in shadermaterial where instead of uniforms I had uniform without s. Still it was very strange that it generated this. but thank you for suggestion.

4

basically when the texture is missing the last used texture applies, I guess.