JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.babylonjs.com/babylon.js"></script>
<canvas id="canvas"></canvas>
CSS
html,body,#canvas {
width:100%;
height:100%;
padding:0;
margin:0;
overflow: hidden;
}
JavaScript
var canvas = document.getElementById("canvas");
// Check support
if (!BABYLON.Engine.isSupported()) {
window.alert('Browser not supported');
} else {
// Babylon
var engine = new BABYLON.Engine(canvas, true);
//Creating scene
scene = createSceneTuto(engine);
//scene.activeCamera.attachControl(canvas);
// Once the scene is loaded, just register a render loop to render it
engine.runRenderLoop(function () {
scene.render();
});
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
}
//================================================
function createSceneTuto(engine) {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 90, BABYLON.Vector3.Zero(), scene);
camera.setPosition(new BABYLON.Vector3(30, 30, 30));
function addLightSphere(light){
var lightSphere = new BABYLON.Mesh.CreateSphere("sphere", 10, 2, scene);
lightSphere.position = light.position;
lightSphere.material = new BABYLON.StandardMaterial("light", scene);
lightSphere.material.emissiveColor = new BABYLON.Color3(1, 1, 0);
}
var light = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3( -1,0, 0), scene);
light.position = new BABYLON.Vector3(0, 0, 20);
light.intensity = 0.5;
var light0 = new BABYLON.DirectionalLight("Omni0", new BABYLON.Vector3(0,0,-1), scene);
light0.position = new BABYLON.Vector3(25, 0, 0);
light.intensity = 0.5;
addLightSphere(light0);
var box = BABYLON.Mesh.CreateBox("Box", 3, scene);
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 20, scene);
// var sphere = BABYLON.Mesh.CreateSphere("Sphere", 15, 20, scene);
// Shadows
var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
var shadowGenerator0 = new BABYLON.ShadowGenerator(1024, light0);
...