JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/FlyControls.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

const v1 = new THREE.Vector3();
const v2 = new THREE.Vector3();

class LOD extends THREE.LOD {

	constructor() {
	
		super();
		
		this.threshold = 1;
	
	}

	update() {
	
		const levels = this.levels;
		
		if ( levels.length > 1 ) {
		
			v1.setFromMatrixPosition( camera.matrixWorld );
			v2.setFromMatrixPosition( this.matrixWorld );
			
			var distance = v1.distanceTo( v2 );
			
			levels[ 0 ].object.visible = true;
			levels[ 0 ].object.material.transparent = false;
			levels[ 0 ].object.material.opacity = 1;
			
			let i, l;
			
			for ( i = 1, l = levels.length; i < l; i ++ ) {
			
				const currentObject = levels[ i ];
				const previousObject = levels[ i - 1 ];
				
				if ( distance < currentObject.distance && distance >= ( currentObject.distance - this.threshold ) ) {
			
					const edge = currentObject.distance - this.threshold;
					const opacity = Math.min( ( distance - edge ) / this.threshold, 1 );
				
					currentObject.object.visible = true;
					currentObject.object.material.transparent = true;
					currentObject.object.material.opacity = opacity;
					
					previousObject.object.material.transparent = false;
					previousObject.object.material.opacity = 1;
				
				} else if ( distance >= currentObject.distance && distance < ( currentObject.distance + this.threshold ) ) {
				
					const edge = currentObject.distance + this.threshold;
					const opacity = Math.max( ( edge - distance ) / this.threshold, 0 );
					
					currentObject.object.material.opacity = 1;
					currentObject.object.material.transparent = false;

					previousObject.object.material.transparent = true;
					previousObject.object.material.opacity = opacity;
				
				} else if ( distance >= currentObject.distance + this.threshold ) {
				
					currentObject.object.visible = true;
					previousObject.object.visible = false;
				
				} else {
				
					break;
					
				}
			
			}
			
			// hide all subsequent levels
			
			for ( ; i < l; i++ ) {
			
					levels[ i ].object.visible...