JSFiddle - React, Tailwind, and code Playground

by John Grden

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_0 = BABYLON.Mesh.CreateSphere("marker", 10, 1.0, scene);
marker_0.position = origin.clone();
marker_0.DrawAllAxis(scene);
//marker_0.SetEulerRotation(new BABYLON.Vector3(-45*NEO.toRADIANS, 0, 0), NEO.Space.LOCAL);

var marker_1 = BABYLON.Mesh.CreateSphere("marker", 10, 1.0, scene);
marker_1.position = origin.clone();
marker_1.Translate(NEO.Axis.X, 20, NEO.Space.WORLD);
marker_1.Translate(NEO.Axis.Y, 10, NEO.Space.WORLD);
marker_1.Translate(NEO.Axis.Z, 10, NEO.Space.WORLD);
marker_1.DrawAllAxis(scene);
//marker_1.SetEulerRotation(new BABYLON.Vector3(0, -45*NEO.toRADIANS, 0), NEO.Space.WORLD);
marker_1.lookAt(marker_0.position);

engine.runRenderLoop(function () 
{
    // rotate in LOCAL space on Y axis using eulers
    //marker.rotation.y += .01;// = new BABYLON.Vector3(0,marker.worldRotation.y+.01,0);
    //marker_0.RotateEulers(NEO.Axis.Y, 1, NEO.Space.LOCAL);
    //marker_1.RotateEulers(NEO.Axis.Z, 1, NEO.Space.LOCAL);
    
    // translate
    //marker.Translate(NEO.Axis.Z, .05,...