JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://cdn.rawgit.com/mrdoob/three.js/r117/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/r117/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/Stats.js"></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;
				varying vec3 rpos;
        float random (in vec2 st) {
            return fract(sin(dot(st.xy,
                                vec2(12.9898,78.233)))
                * 43758.5453123);
        }


        // 2D Noise based on Morgan McGuire @morgan3d
        // https://www.shadertoy.com/view/4dS3Wd
        float noise (in vec2 st) {
            vec2 i = floor(st);
            vec2 f = fract(st);

            // Four corners in 2D of a tile
            float a = random(i);
            float b = random(i + vec2(1.0, 0.0));
            float c = random(i + vec2(0.0, 1.0));
            float d = random(i + vec2(1.0, 1.0));

            // Smooth Interpolation

            // Cubic Hermine Curve.  Same as SmoothStep()
            vec2 u = f*f*(3.0-2.0*f);
            // u = smoothstep(0.,1.,f);

            // Mix 4 coorners porcentages
            return mix(a, b, u.x) +
            (c - a)* u.y * (1.0 - u.x) +
            (d - b) * u.x * u.y;
        }


        void main() {
            vNormal =  (modelMatrix * vec4(normal, 0.0)).xyz;
            vec3 pos = position;
            // animate only the pixels that are upon the ground
            if (pos.y > 1.0) {
                float noised = noise(pos.xy);
                pos.y += sin(globalTime * magnitude * noised);
                pos.z +=...

JavaScript

// a basic three.js scene

var container, renderer, scene, camera, controls;
var dummy = new THREE.Object3D();
var reusableVector = new THREE.Vector3();
			var reusableVector2 = new THREE.Vector2();
      var zoneSize = 1500;
var stats;
 THREE.ImageUtils.crossOrigin = '';
init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer({
        antialias: false,
        precision: 'lowp'
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xccccff);
    //renderer.setPixelRatio(.8)
    container = document.createElement('div');
    document.body.appendChild(container);
    container.appendChild(renderer.domElement);

    // scene
    scene = new THREE.Scene();
    
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '30px';
	stats.domElement.style.zIndex = 100;
	container.appendChild( stats.domElement );
    // camera
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 200, 800);
    camera.lookAt(scene.position);

    // (camera) controls
    // mouse controls: left button to rotate, 
    //    mouse wheel to zoom, right button to pan
    controls = new THREE.OrbitControls(camera, renderer.domElement);

    // light    
    var light = new THREE.PointLight(0xffffff);
    light.position.set(100, 250, 250);
    scene.add(light);
    
    
      var texture = THREE.ImageUtils.loadTexture('https://cdn.glitch.com/03c1b291-1ddc-415e-afd8-2c410c525542%2FMaterial__25__background_JPG_002_emissive.jpg?v=1563077337997');
    var sphereGeometry = new THREE.SphereGeometry(1000, 32, 16);
    var sphereMaterial = new THREE.MeshBasicMaterial({
    color: "#E51A9C",
     side:THREE.BackSide,
     map: texture
    });
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  
    sphere.position.y = 100;
    scene.add(sphere);
    

function loadGrass(n_planes, geom){

		var geo =...