Script Tag

<canvas id="view" style="width: 580px; height: 200px"></canvas>
<script src="https://cdn.jsdelivr.net/npm/babylonjs@9.28.0/babylon.js"></script>
<script>
{
  const engine = new BABYLON.Engine(view, true, {}, true);   // antialias, adapt to DPR
  const scene = new BABYLON.Scene(engine);
  scene.clearColor = BABYLON.Color4.FromHexString('#eceff1ff');
  new BABYLON.ArcRotateCamera('camera', -Math.PI / 2, 1.3, 4.4, BABYLON.Vector3.Zero(), scene);
  new BABYLON.HemisphericLight('sky', new BABYLON.Vector3(0.3, 1, -0.6), scene);
  ['#1f5f8b', '#5b3f99', '#e09a10', '#3f7d3a', '#b5452f', '#2a9d8f'].forEach((hex, i) => {
    const book = BABYLON.MeshBuilder.CreateBox(`book${i}`, { width: 0.7, height: 1.6 }, scene);
    book.scaling.z = 0.3; book.position.x = (i - 2.5) * 0.95; book.rotation.y = 0.5;
    book.material = new BABYLON.StandardMaterial(`cover${i}`, scene);
    book.material.diffuseColor = BABYLON.Color3.FromHexString(hex);
  });
  let frames = 0;
  scene.executeWhenReady(() => engine.runRenderLoop(() => {
    scene.render(); if (++frames === 3) window.__done = true;
  }));
}
</script>