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>
<canvas width="512" height="512" id="cover"></canvas>
CSS
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
#cover{
position:absolute;
top:0px;
right:0px;
z-index:9999;
pointer-events:none;
transform:scale(0.3);
}
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";
}
if(typeof(options.coverCanvas) == 'undefined'){
console.log("Canvas element required!");
return;
}
options.ctx = options.coverCanvas.getContext("2d");
if(typeof(options.canvasSize) == 'undefined'){
options.canvasSize = 512;
}
// default settings
if(!options.tessellation){
options.tessellation = 40; // double this value
}
if(!options.coverColor){
options.coverColor = '#ffffff'; // double this value
}
if(typeof(options.accents) == 'undefined'){
options.accents = true;
}
if(!options.endAccentsColor){
options.endAccentsColor = '#ff0000'; // double this value
}
if(!options.centerAccentsColor){
options.centerAccentsColor = '#ffff00'; // double this value
}
if(!options.len){
options.len = 21.9456;//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.endAccentsLength){
options.endAccentsLength = options.segmentLength; // double this value
}
if(typeof(options.centerAccents) == 'undefined'){
options.centerAccents = true;
}
if(!options.centerAccentsLength){
options.centerAccentsLength = options.segmentLength; // double this value
}
if(!options.numberCenterAccents){
options.numberCenterAccents = 3; // double this value
}
if(!options.width){
options.width = 7.3152; // in meters = 24 feet for default
}
if(!options.lap){
options.lap = 0.4; //...