JSFiddle - React, Tailwind, and code Playground

by John Grden

HTML

<script src="http://www.rockonflash.com/webGL/babylon/babylon.1.8.9.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 = Math.PI * .5;

var material = new BABYLON.StandardMaterial("default", scene);
material.emissiveColor = new BABYLON.Color3(1, 1, 1);
material.wireframe = true;

ground.material = material;

// create a sphere to show origin
var center= BABYLON.Mesh.CreateSphere("marker", 10, 1.0, scene);
center.position = origin.clone();
center.DrawAllAxis(scene);

// 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.SetRotation(new BABYLON.Vector3(-90*NEO.toRADIANS, 0, 0), NEO.Space.WORLD);


engine.runRenderLoop(function () 
{
    // rotate in LOCAL space
    marker.rotation.y += .1;
    //marker.Rotate(NEO.Axis.Y, 1, NEO.Space.WORLD);
    
    // translate
    marker.Translate(NEO.Axis.Z, .05, NEO.Space.LOCAL);
    
    // 3D
    scene.render();
});