JSFiddle - React, Tailwind, and code Playground

by Eve Weinberg

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.min.js"></script>

JavaScript

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

var camera, scene;
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 = 1200;
    camera.position.y = 1000;
    camera.lookAt({
        x: 0,
        y: 0,
        z: 0
    });

    scene = new THREE.Scene();
    
    var img = new Image(), texture;
    img.crossOrigin = '';
    img.onload = function(){
      texture = new THREE.Texture(img);
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
      texture.needsUpdate = true;
        
      var ambient = 0x888888;
      var groundMaterial = new THREE.MeshLambertMaterial({
        //color: 0xFF0000,
        map: texture
        // ambient: ambient
      });
      plane = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), groundMaterial);
      plane.rotation.x = -Math.PI / 2;
      plane.receiveShadow = true;
      plane.castShadow = false;

      scene.add(plane);
    };
    img.src = "http://4.bp.blogspot.com/-GmhxGYkkRC0/UJpDaj0lrkI/AAAAAAAAAF4/5XJMtusMMjI/s1600/Grass_Texture_01_by_goodtextures.jpg";

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

    var light;

    light = new THREE.DirectionalLight(0xdfebff, 1);
    light.position.set(300, 400, 50);
    light.position.multiplyScalar(1.3);

    light.castShadow = true;
    light.shadowCameraVisible = true;

    light.shadowMapWidth = 512;
    light.shadowMapHeight = 512;

    var d = 200;

    light.shadowCameraLeft = -d;
    light.shadowCameraRight = d;
    light.shadowCameraTop = d;
    light.shadowCameraBottom = -d;

    light.shadowCameraFar = 1000;
    light.shadowDarkness = 0.8;

   ...