Three.js base

A base/starter fiddle for Three.js

by Paul West

HTML

<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>

CSS

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

JavaScript

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

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap; 

    renderer.setPixelRatio( window.devicePixelRatio );

    renderer.gammaFactor = 2.2;
    renderer.gammaOutput = true;

    renderer.physicallyCorrectLights = true;

    document.body.appendChild(renderer.domElement);

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

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

    var geometry = new THREE.PlaneGeometry( 15, 20, 32 );
    var material = new THREE.MeshPhongMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
    plane = new THREE.Mesh( geometry, material );
    scene.add( plane );
    plane.rotation.set(0,.4,THREE.Math.degToRad(90));
    plane.position.y = 10;
    
    var material2 = new THREE.MeshPhongMaterial( {color: 0xff0000, side: THREE.DoubleSide} );
    var geometry2 = new THREE.PlaneBufferGeometry( 15, 20, 32 );
    planeBuffer = new THREE.Mesh( geometry2, material2 );
    scene.add( planeBuffer );
    planeBuffer.rotation.set(0,.4,THREE.Math.degToRad(90));
    planeBuffer.position.y = -10;
    console.log ( 'planeBuffer', planeBuffer );

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

    // Create directional light and add to scene.
    var directionalLight = new THREE.DirectionalLight(0xffffff, 2);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);

    // Add stats to page.
    stats = new Stats();
    document.body.appendChild(...