Having trouble adding a skybox to a simple scene in Three.js!
This is the code I'm using for the skybox:
var skyBox = new THREE.Mesh( new THREE.BoxGeometry( 1500, 1500, 1500 ), shaderMaterial );
sceneCube.add( skyBox );The shaderMaterial is defined as follows:
shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;
var shaderMaterial = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
} );I simply want to display some simple images as a Skybox, so I load the images using this code:
var path = "Desert-";
var format = '.png';
var urls = [
path + 'LEFT' + format, path + 'RIGHT' + format,
path + 'TOP' + format, path + 'BOT' + format,
path + 'FRONT' + format, path + 'BACK' + format
];
textureCube = new THREE.CubeTextureLoader().load( urls );When I run the code, there are no errors in the web-console. I'm using a basic scene from .
I've searched online for solutions but can't seem to find where I'm going wrong.
Thank you for your assistance!
Here is the full code I am using:
<script>
var camera, scene, renderer, cameraCube, sceneCube;
var mesh, shader;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 400;
cameraCube = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
scene = new THREE.Scene();
sceneCube = new THREE.Scene();
var path = "textures/Desert-";
var format = '.png';
var urls = [
path + 'LEFT' + format, path + 'RIGHT' + format,
path + 'TOP' + format, path + 'BOTTOM' + format,
path + 'FRONT' + format, path + 'BACK' + format
];
console.log(urls);
textureCube = new THREE.CubeTextureLoader().load( urls );
// Skybox
shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;
var shaderMaterial = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
} );
var skyBox = new THREE.Mesh( new THREE.BoxGeometry( 1500, 1500, 1500 ), shaderMaterial );
sceneCube.add( skyBox );
var texture = new THREE.TextureLoader().load( urls[3] );
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render( sceneCube, cameraCube );
renderer.render( scene, camera );
}