JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/plugins/BezierPlugin.min.js"></script>
<script src="https://rawgit.com/BabylonJS/Babylon.js/v1.11/babylon.1.11.js"></script>
<body>
<div id="rootDiv">
<canvas id="canvas_renderer"></canvas>
</div>
</body>
CSS
html, body, div, canvas {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
JavaScript
// Init
var canvas = document.getElementById("canvas_renderer");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// Camera
var arcRotate = false;
var camera;
var position = new BABYLON.Vector3(-20, -5, -20);
var target = new BABYLON.Vector3(0, 0, 0);
if (arcRotate) {
var arCam = new BABYLON.ArcRotateCamera(
"ArcRotateCamera",
0,
0,
0,
target,
scene
);
arCam.setPosition(position);
camera = arCam;
} else {
var frCam = new BABYLON.FreeCamera(
"FreeCamera",
position,
scene
);
frCam.setTarget(target);
camera = frCam;
}
camera.maxZ = 10000;
camera.attachControl(canvas);
// Light
var light = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 50, 0), scene);
// Box
var box = BABYLON.Mesh.CreateBox("box", 2, scene);
box.scaling.z = 2;
// Once the scene is loaded, just register a render loop to render it
engine.runRenderLoop(function () {
scene.render();
});