JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

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

JavaScript

// Simple three.js example

var mesh_1, mesh_2, renderer, scene, camera, controls;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    
    // camera
    FRUSTUM_SIDE = 20
    camera = new THREE.OrthographicCamera(-FRUSTUM_SIDE/2, FRUSTUM_SIDE/2, 
                                           FRUSTUM_SIDE/2, -FRUSTUM_SIDE/2,
                                          -FRUSTUM_SIDE/2, FRUSTUM_SIDE/2);
    // position the camera on the edge of the frustum looking inside
    //camera.position.z = FRUSTUM_SIDE/2;

    // controls
    controls = new THREE.OrbitControls( camera,renderer.domElement );
    
    // ambient
    scene.add( new THREE.AmbientLight( 0xffffff ) );
    
    // light
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 0, 0, 10 );
    scene.add( light );
    
    // axes
    scene.add( new THREE.AxisHelper( 20 ) );
    
    // create two triangular plane geometries
    var geometry_1 = new THREE.Geometry();
    var v1 = new THREE.Vector3(0,0,0);
    var v2 = new THREE.Vector3(3,0,0);
    var v3 = new THREE.Vector3(0,3,0);
    geometry_1.vertices.push(v1); 
    geometry_1.vertices.push(v2); 
    geometry_1.vertices.push(v3);
    geometry_1.faces.push(new THREE.Face3(0, 1, 2));
    //geometry_1.faces.push(new THREE.Face3(0, 2, 1));
    
    /*var geometry_2 = new THREE.Geometry();
    var v1 = new THREE.Vector3(0,0,0);
    var v2 = new THREE.Vector3(3,0,0);
    var v3 = new THREE.Vector3(0,3,0);
    geometry_2.vertices.push(v1); 
    geometry_2.vertices.push(v2); 
    geometry_2.vertices.push(v3);
    geometry_2.faces.push(new THREE.Face3(0, 2, 1));*/
 
    // create a double sided material
    var material = new THREE.MeshPhongMaterial({
         color:     0x3096ca,
         emissive:  0x160909,
        ...