JSFiddle - React, Tailwind, and code Playground

by Lore ZZ

HTML

<script src="https://github.com/mrdoob/three.js/raw/master/build/Three.js"></script>
<script src="https://github.com/mrdoob/three.js/raw/master/examples/js/RequestAnimationFrame.js"></script>

CSS

body {
    font-family: Monospace;
    background-color: #fff;
    margin: 0px;
    overflow: hidden;
}

JavaScript

/*
Theo Armour 2011-03-25

>> Move mouse over the Results window.

How to make the text face the right way?
How to stop the text from rotating?

*/

var container;

var camera, scene, renderer;

var mouseX = 0,
    mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

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

    camera = new THREE.Camera(40, window.innerWidth / window.innerHeight, 1, 2000);
    camera.position.y = 0;
    camera.position.z = 500;
    camera.target.position.x = 0;
    camera.target.position.y = 50;
    camera.target.position.z = 0;

    scene = new THREE.Scene();

    var object, material;

    object = new THREE.Mesh(new Plane(1000, 1000, 50, 50), new THREE.MeshBasicMaterial({
        color: 0x666666,
        opacity: 0.5,
        wireframe: true
    }))
    object.position = {
        x: 0,
        y: -25,
        z: 0
    };
    object.rotation = {
        x: 1.57,
        y: 0,
        z: 0
    };

    scene.addObject(object);


    var x = document.createElement("canvas");
    var xc = x.getContext("2d");
    x.width = 50;
    x.height = 50;
    
    //trying to set transparent background
    xc.fillStyle = "rgba(122,122,122,0.5)";
    xc.fillRect(0,0,50,50);
    
    xc.fillStyle = "rgb(0,0,0)";
    xc.fillRect(10,10,30,30);
  /*  
    xc.fillStyle = "#ffaa00";
    xc.font = "100pt arial bold";
    xc.textBaseline = "top";
    xc.fillText("Test", 10, 0);
*/
    var xm = new THREE.MeshBasicMaterial({
        map: new THREE.Texture(x)
    });
    xm.map.needsUpdate = true;

    var mesh = new THREE.Mesh(new Plane(50, 50), xm);
    mesh.position.x = 0;
    mesh.position.y = 0;
    mesh.position.z = 0;

    mesh.doubleSided = true;
    mesh.updateMatrix();
    scene.addObject(mesh);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.sortObjects =...