JSFiddle - React, Tailwind, and code Playground

by ebeit303

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script>
<div id = "ThreeJS" style="position: absolute; left:0px; top:0px"></div>

JavaScript

// standard global variables
var container, scene, camera, renderer, controls, stats;
var clock = new THREE.Clock();

// custom global variables
var targetList = [];
var projector, mouse = { x: 0, y: 0 };

init();
animate();

// FUNCTIONS 		
function init() 
{

	// SCENE
	scene = new THREE.Scene();
	// CAMERA
	var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
	var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 100000;
	camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
	scene.add(camera);
	camera.position.set(600,0,-1200);
	camera.lookAt(scene.position);	
	// RENDERER

		renderer = new THREE.CanvasRenderer(); 
	renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
	container = document.getElementById( 'ThreeJS' );
	container.appendChild( renderer.domElement );
	// EVENTS
	
	// CONTROLS	

	// this material causes a mesh to use colors assigned to faces
	var faceColorMaterial = new THREE.MeshBasicMaterial( 
	{ color: 0xffffff, vertexColors: THREE.FaceColors } );
	
	var sphereGeometry = new THREE.SphereGeometry( 500, 64, 64 );
	for ( var i = 0; i < sphereGeometry.faces.length; i++ ) 
	{
		face = sphereGeometry.faces[ i ];	
		face.color.setRGB( 0, 0, 0.8 * Math.random() + 0.2 );		
	}
	var sphere = new THREE.Mesh( sphereGeometry, faceColorMaterial );
    sphere.rotation.set(0, 14.5, 0);
	scene.add(sphere);
		
	//targetList.push(sphere);
	
	var j=0;

	for (var i =0; i<100;i+=5){
	//var circle = new THREE.CubeGeometry(5,5,5);
	var circle = new THREE.CircleGeometry(5, 8, 0, Math.PI * 2);
	//THREE.GeometryUtils.triangulateQuads(circle);
	var circleMaterial = new THREE.MeshBasicMaterial({color: 0xDEF2EF});
	circleMaterial.side = THREE.DoubleSide;
	
	var mesh = new THREE.Mesh(circle, circleMaterial);

    var Alon = i - 90;
    var Alat = j;
    
    var Aphi = Math.PI/2 - Alat * Math.PI / 180;
    var Atheta = 2 * Math.PI - Alon * Math.PI / 180;
	
    mesh.position.x = Math.sin(Aphi) * Math.cos(Atheta) * (501);
...