JSFiddle - React, Tailwind, and code Playground

by Mukhammet Gafarov

HTML

<script src='http://test3.starfactory.international/js/loaders/STLLoader.js'></script>
<script src='http://test3.starfactory.international/js/loaders/ColladaLoader.js'></script>
<script src='http://test3.starfactory.international/js/loaders/OBJLoader.js'></script>
<script src='http://test3.starfactory.international/js/loaders/MTLLoader.js'></script>
<script src='http://test3.starfactory.international/js/loaders/OBJMTLLoader.js'></script>
<script src='http://test3.starfactory.international/js/loaders/BinaryLoader.js'></script>
<script src='http://test3.starfactory.international/js/threex.universalloader.js'></script>
<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.001;

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, 1000);
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 );

};

//////////////////////////////////////////////////////////////////////////////////
//		set 3 point lighting						//
//////////////////////////////////////////////////////////////////////////////////

;(function(){
	// add a ambient light
	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 )		
})()



//////////////////////////////////////////////////////////////////////////////////
//		Comment								//
//////////////////////////////////////////////////////////////////////////////////

var urls	= []
//var urls	=...