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/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/MaskPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/ConvolutionShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/Stats.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var geometry, material, mesh;
var composer;
var stats;
    /*var bloomStrength = 2;
		var bloomRadius = 5;
		var bloomThreshold = 0.4;*/
		var bloomStrength = .8;
		var bloomRadius = 0;
		var bloomThreshold = 0.1;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;

    scene = new THREE.Scene();

   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);
    //geometry = new THREE.CubeGeometry(200,200,200);
    geometry = new THREE.BoxGeometry( 200,200, 200 );
    var geo = new THREE.EdgesGeometry( geometry );
  	var mat = new THREE.MeshBasicMaterial( { color: "silver"} );

    mesh = new THREE.Mesh(geometry, mat);
    scene.add(mesh);




 // mesh
    var loadingManager = new THREE.LoadingManager();
    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 = textureLoader.load("https://cdn.glitch.com/8305bd7f-34e1-4e23-aff2-b1d6b60dd25c%2FDisplacementMap%20(2).png?1553296232571")
    np.repeat.set(5, 5)
   np.wrapS = THREE.RepeatWrapping;
np.wrapT = THREE.RepeatWrapping;



    var planeGeometry = new THREE.PlaneGeometry(2500, 2500, 100, 100);
    var planeMaterial = new THREE.MeshLambertMaterial({
        color: new THREE.Color("green")
 
    });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -Math.PI / 2;
    scene.add(plane);
    
 ...