JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://mrdoob.github.io/three.js/examples/fonts/helvetiker_regular.typeface.js"></script>
<body></body>

CSS

body{
    padding: 0;
    margin: 0;
    overflow: hidden;
}

JavaScript

var renderer, scene, camera;

renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 10;
camera.rotation.y += 0.2;
scene = new THREE.Scene();

renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowCameraNear = 3;
renderer.shadowCameraFar = camera.far;
renderer.shadowCameraFov = 50;
renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.5;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;

var directionalLight = new THREE.DirectionalLight( 0x999999, 1 );
directionalLight.position.set( 0, 1, 0 );
scene.add( directionalLight );
directionalLight.castShadow = true;
var light = new THREE.AmbientLight( 0xcccccc ); // soft white light
scene.add( light );

var geometry = new THREE.TextGeometry(
    'WOO!',
    {
        size: 0.8,
        height: 0.2,
        font: 'helvetiker'
    }
);
var material = new THREE.MeshLambertMaterial( {color: 0x8c31aa} );
var textObj = new THREE.Mesh( geometry, material );
scene.add(textObj);
textObj.position.z += 3;
textObj.position.x -= 1.5;
textObj.position.y -= 0.5;
textObj.castShadow = true;
textObj.receiveShadow = true;

var textObj2 = new THREE.Mesh( geometry, material );
scene.add(textObj2);
textObj2.position.z += 3;
textObj2.position.x += 1.5;
textObj2.position.y += 0.5;
textObj2.castShadow = true;
textObj2.receiveShadow = true;

var geometry2 = new THREE.BoxGeometry( 1, 1, 1 );
var material2 = new THREE.MeshLambertMaterial( {color: 0xff8700} );
var shapeObj = new THREE.Mesh( geometry2, material2 );
scene.add(shapeObj);
shapeObj.position.z += 3;
shapeObj.position.x -= 0.5;
shapeObj.position.y -= 1.5;
shapeObj.castShadow = true;
shapeObj.receiveShadow = true;


			var render = function () {
				requestAnimationFrame( render );

                //textObj.rotation.x += 0.05;
              ...