JSFiddle - React, Tailwind, and code Playground

by bmd0031

HTML

<div id="webgl" >
</div>

CSS

div {
                background:#000;
                color:#fff;
                padding:0;
                margin:0;
                overflow:hidden;
                font-family:georgia;
                text-align:center;
            }

JavaScript

//THREE.js Animation Objects
var scene, camera, renderer;

//THREE.js Drawing Objects
var geometry, lineGeometry, line, particle, mesh, material, sprite, sphere, cube, circle, shape, plane;

//THREE.js and JS Interaction Objects and Lights
var mouse = new THREE.Vector3(),
    controls, INTERSECT, INTERSECTED, projector = new THREE.Projector(),
    ambientLight, pointLight, directionalLightFront, directionalLightBack;

//Object Helpers, iterators, and integer variables
var container = document.getElementById('webgl'),
    canvasHeight = 400,
    canvasWidth = 400,
    colors = [],
    i = 0,
    k = 0,
    SELECTED, objects = [],
    radius = 200,
    mouseX, mouseY, y1 = 0,
    y2 = -200;




function init() {

    //create a scene
    scene = new THREE.Scene();

    //create a camera and add to scene
    camera = new THREE.PerspectiveCamera(55, canvasWidth / canvasHeight, 2, 10000);
    camera.position.z = 100;
    scene.add(camera);



    //create a renderer and append it to the container
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        clearColor: 0x000000,
        clearAlpha: 0.15
    });
    renderer.setSize(canvasWidth, canvasHeight);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = true;
    container.appendChild(renderer.domElement);

    //set up our drawing objects
    geometry = new THREE.Geometry();
    lineGeometry = new THREE.Geometry();
    particle = new THREE.Vector3();
    mouse = new THREE.Vector3();
    sphere = new THREE.SphereGeometry(10, 50, 50);

    //create a plane
    plane = new THREE.Mesh(new THREE.PlaneGeometry(2000, 2000, 8, 8), new THREE.MeshBasicMaterial({
        color: 0x000000,
        opacity: 0.25,
        transparent: true,
        wireframe: true
    }));
    plane.geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / 2));
    plane.visible = false;
    scene.add(plane);

    // create lights: ambient and point
    ambientLight = new THREE.AmbientLight(0xff5500);
   ...