JSFiddle - React, Tailwind, and code Playground

by steveow

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/Detector.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script id="vs" type="x-shader/x-vertex">
    //        attribute vec2 aTextureCoord;
    varying vec2 vTextureCoord;
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        //        vTextureCoord = aTextureCoord;
        vTextureCoord = vec2(position.x, position.y) / 10.0;
    }
</script>
<script id="fs" type="x-shader/x-fragment">
    uniform float time;
    uniform vec2 resolution;
    varying vec2 vTextureCoord;

    void main() {
        //        float distance = distance(vTextureCoord, vec2(0.5, 0.5));
        float distance = length(vTextureCoord);
        float att = 1.8 * (distance - 0.05);
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0 - att);
    }
</script>
<div id="WebGLCanvas">

CSS

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

JavaScript

// Global scene object
var scene;

// Global camera object
var camera;

// Orbit Controls
var controls;

// Initialize the scene
initializeScene();

// Render the scene (map the 3D world to the 2D scene)
renderScene();

/**
 * Initialze the scene.
 */
function initializeScene() {
    // Check whether the browser supports WebGL. If so, instantiate the hardware accelerated
    // WebGL renderer. For antialiasing, we have to enable it. The canvas renderer uses
    // antialiasing by default.
    // The approach of multiplse renderers is quite nice, because your scene can also be
    // viewed in browsers, which don't support WebGL. The limitations of the canvas renderer
    // in contrast to the WebGL renderer will be explained in the tutorials, when there is a
    // difference.
    if (Detector.webgl) {
        renderer = new THREE.WebGLRenderer({
            antialias: true
        });

        // If its not supported, instantiate the canvas renderer to support all non WebGL
        // browsers
    } else {
        renderer = new THREE.CanvasRenderer();
    }

    // Set the background color of the renderer to black, with full opacity
    //renderer.setClearColor(0x000000, 1);

    // Get the size of the inner window (content area) to create a full size renderer
    canvasWidth = window.innerWidth;
    canvasHeight = window.innerHeight;

    // Set the renderers size to the content areas size
    renderer.setSize(canvasWidth, canvasHeight);

    // Get the DIV element from the HTML document by its ID and append the renderers DOM
    // object to it
    document.getElementById("WebGLCanvas").appendChild(renderer.domElement);

    // Create the scene, in which all objects are stored (e. g. camera, lights,
    // geometries, ...)
    scene = new THREE.Scene();

    // Now that we have a scene, we want to look into it. Therefore we need a camera.
    // Three.js offers three camera types:
    //  - PerspectiveCamera (perspective projection)
    //  -...