JSFiddle - React, Tailwind, and code Playground

by Meir Meshi

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://threejs.org/examples/js/renderers/Projector.js"></script>
<body>
    <div class=myDiv>
        Hello
    </div>
    <div class=renderView></div>
</body>

CSS

.myDiv {
    color: blue;    
}

.renderView  {
    position: absolute;
    left: 30px;
    top: 30px;
    
}

JavaScript

var scene, camera, renderer, controls, toScreenXY, divElem, divObj;

init();
animate();

function init()
{
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 
    camera.position.z = 200;
    
    renderer = new THREE.WebGLRenderer();
    document.getElementsByClassName("renderView")[0].appendChild(renderer.domElement);

    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.addEventListener('change', function() {
        updateDiv();        
    });
    
    var light = new THREE.DirectionalLight(0xaa2222);
	light.position.set(100,100,400);
	scene.add(light);

    var sphereGeo = new THREE.SphereGeometry( 32, 16, 16 );
    sphere = new THREE.Mesh( sphereGeo, new THREE.MeshPhongMaterial() );
	sphere.position.set(0,10,0);
	scene.add(sphere);
    
    divObj = new THREE.Object3D ;
    divObj.position.set(0, 40, 0);
    scene.add(divObj);
    
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    toScreenXY = function() {

        var vector = new THREE.Vector3();
        var projector = new THREE.Projector();
    
        // TODO: need to update this when resize window
        var widthHalf = 0.5*renderer.context.canvas.width;
        var heightHalf = 0.5*renderer.context.canvas.height;
    
        return function( obj, camera ) {
    
            obj.updateMatrixWorld();
            projector.projectVector( vector.setFromMatrixPosition( obj.matrixWorld ), camera );
    
            vector.x = ( vector.x * widthHalf ) + widthHalf;
            vector.y = - ( vector.y * heightHalf ) + heightHalf;
    
            return { 
                x: vector.x,
                y: vector.y
            };
        }
    };
    
    divElem = document.getElementsByClassName("myDiv")[0];
}

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

function update()
{
    controls.update();
}

function updateDiv()
{
   ...