Hi Harp - would you be able to shoot me a GitHub repo I can pull? Would be able to debug very quickly for you and see what's going on. Let me know, just post a link here if so!
Thanks,
https://github.com/designsbyharp/Earth-Shader.git
I switched from vite to webpack cause I thought it was a vite issue. Anyways, no idea what is going on now with this img issue. Sphere.js is the file.
Checked it out, go ahead and double check sphere.js
and see what you named your texture uniform:
const sphereGeometry = new Mesh(
new SphereGeometry(5, 50, 50),
new ShaderMaterial({
vertexShader: vertexShader,
fragmentShader: fragmentShader,
uniforms: {
globeTexture: {
value: new TextureLoader().load(img1)
}
}
})
)
Here you'll see it's named globeTexture
, but within your fragment shader, it's imported as globalTexture
:
uniform sampler2D globalTexture;
varying vec2 vertexUV;
void main(){
gl_FragColor = texture2D(globalTexture, vertexUV);
}
You'll want to make sure those two are the same, otherwise it won't have an image to reference.
Want to participate?
Create a free Chris Courses account to begin