JSFiddle - React, Tailwind, and code Playground

by denis_miroshnikov_ts

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script>
<!--script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script-->
<div id="host"></div>

CSS

html * {
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
}

#host {
  width: 100%;
  height: 100%;
}

JavaScript

//var geometry = new THREE.BoxGeometry( 50,50, 50, 20, 20, 20 );
var starsGeometry = new THREE.Geometry();
//var loadedGeometry = new THREE.Geometry();
var loadedGeometry = new THREE.BufferGeometry();
var freeParticlesArr = [];
var mouseX = 0, mouseY = 0;
var clock = new THREE.Clock();

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var FOV = 95;
var NEAR = 1;
var FAR = 9000;
var loadedMesh;

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

//renderer.setSize(WIDTH, HEIGHT);

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";

document.getElementById('host').appendChild(renderer.domElement);

var stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0';
document.body.appendChild(stats.domElement);


var camera = new THREE.PerspectiveCamera(FOV, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR);

camera.position.z = 850;
camera.position.x = 550;
camera.position.y = 550;
//camera.target.z = 500;
//camera.target.x = 0;
//camera.target.y = 0;

var trackballControl = new THREE.TrackballControls(camera, renderer.domElement);
trackballControl.rotateSpeed = 6.0; // need to speed it up a little

var scene = new THREE.Scene();
//scene.fog = new THREE.FogExp2( 0x000000, 0.0025 );

var light = new THREE.PointLight(0xffffff, 10, Infinity);
camera.add(light);

scene.add(light);

var starsMaterial = new THREE.PointsMaterial( { size: 1, color: 0xffffff } );

// model
var loader = new THREE.STLLoader();
//loader.crossOrigin = 'use-credentials';
//loader.setCrossOrigin( 'anonymous' );
//loader.crossOrigin = 'use-credentials';
//loader.crossOrigin = '';
loader.crossOrigin = 'anonymous';

//var materialX = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );

loader.load(...