JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<canvas id="canvas"></canvas>
</body>
<script src="http://urbanproductions.com/wingy/babylon/plotting/bounder2/js/hand.minified-1.3.7.js"></script>
<script src="http://urbanproductions.com/wingy/babylon/plotting/bounder2/js/babylon.1.10.0.js"></script>
CSS
<style type="text/css">
html,body,#canvas {
width:100%;
height:100%;
padding:0;
margin:0;
overflow: hidden;
background-color: black;
}
</style>
JavaScript
var canvas = document.getElementById("canvas");
// Check support
if (!BABYLON.Engine.isSupported()) {
alert('Browser not supported');
} else {
var engine = new BABYLON.Engine(canvas, true);
var scene = CreateScene();
var bump = .001;
engine.runRenderLoop(function () {
scene.render();
scene.activeCameras[1].rotation.x += bump;
scene.activeCameras[3].rotation.x += bump;
bump = 0;
});
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
}
// --------------------------------------------------------------------------------------------------
function CreateScene() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0,0,0);
var camera1 = new BABYLON.FreeCamera("Camera1", new BABYLON.Vector3(0, 0, -20), scene);
var camera2 = new BABYLON.FreeCamera("Camera2", new BABYLON.Vector3(-500, 2, -500), scene);
camera2.fov = 90;
camera2.rotation.x = Math.PI/2;
var camera3 = new BABYLON.FreeCamera("Camera3", new BABYLON.Vector3(0, 0, -30), scene);
var camera4 = new BABYLON.FreeCamera("Camera4", new BABYLON.Vector3(-500, 2, -500), scene);
camera4.fov = 50;
camera4.rotation.x = Math.PI/2;
var camera5 = new BABYLON.FreeCamera("Camera5", new BABYLON.Vector3(0, 0, -40), scene);
scene.activeCameras.push(camera1);
scene.activeCameras.push(camera2);
scene.activeCameras.push(camera3);
scene.activeCameras.push(camera4);
scene.activeCameras.push(camera5);
var viewport1 = new BABYLON.Viewport(.003, .28, .491, .715);
var viewport2 = new BABYLON.Viewport(.4965, .27, .005, .73);
var viewport3 = new BABYLON.Viewport(.505, .28, .493, .715);
var viewport4 = new BABYLON.Viewport( 0, .265, 1, .01);
var viewport5 = new BABYLON.Viewport(.003, .06, 1, .20);
camera1.viewport = viewport1;
camera2.viewport = viewport2;
camera3.viewport = viewport3;
camera4.viewport = viewport4;
camera5.viewport = viewport5;
scene.activeCamera =...