<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksForGeeks</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<!-- Author: Pankaj Kumar Bind -->
<body>
<script src=
<script>
document.addEventListener("DOMContentLoaded", function () {
// Here we will get the canvas element
let canvas = document.createElement("canvas");
document.body.appendChild(canvas);
// Here we will create Babylon.js engine
let engine = new BABYLON.Engine(canvas, true);
// Here we will create a scene
let scene = new BABYLON.Scene(engine);
// Here we will create a camera
let camera = new BABYLON.FreeCamera("camera",
new BABYLON.Vector3(0, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);
// Here we will create a light
let light = new BABYLON.HemisphericLight("light",
new BABYLON.Vector3(10, 1, 10), scene);
// Here we will create a cube
let box = BABYLON.MeshBuilder
.CreateBox("box", { size: 2 }, scene);
// Here we will create animation for the cube to rotate
let animation = new BABYLON.Animation(
"rotationAnimation",
"rotation.y",
30,
BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);
// Here we will define animation keyframes
let keyframes = [
{ frame: 0, value: 0 },
{ frame: 100, value: Math.PI * 2 }
];
// Here we will set keyframes to the animation
animation.setKeys(keyframes);
// Here we will attach animation to the cube
box.animations = [animation];
// Here we will run the animation
scene.beginAnimation(box, 0, 100, true);
// Here we will render the scene
engine.runRenderLoop(function () {
scene.render();
});
// Here we will handle window resize
window.addEventListener("resize", function () {
engine.resize();
});
});
</script>
</body>
</html>