Chapter 02Polyhedra

Using the CreatePolyhedron method of the MeshBuilder class, we can make a variety of polyhedra.

let polyhedron = BABYLON.MeshBuilder.CreatePolyhedron("name", {options}, scene);

The first argument of CreatePolyhedron() is a String that we can use to retrieve the entire polyhedron and data about the polyhedron later. The second argument is an object that specifies various properties of the polyhedron. The last argument is a reference to the scene in which the polyhedron will be inserted into.

<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);

function createScene(canvas, engine){
    let scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3(1, 1, 1);
    let camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 3, Math.PI / 6, 6, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);

    let mat = new BABYLON.StandardMaterial("mat", scene);
    mat.diffuseColor = new BABYLON.Color3(0, 1, 0);

    let polyhedron = BABYLON.MeshBuilder.CreatePolyhedron("polyhedron", {}, scene);
    polyhedron.material = mat;

    return scene;
};

var scene = createScene(canvas, engine);

engine.runRenderLoop(function(){
    scene.render();
});

window.addEventListener("resize", function(){
    engine.resize();
});
</script>

<canvas id="renderCanvas"></canvas>

Figure 1. Default Babylon.js type 1 polyhedron.

Properties

Type

The type property can be used to specify what type of polyhedron we want to make. The default value is 0, which is a tetrahedron. We can use any value between 0 and 14. Each value correlates to a specific geometric shape.

Below is a list of values and their corresponding geometric shapes for the type property.

Value	Corresponding Shape	Number of Faces
0	Tetrahedron	4
1	Octahedron	8
2	Dodecahedron	12
3	Icosahedron	20
4	Rhombicuboctahedron	26
5	Triangular Prism	5
6	Pentagonal Prism	7
7	Hexagonal Prism	8
8	Square Pyramid	5
9	Pentagonal Pyramid	6
10	Triangular Dipyramid	5
11	Pentagonal Dipyramid	5
12	Elongated Square	12
13	Elongated Pentagonal Dipyramid	15
14	Elongated Pentagonal Cupola	22

Size

The size property can be used to specify the size of the entire polyhedron with respect to the x, y and z axes. The default value is 1.

<script>
var canvas1 = document.getElementById("renderCanvas1");
var engine1 = new BABYLON.Engine(canvas1, true);

function createScene1(canvas, engine){
    let scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3(1, 1, 1);
    let camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 3, Math.PI / 6, 10, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);

    let mat = new BABYLON.StandardMaterial("mat", scene);
    mat.diffuseColor = new BABYLON.Color3(0, 1, 0);

    let polyhedron = BABYLON.MeshBuilder.CreatePolyhedron("polyhedron", {type: 0, size: 3}, scene);
    polyhedron.material = mat;

    return scene;
};

var scene1 = createScene1(canvas1, engine1);

engine1.runRenderLoop(function(){
    scene1.render();
});

window.addEventListener("resize", function(){
    engine1.resize();
});
</script>

<canvas id="renderCanvas1"></canvas>

Figure 2. We set the tetrahedron's size to 3.

SizeX, SizeY, and SizeZ

The sizeX, sizeY, and sizeZ properties can be used to adjust the size of the polyhedron with respect to the x, y, and z axes, respectively. The default value of each is 1.

<script>
var canvas2 = document.getElementById("renderCanvas2");
var engine2 = new BABYLON.Engine(canvas2, true);

function createScene2(canvas, engine){
    let scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3(1, 1, 1);
    let camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 3, Math.PI / 4, 6, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);

    let mat = new BABYLON.StandardMaterial("mat", scene);
    mat.diffuseColor = new BABYLON.Color3(0, 1, 0);

    let polyhedron = BABYLON.MeshBuilder.CreatePolyhedron("polyhedron", {type: 8, sizeY: 3, sizeX: 2}, scene);
    polyhedron.material = mat;

    return scene;
};

var scene2 = createScene2(canvas2, engine2);

engine2.runRenderLoop(function(){
    scene2.render();
});

window.addEventListener("resize", function(){
    engine2.resize();
});
</script>

<canvas id="renderCanvas2"></canvas>

Figure 3. We adjust the size of the polyhedron along the x and y axes to 2 and 3, respectively.

Custom

We can use the custom property to create custom geometric shapes by giving a name, category, vertices, and indices. The default value is null. The custom property will overwrite the type property in order to make our polyhedra the desired shape.

<script>
var canvas5 = document.getElementById("renderCanvas5");
var engine5 = new BABYLON.Engine(canvas5, true);

function createScene5(canvas, engine){
    let scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3(1, 1, 1);
    let camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 3, Math.PI / 6, 6, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);

    let mat = new BABYLON.StandardMaterial("mat");
    mat.diffuseColor = new BABYLON.Color3(0, 1, 0);

    let tetrahedron = {
    "name":"Tetrahedron",
    "category":["Platonic Solid"],
    "vertex":[[0,0,1.732051],[1.632993,0,-0.5773503],[-0.8164966,1.414214,-0.5773503],[-0.8164966,-1.414214,-0.5773503]],
    "face":[[0,1,2],[0,2,3],[0,3,1],[1,3,2]]};

    let polyhedron = BABYLON.MeshBuilder.CreatePolyhedron("polyhedron", {custom: tetrahedron}, scene);
    polyhedron.material = mat;

    return scene;
};

