JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/Stats.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>

CSS

body {
	background-color: #0000FF;
	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 = .3;
		var bloomRadius = 0;
		var bloomThreshold = 0.1;

init();
animate();

function init() {

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

    scene = new THREE.Scene();

    // light    
    var light = new THREE.DirectionalLight(0xffffff, 4);
    light.position.set(100, 250, 250);
    scene.add(light);
    //skymap
      var rx = "https://raw.githubusercontent.com/BabylonJS/Babylon.js/master/Playground/textures/TropicalSunnyDay_"
        
var skyboxMaterials =
[
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load(rx + 'px.jpg'),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load(rx + 'nx.jpg'),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load(rx + 'py.jpg'),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load(rx + 'ny.jpg'),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load(rx + 'pz.jpg'),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load(rx + 'nz.jpg'),side: THREE.DoubleSide}
        )
];

var skyboxGeom = new THREE.CubeGeometry( 105000, 105000, 105000, 1, 1, 1 );
skybox = new THREE.Mesh( skyboxGeom, skyboxMaterials );
scene.add( skybox );
//provided this is the scene graph (same parent, otherwise you have to transform camera position)
scene.add(camera)
scene.add(skybox)
    //geometry = new THREE.CubeGeometry(200,200,200);
    geometry = new THREE.ConeGeometry( 200, 400, 8 );
    var geo = new THREE.EdgesGeometry( geometry );
  	var mat = new...