JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/exporters/GLTFExporter.js"></script>
<div id="container"></div>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

#container {
    width: 100px;
    height: 100px;
 
}

.balloon {
    position: absolute;
    color: white;
    background: black;
    border-radius: 100px;
    font-family: sans-serif;
    font-size: 20px;
    width: 100px;
    height: 30px;
    text-align: center;
    padding-top: 10px;
}

canvas{
    width: 10px;
    height:10px;
}
.balloon .text {
    overflow: hidden;
    white-space: nowrap;
    width: 80px;
    margin-left: 10px;
    /* fix chrome gap */
    height: 21px;
}

.balloon .arrow {
    left: 40px;
    margin-top: 9px;
    border-width: 10px 10px 0px;
    border-color: black transparent transparent;
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
}

JavaScript

//export glb


// forked from makc's "Simplify this three.js drawing exmple, r77" http://jsdo.it/makc/yT7E
// forked from makc's "Simplify this three.js drawing exmple" http://jsdo.it/makc/zXNX
    var mouse = { x: 0, y: 0, down: false };

    var scene, camera, renderer, raycaster = new THREE.Raycaster (), mesh;
    const HEIGHT_AMPLIFIER = 2
    const SIZE_AMPLIFIER = 1;
    var canvas = document.createElement ('canvas');
    canvas.setAttribute("id", "C")
    canvas.width = 256; canvas.height = 256;

    var context = canvas.getContext ('2d');
    context.rect (0, 0, canvas.width, canvas.height);
    context.fillStyle = 'black';
    context.fill ();

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

 
    scene = new THREE.Scene();
    

    camera = new THREE.PerspectiveCamera( 75, container.offsetWidth / container.offsetHeight, 1, 10000 );
    camera.position.y = -400;
    camera.position.z = 1000;
    camera.lookAt (scene.position );
    
    mesh = new THREE.Mesh(
        new THREE.PlaneBufferGeometry( 500, 500, canvas.width - 1, canvas.height - 1),
        new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide } )
    );
    scene.add( mesh );
    mesh.scale.set(2, 2, 2)

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0xccccff);
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    container.appendChild( renderer.domElement );
    
    
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enabled = false
var handler = function (e) {
    mouse.down = (e.buttons != 0);
    mouse.x = e.clientX;
    mouse.y = e.clientY;
}

document.body.addEventListener ('mousemove', handler);
document.body.addEventListener ('mousedown', handler);


function animate() {
    
    requestAnimationFrame( animate );
    
    //mesh.rotation.y = (2 * mouse.x - document.body.offsetWidth) * 1e-3;
    
    if (mouse.down) {
        var canvasRect =...