JSFiddle - React, Tailwind, and code Playground

by Mukhammet Gafarov

HTML

<script src="http://test.starfactory.international/obj/k_low.obj"></script>
<script src='http://test.starfactory.international/js/three.min.js'></script>
<script src='http://test.starfactory.international/js/loaders/STLLoader.js'></script>
<script src='http://test.starfactory.international/js/loaders/ColladaLoader.js'></script>
<script src='http://test.starfactory.international/js/loaders/OBJLoader.js'></script>
<script src='http://test.starfactory.international/js/loaders/MTLLoader.js'></script>
<script src='http://test.starfactory.international/js/loaders/OBJMTLLoader.js'></script>
<script src='http://test.starfactory.international/js/loaders/BinaryLoader.js'></script>
<script src='http://test.starfactory.international/js/threex.universalloader.js'></script>

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, material, i, h, color, sprite, size;
var mouseX = 0, mouseY = 0;
var p = [];
var vl = 10;
var vt;
var vertices = [];
var scale = 5;

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 = 90;
//camera.position.x = 40;
camera.position.y = 100;

function onWindowResize() {

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

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}
//////////////////////////////////////////////////////////////////////////////////
//		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(0.5, 0.5, 2)
	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 parent, meshes = [], clonemeshes = [];
var object3d2;
parent = new THREE.Object3D();
scene.add( parent );

var urls	= []
//var urls	= 'models/stl/ascii/pr2_head_pan.stl'
//var urls	=...