I'm currently working on a three.js code that involves creating a skybox using a cube with different pictures on each side. However, when I run the file, instead of seeing the cube with the images, all I get is a black screen.
I suspect that the issue may lie within the dev or three.min.js script. Oddly enough, the dev script worked perfectly fine for my previous projects, but it's not functioning properly for this specific file.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="bad.css" />
<title>My first three.js app</title>
</head>
<body>
<script src="three.min.js"></script>
<script src="https://raw.githack.com/mrdoob/three.js/dev/build/three.js"></script>
<script src = "OrbitControls.js"></script>
<script>
// Our Javascript will go here.
let scene, camera, renderer;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(55,window.innerWidth/window.innerHeight,45,30000);
camera.position.set(-900,-200,-900);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', renderer);
controls.minDistance = 500;
controls.maxDistance = 1500;
let materialArray = [];
let texture_ft = new THREE.TextureLoader().load( 'arid2_ft.jpg');
let texture_bk = new THREE.TextureLoader().load( 'arid2_bk.jpg');
let texture_up = new THREE.TextureLoader().load( 'arid2_up.jpg');
let texture_dn = new THREE.TextureLoader().load( 'arid2_dn.jpg');
let texture_rt = new THREE.TextureLoader().load( 'arid2_rt.jpg');
let texture_lf = new THREE.TextureLoader().load( 'arid2_lf.jpg');
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_ft }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_bk }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_up }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_dn }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_rt }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_lf }));
for (let i = 0; i < 6; i++)
materialArray[i].side = THREE.BackSide;
let skyboxGeo = new THREE.BoxGeometry( 10000, 10000, 10000);
let skybox = new THREE.Mesh( skyboxGeo, materialArray );
scene.add( skybox );
animate();
}
function animate() {
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
init();
</script>
</body>
</html>
Upon running the code, the expected result is a skybox cube with images on each side, but instead, I'm only seeing a black screen.