JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
<div id="webgl"></div>

CSS

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#webgl {
    height: 100%;
    background: black;
}

JavaScript

$(function () {
    var container = document.getElementById('webgl');
    var w = container.offsetWidth;
    var h = container.offsetHeight;

    var scene, camera, renderer, controls;
    
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(30, w / h, 1, 20000);
    camera.position.z = 1400;
    scene.add(camera);

    scene.add(new THREE.AmbientLight(0x999999));

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(w, h);
    container.appendChild(renderer.domElement);

    controls = new THREE.TrackballControls(camera);

    var globe = new THREE.Mesh(
    new THREE.SphereGeometry(200, 40, 40),
    new THREE.MeshBasicMaterial({
        color: 'red',
        //wireframe: true
    }));
    globe.doubleSided = false;
    globe.rotation.y = Math.PI;
    scene.add(globe);

    // RENDER THE POINTS
    var pointGroup = new THREE.Object3D();
    var mesh;
    points.forEach(function (point) {
        mesh = new THREE.Mesh(
            new THREE.CubeGeometry(4, 4, 4),
            new THREE.MeshBasicMaterial({
                color: 'blue'
            })
        );
        mesh.position = point;
        mesh.lookAt(globe.position);
        pointGroup.add(mesh);
    });
    scene.add(pointGroup);
    
    // CHECK IF THE POINT IS ON THE FRONT HALF OF THE SPHERE/GLOBE - IF IT IS VISIBLE TO THE CAMERA/EYE OF THE PLAYER ...
    // http://stackoverflow.com/a/19279655/1230358
    // http://stackoverflow.com/q/14115733/1230358
    var raycaster = new THREE.Raycaster();
    var origin = camera.position, direction, intersects, rayGeometry = new THREE.Geometry(), g;
    pointGroup.children.forEach(function(pointMesh) {
        direction = pointMesh.position.clone();
        // I THINK THIS CALCULATION MIGHT BE WRONG - BUT DON'T KNOW HOW TO CORRECT IT
        raycaster.set(origin, direction.sub(origin).normalize());
        // if the pointMesh's position is on the back half of the globe, the ray should intersect with...