Three.js base

A base/starter fiddle for Three.js

by spacorum

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
<script src="https://threejs.org/examples/js/objects/Water.js"></script>
<script src="https://threejs.org/examples/js/objects/Sky.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
    padding: 0;
    margin: 0;
}
canvas {
  display: block;
}

JavaScript

var camera, scene, renderer, mesh, material, stats, water;
init();
overrideFunctions();
animate();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.autoClear = false;
    
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.

		camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
		camera.position.set( 30, 30, 100 );

    // Create scene.
    scene = new THREE.Scene();

    // Create light and add to scene.
  	light = new THREE.DirectionalLight( 0xffffff, 0.8 );
  	scene.add( light );
    
    

    // Water

    var waterGeometry = new THREE.PlaneBufferGeometry( 10000, 10000 );

    water = new THREE.Water(
      waterGeometry,
      {
        textureWidth: 512,
        textureHeight: 512,
        waterNormals: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/waternormals.jpg', function ( texture ) {

          texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

        } ),
        alpha: 1.0,
        sunDirection: light.position.clone().normalize(),
        sunColor: 0xffffff,
        waterColor: 0x001e0f,
        distortionScale: 3.7,
        fog: scene.fog !== undefined
      }
    );
    water.rotation.x = - Math.PI / 2;
    scene.add( water );
    
    

    // Skybox
    var sky = new THREE.Sky();
    sky.scale.setScalar( 10000 );
    scene.add( sky );

    var uniforms = sky.material.uniforms;

    uniforms[ "turbidity" ].value = 10;
    uniforms[ "rayleigh" ].value = 2;
    uniforms[ "luminance" ].value = 1;
    uniforms[ "mieCoefficient" ].value = 0.005;
    uniforms[ "mieDirectionalG" ].value = 0.8;

    var parameters = {
      distance: 400,
      inclination: 0.49,
      azimuth: 0.205
    };

    var cubeCamera = new THREE.CubeCamera( 1, 20000, 256 );
   ...