JSFiddle - React, Tailwind, and code Playground

by paulocoelho

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="http://threejs.org/examples/js/loaders/OBJMTLLoader.js"></script>
<script src="http://threejs.org/examples/js/loaders/MTLLoader.js"></script>
<script src="https://dl.dropboxusercontent.com/u/4334059/helvetiker_regular.typeface.js"></script>

CSS

body {
    background:black;
}

JavaScript

// scroll to zoom; drag to rotate

var container, stats;
var camera, scene, renderer;
var cube, plane;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();

function init() {
    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000); // changed
    camera.position.x = 50; // changed
    camera.position.y = 50;
    camera.position.z = 50;
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene = new THREE.Scene();

    controls = new THREE.OrbitControls(camera);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = true;
    container.appendChild(renderer.domElement);

    //var ambientLight = new THREE.AmbientLight(0x000000);
    //scene.add(ambientLight);

    light = new THREE.SpotLight(0xffffff);
    light.position.set(200, 200, -200);
    light.castShadow = true;
    light.shadowMapWidth = 1024; // power of 2
    light.shadowMapHeight = 1024;

    light.shadowCameraNear = 200; // keep near and far planes as tight as possible
    light.shadowCameraFar = 500; // shadows not cast past the far plane
    light.shadowCameraFov = 20;
    light.shadowBias = -0.00022; // a parameter you can tweak if there are artifacts
    light.shadowDarkness = 0.5;

    light.shadowCameraVisible = true;
    scene.add(light);

    var geometry = new THREE.PlaneGeometry(200, 200, 30, 30);
    geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
    geometry.applyMatrix(new THREE.Matrix4().setPosition(new THREE.Vector3(0, 0, 0)));
    var material = new THREE.MeshLambertMaterial({
        color: 0xEEEEEE
    });
    plane = new THREE.Mesh(geometry, material);
    plane.receiveShadow = true;
    scene.add(plane);

    var text3d = new THREE.TextGeometry("IIIIIIIIIIIIIIII", {
        size:...