My attempt to create a SkyBox with ThreeJS code was unsuccessful. Instead of rendering properly, it quickly flashed for a second and then turned black. The code I used is shown below:
<html>
<head>
</head>
<body>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 100000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera.position.z=5;
var geometry=new THREE.CubeGeometry(10000,10000,10000);
var cubeMaterials=camera
[
new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/grass-texture.jpg"), side:THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide})
];
//var cubeMaterial=new THREE.MeshBasicMaterial(cubeMaterials);
var cube=new THREE.Mesh(geometry,cubeMaterials);
scene.add(cube);
renderer.render(scene,camera);
</script>
</body>
</html>
I am unsure of why the above code is not functioning correctly. Can someone identify the issue within this code snippet?