JSFiddle - React, Tailwind, and code Playground

by garidan

HTML

<script src="http://www.babylonjs.com/babylon.js"></script>
<script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
<div id="container">
<canvas id="renderCanvas"></canvas>

</div>

CSS

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

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

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

JavaScript

// multiviewport test: free - top - side views
var engine;
var canvas;
var perspectivevp;
var topvp;
var sidevp;
var perspectiveGlobalView;
var topGlobalView;
var sideGlobalView;



var init3D = function () {
	// Get the canvas element from our HTML above
	canvas = document.getElementById("renderCanvas");
	// Load the BABYLON 3D engine
	engine = new BABYLON.Engine(canvas, true);
	// Now, call the createScene function that you just finished creating
	var scene = createScene();
	// Register a render loop to repeatedly render the scene
	engine.runRenderLoop(function () {
		scene.render();
	});
	// Watch for browser/canvas resize events
	window.addEventListener("resize", function () {
		engine.resize();
		// todo recalc viewports
	});
}



  // This begins the creation of a function that we will 'call' just after it's built
  var createScene = function () {
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
    camera.setPosition(new BABYLON.Vector3(20, 200, 400));
    camera.lowerBetaLimit = 0.1;
    camera.upperBetaLimit = (Math.PI / 2) * 0.99;
    camera.lowerRadiusLimit = 150;
	perspectivevp = new BABYLON.Viewport(0, 0, 0.5, 1.0);
	camera.viewport = perspectivevp;
	perspectiveGlobalView = camera.viewport.toGlobal(engine);


	var sideCamera = new BABYLON.FreeCamera("sideCamera", new BABYLON.Vector3(0,0,100), scene);
	sidevp = new BABYLON.Viewport(0.5, 0, 0.5, 0.5);
	sideCamera.viewport = sidevp;
	sideGlobalView = sideCamera.viewport.toGlobal(engine);
	sideCamera.setTarget(new BABYLON.Vector3(0.1,0.1,0.1));
	sideCamera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
	


	fieldSize = 300
	fieldRatio = sideGlobalView.width/sideGlobalView.height
	sideCamera.orthoLeft = -fieldSize/2;
	sideCamera.orthoRight = fieldSize/2;
	sideCamera.orthoTop =  fieldSize*fieldRatio/2;
	sideCamera.orthoBottom = -fieldSize*fieldRatio/2;




	var topCamera = new BABYLON.FreeCamera("topCamera", new...