JSFiddle - React, Tailwind, and code Playground

by Luis Fraguada

HTML

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

JavaScript

var renderer, controls, scene, camera;

init();
animate();

function init() {
    //scene
    scene = new THREE.Scene();

    //camera
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(100, 100, 100);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    camera.visible = true;


    //controls
    controls = new THREE.OrbitControls(camera);
    controls.damping = 0.2;
    
    //lighting
    var dLight = new THREE.DirectionalLight();
    dLight.position.set(100, 100, 100);
    dLight.castShadow = true;
    dLight.shadowMapWidth = 4096;
    dLight.shadowMapHeight = 4096;
    dLight.shadowBias = 0.00001;
    dLight.visible = true;
    dLight.intensity = 0.7;

    scene.add(dLight);

    //renderer
    renderer = new THREE.WebGLRenderer({
                    alpha: true,
                    antialias: true,
                    preserveDrawingBuffer: true
                });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xffffff, 1);
    renderer.shadowMap.enabled = true;
    renderer.shadowMapSoft = true;

    //document
    document.body.appendChild(renderer.domElement);
    document.body.addEventListener('mousedown', function () {
                    flag = 0;
                }, false);
    document.body.addEventListener('mousemove', function () {
                    flag = 1;
                }, false);
    document.body.addEventListener('mouseup', function (e) {
                    if (flag === 0) {
                        console.log("click");
                        onClick(e);
                    } else if (flag === 1) {
                        console.log("drag");
                    }
                }, false);

    //geometry
    var box = new THREE.BoxGeometry(10, 10, 10, 1, 1, 1);
    var mat = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

    var mat2 = new THREE.MeshBasicMaterial({ color: 0x00ffff });

    var m1 = new THREE.Mesh(box,...