JSFiddle - React, Tailwind, and code Playground

by atulmourya

HTML

<script src="https://rawgit.com/mrdoob/three.js/r88/build/three.js"></script>
    <script src="https://rawgit.com/mrdoob/three.js/r88/examples/js/controls/OrbitControls.js"></script>
    
    <script id="vertexShader" type="x-shader/x-vertex">
        
        varying vec3 vViewPosition;        
        
        //map, normalmap, bumpmap
        varying vec2 vUv;
        uniform mat3 uvTransform;
        
        //lightmap, aomap
        attribute vec2 uv2;
        varying vec2 vUv2;
                
        varying vec3 vNormal;
        
        void main()	{
            
            vUv = ( uvTransform * vec3( uv, 1 ) ).xy;
            vUv2 = uv2;
            vec3 objectNormal = vec3( normal );
            vec3 transformedNormal = normalMatrix * objectNormal;
            vec3 transformed = vec3( position );
            vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );
            gl_Position = projectionMatrix * mvPosition;
            vViewPosition = - mvPosition.xyz;
            vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );
    
        }
      
    </script>
    
    <script id="fragmentShader" type="x-shader/x-fragment">
        // #extension EXT_shader_texture_lod : enable

        #define MAXIMUM_SPECULAR_COEFFICIENT 0.16
        #define GAMMA_FACTOR 2
        #define DEFAULT_SPECULAR_COEFFICIENT 0.04


        #define PI 3.14159265359
        #define PI2 6.28318530718
        #define PI_HALF 1.5707963267949
        #define RECIPROCAL_PI 0.31830988618
        #define RECIPROCAL_PI2 0.15915494
        #define LOG2 1.442695
        #define EPSILON 1e-6
        #define saturate(a) clamp( a, 0.0, 1.0 )
        #define whiteCompliment(a) ( 1.0 - saturate( a ) )
        
        #define RE_IndirectDiffuse		RE_IndirectDiffuse_Physical
        #define RE_IndirectSpecular		RE_IndirectSpecular_Physical
        #define Material_BlinnShininessExponent( material )   GGXRoughnessToBlinnExponent( material.specularRoughness )
        #define...

CSS

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

JavaScript

var mesh, renderer, scene, camera, controls, uniform;

init();

function init() {

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(200, 200, 200);

    hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x000000, 4);
    hemisphereLight.name = "hemisphereLight";
    scene.add(hemisphereLight);

    controls = new THREE.OrbitControls(camera);

    function loadCubeMap(path, callback) {
        var format = '.jpg';
        var urls = [
            path + 'r' + format, path + 'l' + format,
            path + 'u' + format, path + 'd' + format,
            path + 'f' + format, path + 'b' + format
        ];
        var reflectionCube = new THREE.CubeTextureLoader().load(urls, callback);
        return reflectionCube;
    };

    var cubeMap = loadCubeMap("https://3d.partsgorilla.com/carvis/resources/models/environment/fogstudio/", function (cubeMap) {
        scene.background = cubeMap;
    });

    // geometry
new THREE.BufferGeometryLoader().load('https://dl.dropboxusercontent.com/s/urn5pdnlisrt4p1/geometry.json?dl=0', function (geometry){
				
        var custom_uniforms = {

            diffuse             : { value : new THREE.Color('red') },
            emissive            : { value : new THREE.Color('black')},
            ambientLightColor   : { value : new THREE.Color('white') },

            roughness           : { value: 0.5 },
            metalness           : { value: 0.5 },
            clearCoat           : { value: 1.0 },
            clearCoatRoughness  : { value: 0.0 },
            opacity             : { value: 1.0 },
            envMapIntensity     : { value: 1.0 },
            reflectivity        : { value: 0.5 },

            aoMap               : {value: new...