var scene5 = createScene5(canvas5, engine5);

engine5.runRenderLoop(function(){
    scene5.render();
});

window.addEventListener("resize", function(){
    engine5.resize();
});
</script>

<canvas id="renderCanvas5"></canvas>

Figure 4. We create a custom tetrahedron.

George Hart has created an Encyclopedia of Polyhedron. Lee Stemkoski has converted 126 JavaScript objects to JSON format which we can use with the custom property. Go here for the respective links and information regarding each.

FaceColors

The faceColors parameter allows us to use color4() to add color to the polyhedron. The default value is color4(1, 1, 1, 1). To change the face colors to our own color values, we can make an array.

Figure 5 applies different colors to the faces using color4() and color3(). Go here for more information regarding the color4() and color3() classes.

<script>
var canvas3 = document.getElementById("renderCanvas3");
var engine3 = new BABYLON.Engine(canvas3, true);

function createScene3(canvas, engine){
    let scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3(1, 1, 1);
    let camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 3, Math.PI / 6, 6, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);

    let colors = [];
    colors[0] = new BABYLON.Color3.Green;
    colors[1] = new BABYLON.Color3.Red;
    colors[2] = new BABYLON.Color3.Blue;
    colors[3] = new BABYLON.Color3.Red;

    let polyhedron = BABYLON.MeshBuilder.CreatePolyhedron("polyhedron", {faceColors: colors}, scene);

    return scene;
};

var scene3 = createScene3(canvas3, engine3);

engine3.runRenderLoop(function(){
    scene3.render();
});

window.addEventListener("resize", function(){
    engine3.resize();
});
</script>

<canvas id="renderCanvas3"></canvas>

Figure 5. We apply green, red, and blue to different sides of the tetrahedron using an array and the indices of the geometric shape.

See our tutorial on colors here for information on the color4 and color3 class.

FaceUV

The faceUV property allows us to select a specific area to crop from an image, and then apply it to our box. The default value is Vector4(0, 0, 1, 1) which applies the entire image to the faces of the polyhedron.

<script>
var canvas4 = document.getElementById("renderCanvas4");
var engine4 = new BABYLON.Engine(canvas4, true);

function createScene4(canvas, engine){
    let scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3(1, 1, 1);
    let camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 3, Math.PI / 6, 6, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);

    let mat = new BABYLON.StandardMaterial("mat");
    mat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/numbers.jpg")
    mat.diffuseColor = new BABYLON.Color3(0, 1, 0);

    let faceUV = [];
    faceUV[0] = new BABYLON.Vector4(0, 0, 1/6, 3/4);
    faceUV[1] = new BABYLON.Vector4(1/3, 0, 1/6, 3/4);
    faceUV[2] = new BABYLON.Vector4(1/2, 0, 1/3, 3/4);
    faceUV[3] = new BABYLON.Vector4(1/2, 0, 2/3, 3/4);

    let polyhedron = BABYLON.MeshBuilder.CreatePolyhedron("polyhedron", {type: 0, faceUV: faceUV}, scene);
    polyhedron.material = mat;

    return scene;
};

var scene4 = createScene4(canvas4, engine4);

engine4.runRenderLoop(function(){
    scene4.render();
});

window.addEventListener("resize", function(){
    engine4.resize();
});
</script>

<canvas id="renderCanvas4"></canvas>

Figure 6. We apply the texture to the polyhedron so that 0 is on the face with index 0, 1 is on the face with index 1, 2 is on the face with index 2, and 3 is on the face with index 3.

Flat

The flat parameter can be used to give the polyhedron a single global face, in which each side shares a single normal. The flat parameter will ignore the faceColors and faceUV parameters if set to false. The default value is true.

<script>
var canvas6 = document.getElementById("renderCanvas6");
var engine6 = new BABYLON.Engine(canvas6, true);

function createScene6(canvas, engine){
    let scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3(1, 1, 1);
    let camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 3, Math.PI / 6, 6, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);

    let mat = new BABYLON.StandardMaterial("mat");
    mat.diffuseColor = new BABYLON.Color3(0, 1, 0);

    let polyhedron = BABYLON.MeshBuilder.CreatePolyhedron("polyhedron", {flat: false}, scene);
    polyhedron.material = mat;

    return scene;
};

var scene6 = createScene6(canvas6, engine6);

engine6.runRenderLoop(function(){
    scene6.render();
});

window.addEventListener("resize", function(){
    engine6.resize();
});
</script>

<canvas id = renderCanvas6></canvas>

Figure 7. We set the flat property to false.

Updatable

If we want the polyhedra to be able to have its internal geometry changed after creation, we can set the parameter updatable equal to true. The default value is false.

SideOrientation

The sideOrientation property allows us to make our box double-sided. The default value is FRONTSIDE.

The different values for the sideOrientation property are: