skybox

Demonstrates how to build skyboxes. The fly controller is in effect. Based on a demo by Michael Guerrero and other sources on the web.

1-2-three
example 29: skybox

<html>
<head>
<<title>example 29: skybox</title>
</head>
<body style="background-color: #aaccff;margin: 0px;overflow: hidden;">

var container;

var camera;
var controls, scene, renderer;

var mesh, texture, geometry, material;

var skyboxCamera, skyboxScene, skyboxMesh;

var clock = new THREE.Clock();

initCamerasAndScenes();
initSkybox();
initWater();
animate();

function initCamerasAndScenes() {

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .1, 20000 );
  camera.position.z = 0.001;

scene = new THREE.Scene();

skyboxCamera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .1, 20000 );
  skyboxScene = new THREE.Scene();

// 0xDFF8FD matches the skybox at the horizon
  scene.fog = new THREE.FogExp2( 0xDFF8FD, 0.02 );

renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.autoClearColor = false;

document.body.appendChild(renderer.domElement);
  
  controls = new THREE.FlyControls(camera);
  controls.dragToLook = true;
  controls.movementSpeed = 10;
  controls.rollSpeed = 0.5;
}

function initWater() {

geometry = new THREE.PlaneGeometry( 10000, 10000, 1,1 );

geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();

var texture = THREE.ImageUtils.loadTexture( "images/water.jpg" );
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set( 100, 100 );

material = new THREE.MeshBasicMaterial( { color: 0x0044ff, map: texture } );

mesh = new THREE.Mesh( geometry, material );
  mesh.position.y = -1;
  scene.add( mesh );
  
  var cube = new THREE.Mesh(
  new THREE.CubeGeometry( 5, 5, 5 ),
  new THREE.MeshLambertMaterial( { color: 0xFF0000 } )
  );
  scene.add( cube );
  cube.position.set(0,1,-50);
}

function initSkybox() {

var path = "images/sunnysky/";
  var format = '.jpg';
  var urls = [
  path + 'px' + format, path + 'nx' + format,
  path + 'py' + format, path + 'ny' + format,
  path + 'pz' + format, path + 'nz' + format
  ];

var textureCube = THREE.ImageUtils.loadTextureCube(urls);

var shader = THREE.ShaderLib["cube"];
  shader.uniforms["tCube"].value = textureCube;

// We're inside the box, so make sure to render the backsides
  // It will typically be rendered first in the scene and without depth so anything else will be drawn in front
  var material = new THREE.ShaderMaterial({
    fragmentShader : shader.fragmentShader,
    vertexShader   : shader.vertexShader,
    uniforms       : shader.uniforms,
    depthWrite     : false,
    side           : THREE.BackSide
  });

// The box dimension size doesn't matter that much when the camera is in the center.  Experiment with the values.
  skyboxMesh = new THREE.Mesh(new THREE.CubeGeometry(1000, 1000, 1000, 1, 1, 1), material);
  skyboxScene.add(skyboxMesh);
}

function animate() {

var delta = clock.getDelta();
  controls.update( delta );

skyboxCamera.rotation.copy( camera.rotation );

requestAnimationFrame( animate );
  render();
}

function render() {

renderer.render( skyboxScene, skyboxCamera );
  renderer.render( scene, camera );
}

</script>

</body>
</html>

skybox

1-2-threeexample 29: skybox

1-2-three
example 29: skybox