Javascript Three.js WebGL纹理在平面上显示为黑色

基本上，我在WebGL中有一个场景，有两个平面。其中一个上面有一个透明的纹理，显示得很好。另一个应该有一个高分辨率，非透明纹理加载在它上面，它被用作背景。我不明白为什么背景平面不工作，因为我直接复制了用于另一个平面的代码。我正在使用xampp托管一个本地服务器，以便正确读取图像文件。我也尝试过将其保存为png而不是jpg，但仍然没有成功

这是我用来创建背景平面的确切代码，紧接着就是用来在它前面创建工作平面的代码

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;

我已经在图像编辑程序中验证了图像是否正确加载。

---

图像的分辨率为4655x3348。这是因为图像太大而导致的问题吗？

感谢任何试图提供帮助的人，请原谅我没有用我的代码的其余部分回复您的评论，我在过去几天无法检查。

---

不管怎么说，整个问题都是因为我试图加载的背景纹理图像太大。我将纹理缩小了50%，并对其进行了测试，效果很好。

您是否有可以向我们展示您的问题的演示或示例？你应该考虑发布一个孤立的问题实例。这将有助于我们更好地理解。您的相机代码是什么？您确定背景平面在相机的视锥中吗？请尝试使用更小、2倍大小的图像，例如1024 x 1024。使平面与纹理的比例为1:1，至少可以排除纹理并集中精力进行调试。