JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/js/uikit.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
<button class="uk-button uk-button-primary uk-button-large" data-uk-modal="{target: '#modal', bgclose: false, center: true}">Open Modal</button>
<div id="modal" class="uk-modal">
  <div class="uk-modal-dialog uk-modal-dialog-large">
    <a class="uk-modal-close uk-close"></a>
    <form class="uk-form">
      <div class="uk-grid">
        <div class="uk-width-1-1">
          <div id="dialog-canvas" class="uk-panel uk-panel-box dialog-canvas">
            <!-- 3d goes here -->
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

<div id="canvas2" class="uk-panel uk-panel-box dialog-canvas">
  <!-- 3d goes here -->
</div>

CSS

#dialog-canvas,
#canvas2 {
  width: 50%;
  height: 50%;
}

JavaScript

// utils
var utils = {};

/**
 * calculate how many mm the value in feet is eqivalent to
 */
utils.feetToMm = function(feet) {
  return Number((feet * 0.3048).toFixed(3)) * 1000;
};

// turn mm into m
utils.mmToM = function(mm) {
  return mm / 1000;
};

/////////////////////////////////////////////////////////////////////////////////////

var data = {
  foundation: "20",
  assignment: "B", // assignmentType

  overlength_front: 0,
  overlength_back: 0,

  corner_width: 2438,
  max_width: 2438,

  footpoint_systems: [{
    top: true,
    bottom: true,
    size: 6096,
    offset: 0
  }],

  uncollapsed_height: 2591,
  collapsed_height: 0,
  platform_height: 0,
  max_height: 0,
  step_height: 0
};

var reduced = true;
var size = {
  width: window.innerWidth / 2,
  height: window.innerHeight / 2
};

var controlsMap = {};

///////////////////////////////////////////////////////////////////////////////////////////////

function three(data, canvas, reduced, size) {
  var self = this;
  var scene, camera, controls, renderer, geometry, material, container, hemiLight, dirLight;
  var arrowHelperLength, arrowHelperWidth, arrowHelperHeight;
  var animationId;

  var loa = (utils.feetToMm(parseInt(data.foundation)) + parseInt(data.overlength_front) + parseInt(data.overlength_back)) / 1000;

  var options = {
    showDimensions: true,
    showFootpointSystems: true
  };

  var gui;
  var fpsArr = [];

  function init() {
    // gui
    if (!reduced) {
      gui = new dat.GUI();
      var showDimensionsController = gui.add(options, "showDimensions");
      var showFpsController = gui.add(options, "showFootpointSystems");
      $("#legend-length").text(loa * 1000 + "mm");
      $("#legend-width").text(data.corner_width + "mm");
      $("#legend-height").text(data.uncollapsed_height + "mm");

      showDimensionsController.onFinishChange(function(value) {
        arrowHelperLength.visible = options.showDimensions;
        arrowHelperWidth.visible = options.showDimensions;
       ...