JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.rockonflash.com/webGL/babylon/babylon.js"></script>
<script src="http://www.rockonflash.com/webGL/babylon/Neo.js"></script>
<div id="rootDiv">
<canvas id="renderCanvas"></canvas>
</div>
CSS
html, body, div, canvas {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
JavaScript
NEO.JackIntoBabylon();
// Get the Canvas element from our HTML below
var canvas = document.getElementById("renderCanvas");
// Load BABYLON 3D engine
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var origin = new BABYLON.Vector3(0,10,0);
// Create a camera
var camera = new BABYLON.ArcRotateCamera("ExternalCamera", 240*NEO.toRADIANS, 67.5*NEO.toRADIANS , 140, origin, scene);
// Attach the camera to the scene
scene.activeCamera.attachControl(canvas);
var sunLight = new BABYLON.DirectionalLight("Sun", new BABYLON.Vector3(-22*NEO.toRADIANS,-90*NEO.toRADIANS, 0), scene);
var ground = new BABYLON.Mesh.CreatePlane("ground", 100, scene);
ground.rotation.x = -90*NEO.toRADIANS;
var material = new BABYLON.StandardMaterial("default", scene);
material.emissiveColor = new BABYLON.Color3(1, 1, 1);
material.wireframe = true;
ground.DrawAllAxis(scene);
ground.material = material;
// marker is what we're moving/rotating in the render loop
var marker = BABYLON.Mesh.CreateSphere("marker", 10, 1.0, scene);
marker.position = origin.clone();
marker.DrawAllAxis(scene);
marker.rotation.y = -45*NEO.toRADIANS;
engine.runRenderLoop(function ()
{
// rotate in LOCAL space on Y axis using eulers
//marker.rotation.y += .01;
marker.rotation.y += 1*NEO.toRADIANS;
// 3D
scene.render();
});