BabylonJS - page
HTML
<script src="https://rawgithub.com/BabylonJS/Babylon.js/v1.8.0/babylon.1.8.0.js"></script>
<div id="main">
<div id="title">
<h1>My BabylonJS</h1>
</div>
<canvas id="renderCanvas">CANVAS</canvas>
</div>
CSS
#main
{
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding-top: 75px;
}
#title
{
height: 75px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
}
JavaScript
if (BABYLON.Engine.isSupported()) {
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);
var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene);
var cube = BABYLON.Mesh.CreateBox("Box", 0.12, scene);
var alpha = 0;
cube.scaling.x = 0.5;
cube.scaling.z = 3.5;
scene.beforeRender = function() {
cube.rotation.x = alpha;
cube.rotation.y = alpha;
alpha += 0.01;
};
// Material
var material = new BABYLON.StandardMaterial("default", scene);
material.emissiveColor = new BABYLON.Color3(0.3, 0.3, 0.5);
cube.material = material;
// Render loop
var renderLoop = function () {
scene.render();
};
// Launch render loop
engine.runRenderLoop(renderLoop);
}