I've been trying to create a SkyBox in THREE.js, following some tips I found online. However, none of the methods seem to work for me. I have double-checked the file paths and image paths, so I'm not sure what's causing the skybox not to appear.
Could someone please review my code and explain why the skybox is not showing up?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Earth</title>
<meta charset="utf-8">
<style>
body {
margin: 0px;
background-color: #000000;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../js/three.min.js"></script>
<script>
var camera, scene, renderer;
var mirrorCube, mirrorCubeCamera;
var mirrorSphere, mirrorSphereCamera;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
scene.add(camera);
camera.position.set(0,150,400);
camera.lookAt(scene.position);
var sides = ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'];
var scCube = THREE.ImageUtils.loadTexture(sides);
scCube.format = THREE.RGBFormat;
var skyShader = THREE.ShaderLib["cube"];
skyShader.uniform["tCube"].value = scCube;
var skyMaterial = new THREE.ShaderMaterial( {
fragmentShader: skyShader.fragmentShader, vertexShader: skyShader.vertexShader,
uniforms: skyShader.uniforms, depthWrite: false, side: THREE.BackSide
});
var skyBox = new THREE.Mesh(new THREE.CubeGeometry(500, 500, 500), skyMaterial);
skyMaterial.needsUpdate = true;
scene.add(skyBox);
}
function render()
{
mirrorSphere.visible = false;
mirrorSphereCamera.updateCubeMap( renderer, scene );
mirrorSphere.visible = true;
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
renderer.render( scene, camera );
}
</script>
</body>
</html>