MeshBuilder

BABYLON.MeshBuilder has 26 Create... functions in version 9.28: boxes, spheres, cylinders, capsules, tori, polyhedra, grounds, and shapes from your data, such as CreateLathe (a profile spun around y), CreateTube (a circle swept along a path), CreateRibbon, CreatePolygon and CreateText. Each takes a name, an options object and the scene:

Ten MeshBuilder shapes, including a lathe spun from a profileHTML

<canvas id="view" style="width: 620px; height: 180px"></canvas>
<script src="https://cdn.jsdelivr.net/npm/babylonjs@9.28.0/babylon.js"></script>
<script src="bookstore.js"></script>
<script>
{
  const engine = new BABYLON.Engine(view, true, {}, true);
  const scene = BookNestStore.createScene(engine);     // background and light (Section 7.2.8)
  new BABYLON.ArcRotateCamera('camera', -Math.PI / 2, 1.25, 4.6, BABYLON.Vector3.Zero(),
    scene);
  const vase = [0.2, 0.3, 0.35, 0.2, 0.15, 0.25]       // lathe profile: radius by height
    .map((r, i) => new BABYLON.Vector3(r, i * 0.2 - 0.5, 0));
  const shapes = [['Box', { size: 0.8 }], ['Sphere', { diameter: 0.9 }],
    ['Cylinder', { height: 0.9, diameter: 0.7 }], ['Capsule', { height: 1, radius: 0.3 }],
    ['Torus', { diameter: 0.8, thickness: 0.25 }],
    ['IcoSphere', { radius: 0.5, subdivisions: 1 }],
    ['Polyhedron', { type: 1, size: 0.35 }], ['TorusKnot', { radius: 0.3, tube: 0.1 }],
    ['Lathe', { shape: vase }], ['Disc', { radius: 0.45, tessellation: 6 }]];
  shapes.forEach(([type, options], i) => {
    const mesh = BABYLON.MeshBuilder[`Create${type}`](type, options, scene);
    mesh.position.set((i % 5) * 1.3 - 2.6, i < 5 ? 0.62 : -0.62, 0);
    mesh.material = BookNestStore.paint(scene, type, BookNestStore.BOOKS[i % 6].color);
  });
  BookNestStore.renderWhenReady(engine, scene);
}
</script>

Browser output of 16

Top row: box, sphere, cylinder, capsule, torus; bottom row: icosphere, octahedron (Polyhedron type 1), torus knot, lathed vase, hexagonal disc. Common options are sideOrientation (FRONTSIDE, BACKSIDE, DOUBLESIDE), faceUV and faceColors per box face (for covers, Cover Textures) and updatable.

Ten MeshBuilder primitives, from a box to a lathed vase, in BookNest's paletteHTMLLive

<!doctype html>
<style>
  body { margin: 0; background: #f7f3ec; }
  canvas { width: 100%; max-width: 600px; height: 280px; display: block; touch-action: none; }
</style>
<canvas id="view"></canvas>
<script src="https://cdn.jsdelivr.net/npm/babylonjs@9.28.0/babylon.js"></script>
<script>
const canvas = document.getElementById('view');
const engine = new BABYLON.Engine(canvas, true, {}, true);
const scene = new BABYLON.Scene(engine);
scene.clearColor = BABYLON.Color4.FromHexString('#cfd8dcff');
new BABYLON.HemisphericLight('sky', new BABYLON.Vector3(0.3, 1, -0.4), scene)
  .groundColor = new BABYLON.Color3(0.35, 0.32, 0.3);
const camera = new BABYLON.ArcRotateCamera('camera', -Math.PI / 2, 1.25, 5.4, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

const COLORS = ['#1f5f8b', '#5b3f99', '#e09a10', '#3f7d3a', '#b5452f', '#2a9d8f'];
const vase = [0.2, 0.3, 0.35, 0.2, 0.15, 0.25]       // lathe profile: radius by height
  .map((r, i) => new BABYLON.Vector3(r, i * 0.2 - 0.5, 0));
const shapes = [['Box', { size: 0.8 }], ['Sphere', { diameter: 0.9 }],
  ['Cylinder', { height: 0.9, diameter: 0.7 }], ['Capsule', { height: 1, radius: 0.3 }],
  ['Torus', { diameter: 0.8, thickness: 0.25 }],
  ['IcoSphere', { radius: 0.5, subdivisions: 1 }],
  ['Polyhedron', { type: 1, size: 0.35 }], ['TorusKnot', { radius: 0.3, tube: 0.1 }],
  ['Lathe', { shape: vase, sideOrientation: BABYLON.Mesh.DOUBLESIDE }],
  ['Disc', { radius: 0.45, tessellation: 6 }]];
const meshes = shapes.map(([type, options], i) => {
  const mesh = BABYLON.MeshBuilder[`Create${type}`](type, options, scene);   // name, options, scene
  mesh.position.set((i % 5) * 1.3 - 2.6, i < 5 ? 0.62 : -0.62, 0);
  const material = new BABYLON.StandardMaterial(type, scene);
  material.diffuseColor = BABYLON.Color3.FromHexString(COLORS[i % 6]);
  material.specularColor = new BABYLON.Color3(0.2, 0.2, 0.2);
  mesh.material = material;
  return mesh;
});
meshes[9].rotation.x = -0.5;                          // tilt the flat disc toward the camera

scene.onBeforeRenderObservable.add(() => {
  const turn = engine.getDeltaTime() / 2000;
  meshes.forEach((mesh, i) => { if (i !== 9) mesh.rotation.y += turn; });
});
engine.runRenderLoop(() => scene.render());
addEventListener('resize', () => engine.resize());
</script>

MENU