JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://three.thiele-medien.de/threejs-r71/examples/shared/js/ThreeCSG.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var image;

init();
animate();

function init() {

	info = document.createElement( 'div' );


   renderer = new THREE.WebGLRenderer({
     antialias: true
   });
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	scene = new THREE.Scene();
  scene.background = new THREE.Color( 0xffffff );
	
	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.set( 0, 0, 150 );
  scene.add( camera ); 

	controls = new THREE.OrbitControls( camera, renderer.domElement );
	controls.minDistance = 5;
	controls.maxDistance = 200;
  controls.enablePan = false;

	scene.add( new THREE.AmbientLight( 0xffffff, 0.8 ) );
	
	var light = new THREE.PointLight( 0xffffff, 0.5 );
	camera.add( light );

  image = document.createElement( 'img' );
  document.body.appendChild( image );




  var texture = new THREE.Texture( image );
  image.addEventListener( 'load', function ( event ) { 
    texture.needsUpdate = true; 
    texture.shading = THREE.FlatShading;
  } );


	var material = new THREE.MeshPhongMaterial( {
		color: 0xffffff, 
		specular: 0x050505,
		shininess: 0,
		map: texture
	} );
  


var left = new THREE.BoxGeometry( 50,50,10,0,0,0 );
var left_bsp = new ThreeBSP(left);

var cylinder = new THREE.BoxGeometry (10,50,10,5);
cylinder.translate (30,0,0);
var cylinder_bsp = new ThreeBSP(cylinder);

var total = left_bsp.union(cylinder_bsp);

var result = total.toMesh();

var geometry = new THREE.BufferGeometry().fromGeometry( result.geometry );
recomputeUVs( geometry );

var r2= new THREE.Mesh( geometry, material);

scene.add( r2 );

}

function recomputeUVs( geometry ) {

	var uvs = [];
  
  geometry.computeBoundingBox();
  
  var min = geometry.boundingBox.min;
  var max = geometry.boundingBox.max;
  
  console.log( min, max );
  
  var position = geometry.getAttribute( 'position' );
  
  var a = new THREE.Vector3();
  var b = new THREE.Vector3();
 ...