JSFiddle - React, Tailwind, and code Playground

by phacer

HTML

<script src="http://mrdoob.github.io/three.js/build/three.min.js"></script>
<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, mouseDown = false;

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);
    
    document.getElementById('canvas3d').addEventListener("mousedown", getPosition, false);
    document.getElementById('canvas3d').addEventListener("mouseup", function(event) { mouseDown = false; }, false);
    document.getElementById('canvas3d').addEventListener('mousemove', function(event) {
        var rect = this.getBoundingClientRect();
        mouseX = event.clientX - rect.left;
        mouseY = event.clientY - rect.top;
    }, false);

    //
    mouseDown = false;
    //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);
    
   ...