JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://threejs.org/examples/js/effects/OutlineEffect.js"></script>

JavaScript

// a basic three.js scene

var container, renderer, scene, camera, controls;

var displacementTexture;
var effect;
var reusableVector = new THREE.Vector3();
var reusableVector2 = new THREE.Vector2();
init();
animate();

function init() {

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

    // scene
    scene = new THREE.Scene();
   var fog = new THREE.Fog("#06152B", 0, 2500);

     scene.fog = fog
effect = new THREE.OutlineEffect( renderer );

    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    
    // light    
   var light2 = new THREE.HemisphereLight(new THREE.Color(.5, .5, .5), 0x080820, 1);
    light2.position.set(100, 550, 550);
    light2.intensity = .6
    scene.add(light2);

    // mesh
    var loadingManager = new THREE.LoadingManager( generateRock );
    THREE.TextureLoader.crossOrigin = '';
           var textureLoader = new THREE.TextureLoader(loadingManager);
      
      
      
    var dp = textureLoader.load("https://cdn.glitch.com/936ab9e3-541f-4e60-bab4-b2b5d163d73f%2Fmountain-heightmap-generator-mountain-heightmap-generator-8-images-art-sego.jpg?1553289104377");
    
        var disp = textureLoader.load("https://cdn.glitch.com/8305bd7f-34e1-4e23-aff2-b1d6b60dd25c%2Fnoise_simplex.png?1553102758105");
        
        
    
    var np =...