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>
<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, 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() {
        console.log('change');        
        //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);
    
    //divElem = document.getElementsByClassName("myDiv")[0];
}

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

function update()
{
    //console.log('update');
    debugger;
    controls.update();
};

/*function toScreenXY(obj, camera) 
{
    
    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;
    
    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
    };

};*/

function updateDiv()
{
    divElem.innerHTML = 'meir';
/*    debugger;
    
   ...