JSFiddle - React, Tailwind, and code Playground

by Bob Woodley

JavaScript

var SCREEN_WIDTH = window.innerWidth - 100;
var SCREEN_HEIGHT = window.innerHeight - 100;

var camera, scene, _planeMesh;
var canvasRenderer, webglRenderer;

var container, mesh, geometry, plane;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 100000);
    camera.position.x = 100;
    camera.position.y = 100;
    camera.position.z = 100;
    camera.lookAt({
        x: 0,
        y: 0,
        z: 0
    });

    scene = new THREE.Scene();


var floorTexture = new THREE.ImageUtils.loadTexture( 'http://stemkoski.github.io/Three.js/images/checkerboard.jpg' );
	floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
	floorTexture.repeat.set( 10, 10 );
	var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
	var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
    
    var groundMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff, side:THREE.DoubleSide 
    });
    plane = new THREE.Mesh(new THREE.PlaneGeometry(2000,2000,10,10), groundMaterial);
	plane.rotation.x = Math.PI / 2;
    plane.position.y = -40;
    plane.receiveShadow = true;

    scene.add(plane);

    // LIGHTS
    //scene.add(new THREE.AmbientLight(0x660000));

    var light;

    light = new THREE.SpotLight(0x0000ff);
    light.position.set(40, 40, 0);
    light.castShadow = true;
    light.shadowCameraVisible = true;
    light.shadowMapWidth = 2048;
    light.shadowMapHeight = 2048;
    light.position.set(24, 20, 0);
    light.lookAt(plane);    
    light.castShadow = true;
    light.angle = .8;
    light.intensity = 30;
    light.distance=0;
    light.shadowCameraNear = 2;
    light.shadowCameraFar = 100;
    light.shadowCameraFov = 100;
    light.shadowDarkness = 1;
   ...