JSFiddle - React, Tailwind, and code Playground

by shravanimmy

HTML

<script type="text/javascript" src="http://mrdoob.github.io/three.js/build/three.min.js"></script> <!--release 62-->

JavaScript

var SCREEN_WIDTH = 400,
    SCREEN_HEIGHT = 300,
    VIEW_ANGLE = 45,
    ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,
    NEAR = 0.1,
    FAR = 20000,
    webGLScene = new THREE.Scene(),
    canvasScene = new THREE.Scene(),
    webGLCamera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR),
    canvasCamera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR),
    webGLRenderer = new THREE.WebGLRenderer({ antialias: true }),
    canvasRenderer = new THREE.CanvasRenderer();

webGLScene.add(webGLCamera);
canvasScene.add(canvasCamera);

webGLCamera.position.set(0, 0, 20);
webGLCamera.lookAt(webGLScene.position);

canvasCamera.position.set(0, 0, 20);
canvasCamera.lookAt(canvasScene.position);

webGLRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
canvasRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

container = document.body;
container.appendChild(webGLRenderer.domElement);
container.appendChild(canvasRenderer.domElement);

webGLRenderer.domElement.style.border = "1px solid red";
canvasRenderer.domElement.style.border = "1px solid red";

makeSprite(webGLScene, "webgl");
makeSprite(canvasScene, "2d");

function makeSprite(scene, rendererType) {
    var canvas = document.createElement('canvas'),
        context = canvas.getContext('2d'),
        metrics = null,
        textHeight = 100,
        textWidth = 0,
        actualFontSize = 2;

    context.font = "normal " + textHeight + "px Arial";
    metrics = context.measureText("Sample Text in " + rendererType);
    var textWidth = metrics.width;

    canvas.width = textWidth;
    canvas.height = textHeight;
    context.font = "normal " + textHeight + "px Arial";
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillStyle = "#ff0000";
    context.fillText("Sample Text in " + rendererType, textWidth / 2, textHeight / 2);

    var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;

    var material = new THREE.SpriteMaterial({ map: texture, useScreenCoordinates:...