Parametric Meshes
In Babylon.js, parametric meshes are a powerful feature that allows for the creation of 3D objects based on mathematical parameters. These shapes are defined by specific inputs, enabling flexibility in geometry creation. There are several types of parametric meshes. Here are the main ones:
Lines
Lines are simple segments drawn between points in 3D space. They’re useful for wireframes, visualizing paths, or creating simple shapes like grids.
const createSpiralLines = () => {
const myPoints = [];
const deltaTheta = 0.1;
const deltaY = 0.005;
const radius = 1;
let theta = 0;
let Y = 0;
for (let i = 0; i < 400; i++) {
myPoints.push(new Vector3(radius * Math.cos(theta), Y, radius * Math.sin(theta)));
theta += deltaTheta;
Y += deltaY;
}
return myPoints;
};
// ...
<>
<lines
name='lines'
options={{
points: [new Vector3(-2, -1, 0), new Vector3(0, 1, 0), new Vector3(2, -1, 0), new Vector3(4, 1, 0)],
colors: [new Color4(1, 0, 0, 1), new Color4(0, 1, 0, 1), new Color4(0, 0, 1, 1), new Color4(1, 1, 0, 1)],
}}
/>
<lines
name='spiral-lines'
options={{
points: createSpiralLines(),
}}
position={new Vector3(0, 1.5, 0)}
/>
</>
Dashed Lines
Similar to Lines, but the lines are dashed. You can control the dash size, gap size, and number of dashes, useful for visualizing paths or adding style to line drawings.
<dashedLines
name='dashed-lines'
options={{
points: [new Vector3(-2, -1, 0), new Vector3(0, 1, 0), new Vector3(2, -1, 0), new Vector3(4, 1, 0)],
dashSize: 1000, // lenght of a dash
gapSize: 1000, // distance between two dashes
dashNb: 150, // approximated number of dashes
}}
color={Color3.Yellow()}
/>Line System
The line system is used to create a series of connected or disconnected line segments in a single mesh. It’s useful for more complex wireframe shapes, 3D grid systems, or even creating abstract patterns using multiple lines.
<lineSystem
name='line-system'
options={{
lines: [
[new Vector3(-2, 0, 2), new Vector3(0, 0, 2)],
[new Vector3(-2, 0, 0), new Vector3(-2, 2, 0), new Vector3(0, 2, 0)],
],
colors: [
[new Color4(1, 0, 0, 1), new Color4(1, 0, 0, 1)],
[new Color4(0, 1, 0, 1), new Color4(0, 0, 1, 1), new Color4(1, 1, 0, 1)],
],
}}
/>Ribbon
A ribbon is a surface created by connecting multiple paths of points. You can use it to create complex surfaces like fabric, terrain, or flowing water. It’s versatile for generating wavy or irregular shapes by defining multiple control paths.
<>
<ribbon
name='ribbon'
options={{
pathArray: ribbonPoints,
sideOrientation: Mesh.DOUBLESIDE,
}}
/>
{ribbonPoints.reduce((points, line, lineIndex) => {
const currentPoints = line.map(({ x, y, z }, index) => {
const color = ribbonLineColors[lineIndex];
const text = `${x},${y},${z}`;
return (
<plane name={`vertex-${lineIndex}-${index}`} position={new Vector3(x, y, z)}>
<standardMaterial name={`vertex-material-${text}`} backFaceCulling={false} specularColor={Color3.Black()}>
<dynamicTexture name={`dynamic-texture-${index}`} kind='diffuseTexture' canvasOrSize={{width: 80, height: 80}} generateMipMaps hasAlpha onCreate={texture => {
texture.drawText(text, 0, 60, '20px Arial', color, 'transparent', true);
}} />
</standardMaterial>
</plane>
);
});
points.push(...currentPoints);
return points;
}, [] as Array<React.ReactNode>)}
</>Tube
A tube is created along a path defined by a series of points, allowing for flexible shape generation, such as pipes, cables, or curved paths. You can customize the radius, tessellation, and even cap the ends of the tube.
<tube
name='tube'
options={{
path: [new Vector3(5.0, 0, 0.0), new Vector3(0, 1, 0.1), new Vector3(-4.0, 6, 0.2)],
radius: 0.5,
sideOrientation: Mesh.DOUBLESIDE,
}}
positionY={-3}
/>Lathe
The lathe shape is generated by rotating a 2D shape (defined by a path of points) around a central axis. It’s useful for creating objects like vases, bottles, or anything with rotational symmetry.
<lathe
name='lathe'
options={{
shape: [new Vector3(0, 0, 0), new Vector3(2, 1, 0), new Vector3(1, 2, 0), new Vector3(2.5, 3, 0), new Vector3(0.75, 4, 0)],
}}
positionY={-2}
/>Polygon
A polygon of any type, regular or irregular, convex or concave, is created in the horizontal xz plane.
<polygon3D
name='polygon'
options={{
...plygonOptions,
sideOrientation: Mesh.DOUBLESIDE,
}}
/>earcut dependency needs to be installed. See Earcut section for more info.Extrude Polygon
The extrusion is carried out down the vertical y axis from the polygon shape in the horizontal xz plane. It’s useful for creating walls, floors, or custom-shaped boxes with a polygonal base.
<extrudePolygon
name='extrude-polygon'
options={{
...plygonOptions,
depth: 1,
sideOrientation: Mesh.DOUBLESIDE,
}}
/>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/param.
