JSFiddle - React, Tailwind, and code Playground

by eriksombroek

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script id="shader">
        shader = {
            uniforms: {
                "fillLight": { value: new THREE.Vector3(0, 1, 2) },
                "fillLightColor": { value: new THREE.Color(0.5, 0.5, 0.5) },

                "dirLight": { value: new THREE.Vector3(-1, 1, 1) },
                "dirLightColor": { value: new THREE.Color(0.5, 0.5, 0.5) },

                "ambientLightColor": { value: new THREE.Color(0.5, 0.5, 0.7) },

                "saturation": { value: 1.0 },
                "_Brightness": { value: 0.8 },
                "transparency": { value: 1 },
                "GREY_COLOR": { value: new THREE.Vector3(.222, .707, .071) }
            },

            vertexShader: [
                // Available inputs
                // ----------------
                // uniform mat4 modelMatrix;
                // uniform mat4 modelViewMatrix;
                // uniform mat4 projectionMatrix;
                // uniform mat4 viewMatrix;
                // uniform mat3 normalMatrix;
                // uniform vec3 cameraPosition;
                // attribute vec3 position;
                // attribute vec3 normal;
                // attribute vec2 uv;

                "uniform vec3 fillLight;",
                "uniform vec3 dirLight;",
                "uniform vec3 fillLightColor;",
                "uniform vec3 dirLightColor;",
                "uniform vec3 ambientLightColor;",
                "uniform float saturation;",
                "uniform float _Brightness;",
                "uniform vec3 GREY_COLOR;",
                
                "// chunk(shadowmap_pars_vertex);",

                "varying vec4 vColor;",
                "varying vec3 vWorldPosition;",

                "void main() {",
                "mat4 mvp = projectionMatrix * viewMatrix * modelMatrix;",
                
                "vec4...

JavaScript

var mesh, renderer, scene, camera, controls;
var ground, time = 0;


init();
animate();

function init() {


  // renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;
  document.body.appendChild(renderer.domElement);

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

  // camera
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(620, 620, 1020);

  // controls
  controls = new THREE.OrbitControls(camera);

  // ambient
  scene.add(new THREE.AmbientLight(0x222222));

  // light
  var light = new THREE.DirectionalLight(0xffffff, 1, 100);
  light.position.set(700, 700, 500);
  light.castShadow = true; // default false
  light.shadow.mapSize.width = 1024;
  light.shadow.mapSize.height = 1024;
  light.shadow.camera.left = -2000;
  light.shadow.camera.right = 2000;
  light.shadow.camera.top = 2000;
  light.shadow.camera.bottom = -2000;
  light.shadow.camera.near = 0.5;
  light.shadow.camera.far = 3000;
  
  var shadowAreaLength = 500
           light.shadow.camera.left = light.shadow.camera.bottom = -shadowAreaLength;
           light.shadow.camera.right = light.shadow.camera.top = shadowAreaLength;

  scene.add(light);

  var helper = new THREE.CameraHelper(light.shadow.camera);
  scene.add(helper);
console.log(shader);
  // axes
  // scene.add( new THREE.AxisHelper( 20 ) );
  
	var uniforms = THREE.UniformsUtils.clone(shader.uniforms);

  // ground plane
  var ground_geo = new THREE.PlaneGeometry(3000, 3000, 10, 10);
  var ground_mat = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexColors: THREE.VertexColors,
    vertexShader: shaderParse(shader.vertexShader),
    fragmentShader: shaderParse(shader.fragmentShader),
    flatShading: true
  });
  var lammat = new THREE.MeshLambertMaterial();

  //ground = new THREE.Mesh(ground_geo,lammat);//, ground_mat);
  //ground.position.y = -300;
  //ground.rotation.x =...