JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
// Simple three.js example
var mesh, renderer, scene, camera, controls;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set( 0, 0, 30000 );
// controls
controls = new THREE.OrbitControls( camera );
// axes
scene.add( new THREE.AxisHelper( 1000 ) );
// geometry
var geometry = new THREE.SphereGeometry( 5, 12, 8 );
// material
var FAR = 100000; // changed - was 10000
var points = []
points.push( new THREE.Vector2( +FAR,+FAR ));
points.push( new THREE.Vector2( +FAR,-FAR ));
points.push( new THREE.Vector2( -FAR,-FAR ));
points.push( new THREE.Vector2( -FAR,+FAR ));
points.push( new THREE.Vector2( +FAR,+FAR ));
var shape = new THREE.Shape( points );
points = [];
var ts0 = 0;// (lastLoadEx-lastLoadx)(tileDistMax+0)
var ts1 = 0;// (lastLoadz-lastLoadEz)(tileDistMax+1)
ts0 = 744.31; //.3099999999//.3162744867122
ts1 = 992.4; //.4078465743082//.4078465743082
points.push( new THREE.Vector2( -ts0,+ts0 ));
points.push( new THREE.Vector2( -ts0,-ts1 ));
points.push( new THREE.Vector2( +ts1,-ts1 ));
points.push( new THREE.Vector2( +ts1,+ts0 ));
points.push( new THREE.Vector2( -ts0,+ts0 ));
shape.holes.push(new THREE.Shape( points ));
var geometry = new THREE.ShapeGeometry(shape);
var mate = new THREE.MeshBasicMaterial( {color: 0x00ff00, side: THREE.DoubleSide} );
var lowBox = new THREE.Mesh(geometry,mate);
scene.add( lowBox );
//var l = geometry.faces.length;
//console.log(l);
//if(l!=8) alert(l);
}
function animate() {
requestAnimationFrame( animate );
...