JSFiddle - React, Tailwind, and code Playground

by Atrahasis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.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, mesh2,renderer, scene, camera, controls, xSprite,ySprite,zSprite;

init();

function init() {

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

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

    // controls
    controls = new THREE.OrbitControls( camera );
    
    // ambient
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    // light
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 20, 20, 0 );
    scene.add( light );
    
    // axes
    var createAxis=function(size){
        var vertices=[
            new THREE.Vector3(size,0,0),
            new THREE.Vector3(0,size,0),
            new THREE.Vector3(0,0,size)
            ];
        var axis=[];
        for(var i=0;i<vertices.length;i++){
            var geo=new THREE.Geometry();
            geo.vertices.push(
                new THREE.Vector3(0,0,0),
                vertices[i]
                );
            var color=i===0?0xff0000:i===1?0x00ff00:0x0000ff;
            var line=new THREE.Line(
                geo,
                new THREE.LineBasicMaterial({color:color})
            );
            scene.add(line);
            var raycaster=new THREE.Raycaster(scene.position,vertices[i]);
            axis.push(raycaster);
        }
        return axis
    }
    var axis=createAxis(2000);
    
    var sprites=[];
    var cameraHelper=new THREE.CameraHelper(camera);
    
    controls.addEventListener('change',function(){renderer.render(scene,camera)},false); 
    controls.addEventListener('change',function(){
        var geometry=new THREE.Geometry();
        //geometry.vertices.push(pointMap);
        /*geometry.faces.push(
            new...