I’m new in three.js and i’m trying to add jpj material to a plane but i get black color?
can any one help please
var texture = new THREE.TextureLoader().load( ‘aa.jpg’ );
var planeMaterial=new THREE.MeshStandardMaterial( { map: texture } );
const planeGeometry = new THREE.PlaneBufferGeometry( 20, 20);
const plane = new THREE.Mesh( planeGeometry, planeMaterial );
Unless your JPG texture is a black image, your texture is not loaded at all (you can check that in Chrome devtools under the Network tab. You should see a red request somewhere on the list.)
You must either provide a URL to a hosted image on web, a bundled image path (if using webpack etc.), or a local webserver URL for - browser is not allowed to access images directly from your disk.
i’m using react.js
React has not much (ie. anything) to do with loading assets, three textures, and hosting images.
If you are using webpack (which is usually the case for react projects), make sure your webpack.config.js is setup properly to load and bundle images.
thank you i solved it by serving my images at public folder
1 Like
i have another issue the image is rendered but it sounds like a color not real material
i attached two photos of what i got and what i need
Since the OP is using MeshStandardMaterial, he probably has to add lights to the scene. Or using an unlit material like MeshBasicMaterial.
2 Likes