After successfully creating a skybox with the provided code, I ran into an issue where it displayed perfectly at 1,000 x 1,000 x 1,000 dimensions. However, upon expanding it to 10,000 x 10,000 x 10,000, it only appeared as black. Is there a specific setting that needs to be adjusted in order to accommodate a larger skybox?
var ambientLight = new THREE.AmbientLight(0x000044);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xff8040);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
// Incorporating the skybox
var directions = ["miramar3.jpg", // right of me
"miramar1.jpg", // left of me
"miramar4.jpg", // above me
"miramar5.jpg", // beneath me
"miramar6.jpg", // behind me
"miramar2jpg", // in front of me
];
var skyGeometry = new THREE.CubeGeometry( 1000, 1000, 1000 );
var materialArray = [];
for (var i = 0; i < 6; i++)
materialArray.push( new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture( directions[i] ),
side: THREE.BackSide
}));
var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
skyBox.position.y += 200;
scene.add( skyBox );