JSFiddle - React, Tailwind, and code Playground

by Mukhammet Gafarov

HTML

<script src='http://test3.starfactory.international/js/three.min.js'></script>
<script src='http://test3.starfactory.international/js/OrbitControls.js'></script>
<footer>
	<a class="sel bm navi" id="home"><div id="home2" class='yellow'></div><span class='bmt'>Home</span></a>
	<a class="bm navi" id="info"><div id="info2" class='yellow'></div><span class='bmt'>About us</span></a>
	<a class="bm navi" id="projects"><div id="projects2" class='yellow'></div><span class='bmt'>Projects</span></a>
	<a class="bm navi" id="team"><div id="team2" class='yellow'></div><span class='bmt'>Team</span></a>
	<a class="bm navi" id="news"><div id="news2" class='yellow'></div><span class='bmt'>News</span></a>
	<a class="bm navi" id="press"><div id="press2" class='yellow'></div><span class='bmt'>Press</span></a>
	<a class="bm navi" id="contacts"><div id="contacts2" class='yellow'></div><span class='bmt'>Contacts</span></a>
</footer>

JavaScript

var renderer	= new THREE.WebGLRenderer({
	antialias	: true
});
renderer.setClearColor( 0x070912 );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var container, stats;
var camera, scene, renderer, particles, geometry, geometry2, material, i, h, color, sprite, size;
var mouseX = 0, mouseY = 0;
var p = [];
var vl = 10;
var vt;
var vertices = [];
var vertices2 = [];
var vertices_tmp = [];
var animVertices = [];
var geom = [];
var delta = 0;
var newpoint = 60;
var cubev = [];
var cvl;
var vel =[];
var j = 0;
var kx = [],ky = [], kz = [];
var dt = 10000;


var n = 100;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var onRenderFcts= [];
var scene	= new THREE.Scene();
//scene.fog = new THREE.FogExp2( 0x000000, 0.01 );
var camera	= new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 2, 10000);
camera.position.z = 140;
//camera.position.x = 40;
camera.position.y = 30;

window.addEventListener( 'resize', function() {
	var w = window.innerWidth,
		h = window.innerHeight;

	camera.aspect = w / h;
	camera.updateProjectionMatrix();

	renderer.setSize( w, h );
}, false );

THREE.DefaultLoadingManager.onProgress = function ( item, loaded, total ) {

	console.log( item, loaded, total );

};


	var light	= new THREE.AmbientLight( 0xffffff )
	scene.add( light )
	// add a light in front
	var light	= new THREE.DirectionalLight('white', 1)
	light.position.set(-50, 50, 50)
	scene.add( light )
	// add a light behind
	var light	= new THREE.DirectionalLight('white', 0.75)
	light.position.set(-0.5, -0.5, -2)
	scene.add( light )		


	var pgeom = new THREE.SphereGeometry (60,30,30);
	var pmat = new THREE.PointCloudMaterial( { size: 4, sizeAttenuation: false, alphaTest: 0.5, transparent: true } );
	pmat.color.setHSL( 0.57, 1, 0.7 );
	var pmesh = new THREE.PointCloud( pgeom, pmat );
	scene.add(pmesh);

	

	var pgeom2 = new THREE.SphereGeometry (60,30,30);
	var pmat2 = new...