2

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

4

1 回答 1

2

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

于 2012-09-20T20:25:00.333 回答