Question

基本上，我在WebGL中有一个有2个平面的场景。其中一个有透明的纹理，它显示很好。另一个应该加载高res，非透明纹理，并用作背景。我无法弄清楚为什么背景平面不起作用，因为我直接复制了用于另一个平面的代码。我正在使用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％并对其进行了测试，效果很好。

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

1 个答案: