Set Shapes
Babylon.js provides a set of predefined geometric shapes that can be easily created and customized for your 3D scenes. These shapes include primitives like boxes, spheres, cylinders, toruses, planes, and more. Each shape comes with a variety of properties that allow for fine-tuning its dimensions, subdivisions, and appearance.
There are several types of predefined shapes. Here are the main ones:
Box
A 3D cube or rectangular cuboid. You can customize its width, height, and depth to create different sizes and proportions.
<box name='box' options={{ height: 0.4, width: 0.3, depth: 0.1 }} />
Tiled Box
A box mesh that allows each face to be subdivided into tiles, giving you more control over texturing and detail on each side. This is useful for cases where you need different textures or high-detail mapping on individual faces of the box.
<tiledBox
name='tiled-box'
options={{
sideOrientation: Mesh.DOUBLESIDE,
pattern: Mesh.FLIP_TILE,
alignVertical: Mesh.TOP,
alignHorizontal: Mesh.LEFT,
width: 0.5,
height: 0.3,
depth: 0.3,
tileSize: 0.1,
tileWidth: 0.2,
}}>
<standardMaterial name='bricks'>
<texture kind='diffuseTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_ASSETS_URL}/environments/bricktile.jpg`}/>
</standardMaterial>
</tiledBox>Sphere
A perfectly round 3D object. It has customizable diameter and segments to adjust smoothness and detail.
<sphere name='sphere' options={{ diameter: 0.3 }} />Cylinder
A cylinder with a circular base. You can set the height, diameter, top diameter, bottom diameter, and the number of tessellation segments for detail.
<cylinder name='cylinder' options={{ diameter: 0.2, height: 0.4 }} />Cone
A cone, essentially a cylinder with a top diameter of zero. You can customize the height, diameter, and tessellation.
<cylinder name='cone' options={{ diameterBottom: 0.2, diameterTop: 0, height: 0.4 }} />Triangular Prism
A 3-sided prism with a triangular cross-section. You can adjust its size and height for custom shapes.
<cylinder name='triangular prism' options={{ diameter: 0.2, tessellation: 3, height: 0.3 }} />Capsule
A capsule shape, which is a cylinder with hemispherical ends. Parameters include height, radius, and tessellation, ideal for character models and rounded objects.
<capsule name='capsule' options={{ height: 0.5, radius: 0.1 }} />Plane
A flat, 2D surface that extends infinitely in the X and Y directions but is often defined with specific width and height.
<plane name='plane' options={{ height: 0.3, width: 0.5, sideOrientation: Mesh.DOUBLESIDE }} />Tiled Plane
A plane subdivided into tiles. You can customize the number of tiles and their size to create detailed surfaces with more control over texturing and tiling effects.
<tiledPlane
name='tiled plane'
options={{
sideOrientation: Mesh.DOUBLESIDE,
frontUVs: new Vector4(0, 0, 0.5, 1),
backUVs: new Vector4(0.5, 0, 1, 1),
pattern: Mesh.FLIP_N_ROTATE_TILE,
alignVertical: Mesh.CENTER,
alignHorizontal: Mesh.CENTER,
width: 0.5,
height: 0.3,
tileWidth: 0.5,
tileHeight: 0.3,
}}>
<standardMaterial name='painting'>
<texture kind='diffuseTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_ASSETS_URL}/environments/tile1.jpg`} />
</standardMaterial>
</tiledPlane>Disc
A flat, circular surface with customizable radius and tessellation for adjusting smoothness.
<disc name='disc' options={{ radius: 0.2, sideOrientation: Mesh.DOUBLESIDE }} />Torus
A 3D doughnut-shaped object. Customize the diameter of the ring and the thickness of the tube, along with its tessellation for smoothness.
<torus name='torus' options={{ diameter: 0.3, thickness: 0.05 }} />Torus Knot
A more complex, twisted shape that resembles a knotted torus. Parameters such as the radius, tube diameter, and the number of p and q values control its complexity.
<torusKnot name='torus-knot' options={{ radius: 0.2, tube: 0.025, radialSegments: 1024, p: 5, q: 2 }} />Ground
A large, flat surface used as the ground or terrain in a scene. You can adjust its width, height, and subdivisions for more detail or flatness.
<ground name='ground' options={{ width: 0.5, height: 0.3 }} />Ground from Heightmap
A ground mesh generated from a heightmap image, where the brightness of the pixels defines the elevation. This is great for creating terrains and landscapes with varying heights. You can customize the width, height, and subdivisions to control the terrain detail.
<groundFromHeightMap
name='ground-from-heightmap'
url={`${process.env.NEXT_PUBLIC_BABYLON_PLAYGROUND_URL}/textures/worldHeightMap.jpg`}
options={{ width: 0.8, height: 0.8, subdivisions: 150, maxHeight: 0.1 }}>
<standardMaterial name='ground'>
<texture kind='diffuseTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_PLAYGROUND_URL}/textures/earth.jpg`} />
</standardMaterial>
</groundFromHeightMap>Tiled Ground
A ground mesh divided into tiles, providing more flexibility for creating terrains or floors with detailed sections. You can set the width, height, and number of subdivisions in both directions.
<tiledGround
name='tiled-ground'
options={{ xmin: -0.5, zmin: -0.5, xmax: 0.5, zmax: 0.5, subdivisions: { h: 8, w: 8} }}
onCreate={mesh => {
// needed variables to set subMeshes
const verticesCount = mesh.getTotalVertices();
const { w, h } = { h: 8, w: 8 };
const tileIndicesLength = mesh.getIndices()!.length / (w * h);
// set subMeshes of the tiled ground
mesh.subMeshes = [];
let base = 0;
for (let row = 0; row < h; row++) {
for (let col = 0; col < w; col++) {
mesh.subMeshes.push(new SubMesh(row % 2 ^ col % 2, 0, verticesCount, base, tileIndicesLength, mesh));
base += tileIndicesLength;
}
}
}}>
<multiMaterial name='multi-material'>
<standardMaterial name='grass'>
<texture kind='diffuseTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_PLAYGROUND_URL}/textures/grass.png`} />
</standardMaterial>
<standardMaterial name='rock'>
<texture kind='diffuseTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_PLAYGROUND_URL}/textures/rock.png`} />
</standardMaterial>
</multiMaterial>
</tiledGround>Text
A mesh created from text, where each character is built as 3D geometry. You can define the text string, size, thickness, and customize the font style.
<text3D
name='text'
text='REACTYLON'
fontData={kenneyFont}
options={{
size: 0.1,
resolution: 64,
depth: 0.05,
perLetterFaceColors: index => {
if (index < 5) {
return [
Color4.FromColor3(Color3.Red()), // front
Color4.FromColor3(Color3.Black()), // inner
Color4.FromColor3(Color3.Yellow()), // back
];
}
return [];
},
}}
/>earcut dependency needs to be installed. See Earcut section for more info.Learn More
For properties and customizations, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/set.
