JSFiddle - React, Tailwind, and code Playground

by patrick47

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/4.2.0/babylon.js"></script>
<canvas id="preview"></canvas>

CSS

html,
body,
canvas {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: lime;
}

JavaScript

function main(usingViews) {
  const preview = document.getElementById("preview");

  let engine;
  if (usingViews) engine = new BABYLON.Engine(document.createElement("canvas"), true);
  else engine = new BABYLON.Engine(preview, true);

  const scene = new BABYLON.Scene(engine);
  scene.clearColor = new BABYLON.Color4(0.6, 0.6, 0.6, 0);
  const camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, -10), scene);
  const light = new BABYLON.PointLight("light", new BABYLON.Vector3(10, 10, 0), scene);
  const box = new BABYLON.Mesh.CreateBox("box", 3, scene);
  box.material = new BABYLON.StandardMaterial("material", scene);

  if (usingViews) engine.registerView(preview);

  engine.runRenderLoop(() => {
    box.rotation.x += 0.05;
    box.rotation.y += 0.01;
    scene.render();
  });
}

// this works:
/* main(false) */

// this doesn't
main(true)