Three.js base

A base/starter fiddle for Three.js

by bitsofcoad

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://rawgit.com/mrdoob/three.js/dev/examples/js/lights/RectAreaLightUniformsLib.js"></script>

CSS

body {
  padding: 0;
  margin: 0;
}

JavaScript

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

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer( {
        shadowMapEnabled: true
    } );
    renderer.shadowMap.enabled = true;
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 50;

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

    // Create material
    material = new THREE.MeshPhongMaterial();

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(10, 10, 10);
    mesh = new THREE.Mesh(geometry, material);
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    scene.add(mesh);
    
    geometry = new THREE.BoxGeometry( 50, 50, 50 );
    mesh2 = new THREE.Mesh( geometry, material );
    mesh2.receiveShadow = true;
    mesh2.position.set( 0, -50, 0 );
    scene.add( mesh2 );

    // Create ambient light and add to scene.
    //var light = new THREE.AmbientLight(0x404040); // soft white light
    //scene.add(light);

		// rect light test
    var width = 20;
    var height = 20;
    var rectLight = new THREE.RectAreaLight( 0xffffff, 500,  width, height );
    rectLight.intensity = 500.0;
    rectLight.position.set( 0, 30, 0 );
		rectLight.lookAt( mesh2.position );
    scene.add( rectLight )

    var rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
    scene.add( rectLightHelper );

	/*
    // Create directional light and add to scene.
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(10, 30, 10);
    directionalLight.castShadow = true;
    //directionalLight.shadowBias = 0.00022;
    scene.add(directionalLight);

		var helper = new THREE.CameraHelper(...