JSFiddle - React, Tailwind, and code Playground

by majman

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.min.js"></script>
    <div id="three"></div>
    <div id="buttons">
        <div id="show-sides" class="button">showOneSide: false</div>
        <div id="face-index" class="log disabled">faceIndex: </div>
    </div>

CSS

body {
            font-family: sans-serif;
            font-size: 12px;
        }
        #buttons {
            position: absolute;
            top: 10px;
            left: 10px;
            background: #fff;
        }
        .button {
            background: #eee;
            padding: 3px 5px;
            margin: 5px;
            cursor: pointer;
            display: inline-block;
            border: 1px solid #aaa;
        }
        .log {
            padding: 3px 5px;
            margin: 5px;
            display: inline-block;
        }
        .disabled {
            color: #ccc;
        }

JavaScript

var camera, scene, renderer, geometry;

        var cubeGeometry;
        var mesh;
        var rotateAngle = 0;
        var cameraQuaternion;
        var cubeQuaternion;
        var cubeVector;
        var cameraVector;
        var rafID;
        var showOneSide = false;

        var faces = [
            "1x0x0",
            "-1x0x0",
            "0x1x0",
            "0x-1x0",
            "0x0x-1",
            "0x0x1"
        ];
        var transparentMaterial = new THREE.MeshBasicMaterial({color:0x99d9ea, transparent: true, opacity: 0.5, side: THREE.DoubleSide})

        $('#show-sides').on('click', function(){
            showOneSide = !showOneSide;
            $(this).text('showOneSide: ' + showOneSide);
            if(!showOneSide){
                $('#face-index').addClass('disabled').text('faceIndex:')
            }else {
                $('#face-index').removeClass('disabled')
            }
        });

        function incrementAngle(){
            rotateAngle += 90 * Math.PI/180;
            animate();
        }
        $('body').on('click', function(){
            incrementAngle();
        })

        init();


        function init() {

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 2, 5000);
            camera.eulerOrder = "YXZ";
            camera.position.set(0, 0, 0);
            scene.add(camera);

            cubeGeometry = new THREE.CubeGeometry(10, 5, 10);
            var cubeGeometryMaterials = [
                new THREE.MeshBasicMaterial({color:0xff0000, transparent: true, opacity: 0.75, side: THREE.DoubleSide}),
                new THREE.MeshBasicMaterial({color:0x00ff00, transparent: true, opacity: 0.75, side: THREE.DoubleSide}),
                new THREE.MeshBasicMaterial({color:0xffffff, transparent: true, opacity: 0.75, side: THREE.DoubleSide}),
                new THREE.MeshBasicMaterial({color:0x000000, transparent: true, opacity: 0.75, side:...