JSFiddle - React, Tailwind, and code Playground

by paulocoelho

HTML

<script src="https://dl.dropboxusercontent.com/u/4334059/helvetiker_regular.typeface.js"></script>
<script src="http://threejs.org/build/three.min.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="https://dl.dropboxusercontent.com/u/4334059/helvetiker_regular.typeface.js"></script>

CSS

body {
    background:black;
}

JavaScript

var container, stats;
var camera, scene, renderer;
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(90, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.x = 50;
    camera.position.y = 50;
    camera.position.z = 50;
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene = new THREE.Scene();

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

    light = new THREE.SpotLight();
    light.position.set(300, 300, 300);
    scene.add(light);

    var text3d = new THREE.TextGeometry(name, {
        size: 6.2,
        height: .5,
        curveSegments: 3,
        font: "helvetiker"
    });
    
    var textMaterial = new THREE.MeshLambertMaterial({
        color: 0xFFFFFF
    });
    text = new THREE.Mesh( text3d, textMaterial );
    text.position.x = 0 ;
	text.position.z = 0;
	text.position.y = 0;
    
    animate();
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    renderer.render(scene, camera);
}