Three.js WebGL texture shows up black on plane

So basically, I have a scene in WebGL with 2 planes. One of them has a transparent texture on it and it shows up fine. The other is supposed to have a high res, non-transparent texture loaded up on it and it is used as a background. I can’t figure out why the background plane isn’t working, since I directly copied the code used for the other plane. I’m using xampp to host a local server so that I can correctly read the images files. I’ve also already tried to save it as a png instead of a jpg and it still did not work.

Here is the exact code I’m using to create the background plane and right after it is the code used to create the working plane in front of it.

var texture = THREE.ImageUtils.loadTexture('imgs/backgrounds.png');
var geometry = new THREE.PlaneGeometry(645, 300);
var material = new THREE.MeshBasicMaterial({map: texture});
var plane = new THREE.Mesh(geometry, material);
plane.receiveShadow = false;

//Background Texture
var backgroundTexture = THREE.ImageUtils.loadTexture('imgs/gears.png');
var backgroundGeo = new THREE.PlaneGeometry(1000, 800);
var backgroundMat = new THREE.MeshBasicMaterial({map: backgroundTexture, transparent: true});
var backgroundPlane = new THREE.Mesh(backgroundGeo, backgroundMat);
backgroundPlane.position.z = -60;

I have verified that the image loads correctly in an image editing program. The image’s resolution is 4655×3348. Is this having an issue because the image is so large?

Answer

Thanks to anyone that attempted to help and please excuse me for not responding to your comments with the rest of my code, I was unable to check over the last few days. Anyways, the whole issue was caused by the fact that the image I was trying to load as a texture for the background was too large. I scaled the texture down by 50% and tested it and it worked just fine.

Advertisement

Answer