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

Question

基本上，我在 WebGL 中有一个包含 2 个平面的场景。其中一个上面有透明纹理，显示效果很好。另一个应该加载了高分辨率、不透明的纹理，并用作背景。我无法弄清楚为什么背景平面不起作用，因为我直接复制了用于另一个平面的代码。我正在使用 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。这是否因为图像太大而出现问题？

Answer 1

感谢任何试图提供帮助的人，请原谅我没有用我的其余代码回复您的评论，过去几天我无法检查。无论如何，整个问题是由于我试图加载为背景纹理的图像太大而引起的。我将纹理缩小了 50% 并进行了测试，效果很好。