JSFiddle - React, Tailwind, and code Playground

by A A

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://threejs.org/examples/js/renderers/Projector.js"></script>

<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}
img {
	width: 128px;
	height: 128px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}

JavaScript

var container, scene, camera, renderer, controls;
var projector, INTERSECTED;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var ico;
var mousePressed = false;
var activeCell = false;
var syncframe = 0;

init();
animate();
		
function init() 
{

	scene = new THREE.Scene();

	var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
	var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
    var MAG_ANGLE = 30;
	camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
	scene.add(camera);
	camera.position.set(0,50,150);
	camera.lookAt(scene.position);
    
    renderer = new THREE.WebGLRenderer( {antialias:true} );
	renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
	container = document.getElementById( 'ThreeJS' );
	container.appendChild( renderer.domElement );
    
    controls = new THREE.OrbitControls( camera, renderer.domElement );

	var light = new THREE.PointLight(0xffffff);
	light.position.set(0,250,0);
	scene.add(light);

    THREE.ImageUtils.crossOrigin = '';  
    
    var icoG = new THREE.IcosahedronGeometry(50,0);
    ico = new THREE.Mesh(icoG, new THREE.MeshBasicMaterial({wireframe: true}));
    ico.renderOrder = 1;

    for (var i in ico.geometry.vertices) {

       vs = new THREE.Mesh(new THREE.SphereGeometry(1.2), new THREE.MeshBasicMaterial({color: 0xFF1111}) );
        
       vs.position.copy(ico.geometry.vertices[i]);

       vs.userData.verticeIndex = i;
       vs.userData.behav = 'cell';
       ico.add(vs);        

       var icoVG = new THREE.SphereGeometry(2);
       var s = new THREE.Mesh(icoVG, new THREE.MeshBasicMaterial({color: 0xFF1111}) );
        
       s.material.color.setHex(0x00AA1FF);
       s.material.transparent = true;
       s.material.opacity = 0.1;
       s.material.wireframe = true;
       s.scale.set(3,3,3);
       s.userData.verticeIndex = i;
       s.userData.behav = 'wireframe';        
       s.position.copy(ico.geometry.vertices[i]);   ...