JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<div id="box"></div>

CSS

canvas { width: 100%; height: 100% }body{padding:0;margin:0;border:0;}#box{position:absolute;top:0;left:0;}

JavaScript

THREE.PerspectiveCamera.prototype.setRotateX = function( deg ){
            if ( typeof( deg ) == 'number' && parseInt( deg ) == deg ){
                this.rotation.x = deg * ( Math.PI / 180 );
            }
        };
        THREE.PerspectiveCamera.prototype.setRotateY = function( deg ){
            if ( typeof( deg ) == 'number' && parseInt( deg ) == deg ){
                this.rotation.y = deg * ( Math.PI / 180 );
            }
        };
        THREE.PerspectiveCamera.prototype.setRotateZ = function( deg ){
            if ( typeof( deg ) == 'number' && parseInt( deg ) == deg ){
                this.rotation.z = deg * ( Math.PI / 180 );
            }
        };
        THREE.PerspectiveCamera.prototype.getRotateX = function(){
            return Math.round( this.rotation.x * ( 180 / Math.PI ) );
        };
        THREE.PerspectiveCamera.prototype.getRotateY = function(){
            return Math.round( this.rotation.y * ( 180 / Math.PI ) );
        };
        THREE.PerspectiveCamera.prototype.getRotateZ = function(){
            return Math.round( this.rotation.z * ( 180 / Math.PI ) );
        };
        
        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
        
        function toBox( x, y, z )
        {
            document.getElementById('box').innerHTML = 'X: ' + x + '<br />Y: ' + y + '<br />Z: ' + z;
        }

var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        //var renderer = new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        
        camera.position.z = 0;
        
        var geometry = new THREE.CubeGeometry(1,1,1);
        var material1 = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
        var material2 = new...