JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r95/examples/js/loaders/GLTFLoader.js"></script>

<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/shaders/CopyShader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/Stats.js"></script>

<script id="vertexShader" type="x-shader/x-vertex">
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix 
      * modelViewMatrix 
      * vec4( position, 1.0 );
  }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
  uniform float amount;
  uniform sampler2D tDiffuse;
  varying vec2 vUv;

  float random( vec2 p )
  {
    vec2 K1 = vec2(
      23.14069263277926, // e^pi (Gelfond's constant)
      2.665144142690225 // 2^sqrt(2) (Gelfond–Schneider constant)
    );
    return fract( cos( dot(p,K1) ) * 12345.6789 );
  }

  void main() {

    vec4 color = texture2D( tDiffuse, vUv );
    vec2 uvRandom = vUv;
    uvRandom.y *= random(vec2(uvRandom.y,amount));
    color.rgb += random(uvRandom)*0.10;
    gl_FragColor = vec4( color  );
  }
</script>

 <script type="x-shader/x-vertex" id="grassVertexShader">

        precision mediump float;
        uniform float globalTime;
        uniform float magnitude;
        uniform vec2 uvScale;
        uniform vec3 lightPos;
        varying vec2 vUv;
        varying vec3 vNormal;
        varying vec4 vLightPos;
        varying vec4 vecPos;

        float random (in vec2 st) {
            return fract(sin(dot(st.xy,
                               ...

CSS

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

JavaScript

// a basic three.js scene

var container, renderer, scene, camera, controls;
var reusableVector = new THREE.Vector3();
var stats;
			var reusableVector2 = new THREE.Vector2();
      var zoneSize = 9000;
      var composer;
      
      
      let cloud


    const map = (val, smin, smax, emin, emax) => (emax-emin)*(val-smin)/(smax-smin) + emin
    const jitter = (geo,per) => geo.vertices.forEach(v => {
        v.x += map(Math.random(),0,1,-per,per)
        v.y += map(Math.random(),0,1,-per,per)
        v.z += map(Math.random(),0,1,-per,per)
    })
    const chopBottom = (geo,bottom) => geo.vertices.forEach(v => v.y = Math.max(v.y,bottom))

    function makeCloud() {

        const geo = new THREE.Geometry()

        const tuft1 = new THREE.SphereGeometry(1.5,7,8)
        tuft1.translate(-2,0,0)
        geo.merge(tuft1)

        const tuft2 = new THREE.SphereGeometry(1.5,7,8)
        tuft2.translate(2,0,0)
        geo.merge(tuft2)

        const tuft3 = new THREE.SphereGeometry(2.0,7,8)
        tuft3.translate(0,0,0)
        geo.merge(tuft3)


        jitter(geo,0.2)
        chopBottom(geo,-0.5)
        geo.computeFlatVertexNormals()

        return new THREE.Mesh(
            new THREE.BufferGeometry().fromGeometry(geo),
            new THREE.MeshLambertMaterial({
                color:'white',
                flatShading:true,
            })
        )
    }



init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer({
        antialias: false,
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor("#9D3492");
     renderer.gammaFactor = 5.2;
    	renderer.physicallyCorrectLights = true;
			renderer.gammaInput = true;
			renderer.gammaOutput = true;
    container = document.createElement('div');
    document.body.appendChild(container);
    container.appendChild(renderer.domElement);

    // scene
    scene = new THREE.Scene();
  //scene.background = new THREE.Color( new THREE.Color(.5,...