JSFiddle - React, Tailwind, and code Playground

by gerdonabbink

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

JavaScript

var camera, scene, renderer;
var geometry, material;
var mesh, mesh2;

init();
animate();

function init() {
    camera = new THREE.OrthographicCamera( window.innerWidth/-2, window.innerWidth/2, window.innerHeight/2, window.innerHeight/-2, 1, 1000 );
    camera.position.z = 400;
    camera.position.x = 400;                
    camera.position.y = 400;
    camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );

    scene = new THREE.Scene();

    material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } );
    geometry = new THREE.BoxGeometry( 200, 200, 200 );
    geometry.faces[ 0 ].color.setHex( 0xff0000 );
    geometry.faces[ 1 ].color.setHex( 0xff0000 );
    geometry.faces[ 2 ].color.setHex( 0xff0000 );
    geometry.faces[ 3 ].color.setHex( 0xff0000 );
    geometry.faces[ 4 ].color.setHex( 0x00ff00 );
    geometry.faces[ 5 ].color.setHex( 0x00ff00 );
    geometry.faces[ 6 ].color.setHex( 0x00ff00 );
    geometry.faces[ 7 ].color.setHex( 0x00ff00 );
    geometry.faces[ 8 ].color.setHex( 0x0000ff );
    geometry.faces[ 9 ].color.setHex( 0x0000ff );
    geometry.faces[ 10 ].color.setHex( 0x0000ff );
    geometry.faces[ 11 ].color.setHex( 0x0000ff );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    //The X axis is red. The Y axis is green. The Z axis is blue.
    var axesHelper = new THREE.AxesHelper( 1000 );
    scene.add( axesHelper );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene,...