CHANNELS:

All
h
Shader texture - img not loading
General
harp34 posted 3 years ago

My image isn't loading, maybe a path issue. Here is my folder structure:

root -> src, index.html, vite.config.js, package.json, node_modules

src -> imgs, modules, main.js, style.css

modules -> all module js files

how do I get the img from imgs folder from sphere.js(module) in src folder?

import { MeshBasicMaterial, TextureLoader } from "three";
import { Mesh } from "three";
import { ShaderMaterial } from "three";
import { SphereBufferGeometry } from "three";
import appData from "./data";
import loadTexture from "./loadTexture";
import vertexShader from '../shaders/vertex.glsl';
import fragmentShader from '../shaders/fragment.glsl';
import img1 from '../imgs/earth-uv.jpg'

const createSphere = () =>
{
    
    const sphereGeometry = new Mesh(
        new SphereBufferGeometry(5, 50, 50),
        new ShaderMaterial({
            vertexShader: vertexShader,
            fragmentShader: fragmentShader,
            uniforms: {
                globeTexture: {
                    value: new TextureLoader().load(img1)
                }
            }
        })
    )

    console.log(sphereGeometry)

return sphereGeometry;
}

export default createSphere;

image isn't found.

chris posted 3 years ago

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!

0
h
harp34 posted 3 years ago

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.

0
chris posted 3 years ago

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.

0
h
harp34 posted 3 years ago

hahaha oh wow! I guess I was too tired that day! thanks once again!

1

Want to participate?

Create a free Chris Courses account to begin

or
Sign In

Providing the lift to launch your development career

© 2025 Chris Courses. All rights reserved.