JSFiddle - React, Tailwind, and code Playground

by phacer

HTML

<div class="canvas" id="canvas3d"></div>

CSS

.canvas {
    background: #c5c5c5; 
    border: 1px #676767 solid;
    width: 600px;
    height: 338px;
    position: absolute;
}

JavaScript

var camera, scene, renderer, controls, root, projector;

var WIDTH = 600, HEIGHT = 338;
var VIEW_ANGLE = 50, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000;

var rect, lshape;

var objects = [];

init();
addObjects();
addRectangle();
animate();

function init() {
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    camera.position.set(0, 1000, 2500);
    scene = new THREE.Scene();
    root = new THREE.Object3D();
    scene.add(root);

    //
    projector = new THREE.Projector();
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(WIDTH, HEIGHT);
    document.getElementById('canvas3d').appendChild(renderer.domElement);

    //

    //controls = new THREE.TrackballControls(camera, renderer.domElement);
    //controls.rotateSpeed = 0.1;
    //controls.addEventListener('change', render);
    
    document.getElementById('canvas3d').addEventListener("mousedown", getPosition, false);



    //document.getElementById('canvas3d').addEventListener('mousedown', onDocumentMouseDown, false);
    //window.addEventListener('resize', onWindowResize, false);
}

function addRectangle() {
    var geometry = new THREE.CubeGeometry(1, 1, 1);
    
    var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
        color: 0x676767,
        opacity: 1.0
    }));
    
    var sizeX = 1000, sizeY = 800;

    object.scale.x = sizeX;
    object.scale.y = 10;
    object.scale.z = sizeY;

    root.add(object);
    objects.push(object);
    
    camera.lookAt(object.position);
    
    //Add walls
    
    object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
        color: 0xffffff,
        opacity: 0.5
    }));
    
    sizeX = 1000;
    sizeY = 400;
    var sizeZ = 10;
    
    object.position.x = 0;
    object.position.y = sizeY/2;
    object.position.z = sizeY;

    object.scale.x = sizeX;
    object.scale.y = sizeY;
    object.scale.z = sizeZ;
    
    root.add(object);
    objects.push(object);
    
    object = new...