three.js所WebGL的紋理顯示了黑色平面

所以基本上，我對WebGL的2個面的場景。其中之一有一個透明的紋理，它顯示了很好。另一個應該有一個高分辨率，不透明的紋理加載它，它被用作背景。我找不出爲什麼背景平面不工作，因爲我直接複製了用於其他平面的代碼。我使用xampp來託管本地服務器，以便我可以正確讀取圖像文件。我也已經嘗試將它保存爲PNG而不是JPG，但它仍然不起作用。three.js所WebGL的紋理顯示了黑色平面

這裏是我用來創建背景的面和右後是用於創建在它前面的工作平面的代碼確切的代碼。

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。這是否有問題，因爲圖像太大了？

來源

2012-09-17 jctjct3

你有你的問題的工作演示或者例如，你可以告訴我們？你應該考慮在[jsFiddle]（http://jsfiddle.net/）上發佈你的問題的孤立實例。這將幫助我們更好地理解。 –

你的相機代碼是什麼，你確定backgroundPlane在相機的視野內嗎？ –

嘗試使用尺寸更小，功率更小的圖像，例如。 1024×1024。使平面與紋理的比例爲1：1，至少可以排除紋理並專注於調試。 – Neil

感謝任何人，試圖幫助和請原諒我不迴應與我的代碼的其餘您的意見，我無法檢查在過去的幾天。無論如何，整個問題是由於我試圖加載作爲背景紋理的圖像太大造成的。我將紋理縮小了50％並進行了測試，效果很好。

來源

2012-09-20 20:25:00 jctjct3

three.js所WebGL的紋理顯示了黑色平面

回答

相關問題