JSFiddle - React, Tailwind, and code Playground

by cx20

HTML

<script src="https://cdn.jsdelivr.net/npm/babylonjs@7.30.1/babylon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babylonjs-loaders@7.30.1/babylonjs.loaders.min.js"></script>
<div id="canvasZone"><canvas id="renderCanvas"></canvas></div>

CSS

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#renderCanvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}

#canvasZone {
  width: 100%;
  height: 100%;
}

JavaScript

var canvas = document.getElementById("renderCanvas");

var startRenderLoop = function (engine, canvas) {
  engine.runRenderLoop(function () {
    if (sceneToRender && sceneToRender.activeCamera) {
      sceneToRender.render();
    }
  });
}

var engine = null;
var scene = null;
var sceneToRender = null;
var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
const BASE_URL = "https://cx20.github.io/gltf-test";

const colorNames = [
  //"BK", // black
  "WH", // white
  "BG", // beige
  "BR", // brown
  "RD", // red
  "YL", // yellow
  "GN", // green
  "WT", // water
  "BL", // blue
  "PR"  // purple
];

function getRgbColor( c )
{
  const colorHash = {
    //"BK":"#000000", // black
    "WH":"#FFFFFF", // white
    "BG":"#FFCCCC", // beige
    "BR":"#800000", // brown
    "RD":"#FF0000", // red
    "YL":"#FFFF00", // yellow
    "GN":"#00FF00", // green
    "WT":"#00FFFF", // water
    "BL":"#0000FF", // blue
    "PR":"#800080"  // purple
  };
  return colorHash[ c ];
}

const createScene = function() {
  const scene = new BABYLON.Scene(engine);

  const camera = new BABYLON.ArcRotateCamera("camera", 0, Math.PI/180 * 90, 40, BABYLON.Vector3.Zero(), scene);
  camera.setTarget(BABYLON.Vector3.Zero());
  camera.attachControl(canvas, true);

  const cubeTexture = new BABYLON.CubeTexture(BASE_URL + "/textures/env/papermillSpecularHDR.env", scene);
  const currentSkybox = scene.createDefaultSkybox(cubeTexture, true);
  const light0 = new BABYLON.HemisphericLight("light0", new BABYLON.Vector3(1, 1, 0), scene); 

  const SCALE  = 0.01;
  const WIDTH  = 20;
  const HEIGHT = 20;
  const DEPTH  = 20;

  Promise.all([
    BABYLON.SceneLoader.ImportMeshAsync(null, BASE_URL + "/sampleModels/Duck/glTF/", "Duck.gltf", scene).then(function(result) {
      const mesh = result.meshes[1];
      const positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
      const...