つまり、基本的に、2つのプレーンを持つWebGLのシーンがあります。そのうちの1つには透明なテクスチャがあり、きれいに表示されます。もう1つは、高解像度の不透明なテクスチャがロードされていると想定されており、背景として使用されます。他のプレーンに使用されているコードを直接コピーしたため、バックグラウンドプレーンが機能しない理由がわかりません。画像ファイルを正しく読み取ることができるように、xamppを使用してローカルサーバーをホストしています。また、jpgではなくpngとして保存しようとしましたが、それでも機能しませんでした。
これは、背景平面を作成するために使用している正確なコードであり、その直後に、その前に作業平面を作成するために使用されているコードがあります。
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です。画像がとても大きいので、これは問題がありますか?