Take the 2-minute tour ×

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 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 4655x3348. Is this having an issue because the image is so large?

share|improve this question
Do you have a working demo or example of your problem you can show us? You should consider posting an isolated instance of your problem on jsFiddle. This will help us better understand. –  Cory Gross Sep 17 '12 at 22:17
What is your camera code, are you sure the backgroundPlane is within the camera's view frustrum? –  Cory Gross Sep 17 '12 at 22:17
Try with an image which is much smaller and power of 2 in size, eg. 1024 x 1024. make the plane a 1:1 ratio to the texture, at least then you can rule out the texture and concentrate on debugging. –  Neil Sep 18 '12 at 11:00

1 Answer 1

up vote 1 down vote accepted

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.

share|improve this answer

Your Answer


