JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://unpkg.com/[email protected]/dist/earcut.min.js"></script>
<canvas id="renderCanvas" touch-action="none"></canvas>

CSS

html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }

JavaScript

var MESHBUILDER = function(options, scene, callback){


	
	if(!options){
		
		throw "MESHBUILDER CLASS requires an options object as first parameter";
		
	}
	
	if(!scene){
		
		throw "MESHBUILDER CLASS requires a scene object as second parameter";
		
	}
	
	// default settings
	
	if(!options.tessellation){
		
		options.tessellation = 24; // double this value
		
	}
  
  if(!options.coverColor){
		
		options.coverColor = new BABYLON.Color4(1,1,1,0.1); // double this value
		
	}
  
  if(!options.accents){
		
		options.accents = true;
		
	}
  
  if(!options.endAccentsColor){
		
		options.endAccentsColor = new BABYLON.Color4(1,0,0,1); // double this value
		
	}
	
	if(!options.len){
		
		options.len = 18.288; // in meters = 60 feet for default
		
	}
	
	if(!options.segmentLength){
		
		options.segmentLength = 1.8288; // in meters = 6 feet for default 24 foot width and 30 foot wide will change to 5 feet or 1.524M for 36 foot width
		
	}
  
  if(!options.segments){
		
		options.segments = parseInt(options.len/options.segmentLength);
		
	}
	
	if(!options.width){
		
		options.width = 7.3152/2; // in meters = 24 feet for default
		
	}
	
	if(!options.lap){
		
		options.lap = 0.4; // in meters
		
	}
	
	if(!options.overlap){
		
		options.overlap = 0.1; // in meters
		
	}
	
	if(!options.rungWidth){
		
		options.rungWidth = 0.08; // in meters
		
	}
	
	if(!options.rungLap){
		
		options.rungLap = 0.01; // in meters each side of rung
		
	}
	
	if(!options.rungSag){
		
		options.rungSag = 0.005; // in meters
		
	}
	
	if(!options.material){
		
		if(scene.getMaterialByName('wallMaterial')){
			
			options.material = scene.getMaterialByName('wallMaterial');
			
		} else {
			
			options.material = new BABYLON.StandardMaterial("wallMaterial", scene);
			options.material.alpha = 1;
			options.material.diffuseColor = new BABYLON.Color3(0.9803921568627451,0.9803921568627451,0.9803921568627451);
			options.material.specularColor = new BABYLON.Color3(0,0,0);
			options.material.emissiveColor =...