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

【问题标题】：Three.js WebGL texture shows up black on planeThree.js WebGL 纹理在平面上显示为黑色
【发布时间】：2012-09-17 20:40:22
【问题描述】：

所以基本上，我在 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。是不是因为图片太大所以有问题？

【问题讨论】：

您是否有工作演示或问题示例可以向我们展示？您应该考虑在jsFiddle 上发布您的问题的孤立实例。这将有助于我们更好地理解。
你的摄像头代码是多少，你确定 backgroundPlane 在摄像头的视锥内吗？
尝试使用小得多且大小为 2 次方的图像，例如。 1024 x 1024。使平面与纹理的比例为1：1，至少可以排除纹理并专注于调试。

标签： javascript html three.js textures

【解决方案1】：

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

【讨论】：