JSFiddle - React, Tailwind, and code Playground

by Javier Cruz

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>
<body>
    <div class="myDiv">
        TEST!
    </div>
</body>

CSS

.myDiv {
    color: green;
    position: absolute;
}

JavaScript

var scene, renderer, camera, control;
var divElem, divObj;

init();
animate();
var sphereMesh;
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();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    
    control = new THREE.OrbitControls(camera, renderer.domElement);
    control.addEventListener('change', function() {
        onCameraChange();
    });
    
    var sphereGeo = new THREE.SphereGeometry();
    
    sphereMesh = new THREE.Mesh(sphereGeo);
    sphereMesh.position.x = -100;
    sphereMesh.position.z = -100;
    scene.add(sphereMesh);
        

    divElem = document.getElementsByClassName('myDiv')[0];
    divObj = new THREE.Object3D();
    divObj.position = sphereGeo.vertices[0].clone();
    scene.add(divObj);
    
      
}
function createVector(x, y, z, camera, width, height) {
        var p = new THREE.Vector3(x, y, z);
        var vector = p.project(camera);

        vector.x = (vector.x + 1) / 2 * width;
        vector.y = -(vector.y - 1) / 2 * height;
		
        return vector;
    }
function animate()
{
   
    
    requestAnimationFrame( animate );
    update();
    render();
}

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

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

function onCameraChange()
{
    var width = renderer.context.canvas.width;
    var height = renderer.context.canvas.height; 
    var vect = createVector (sphereMesh.position.x,sphereMesh.position.y,sphereMesh.position.z, camera, width,height);
    console.log('vector: ',vect);
        divElem.style.left = vect.x + 'px';
    divElem.style.top = vect.y + 'px';
}