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.
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