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, bgScene, bufferScene, bufferTexture;
init();
overrideFunctions();
animate();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer({alpha:true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.autoClear = false;
    
        // Create a different scene to hold our buffer objects
    bufferScene = new THREE.Scene();
    // Create the texture that will store our result
    bufferTexture = new THREE.WebGLRenderTarget( window.innerWidth/10, window.innerHeight/10, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter});    
    bufferTexture.wrapS = THREE.MirroredRepeatWrapping;
    bufferTexture.wrapT = THREE.MirroredRepeatWrapping;
		//renderer.background = bufferTexture.texture;

    
    // 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();
    bgScene = new THREE.Scene();

    //scene.background = bufferTexture;    
		scene.background = bufferTexture.texture;

    // 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:...