Chapter 02Discs (Regular Polygons)

Using the CreateDisc method of the MeshBuilder class, we can make discs and other flat shapes.

let disc = BABYLON.MeshBuilder.CreateDisc("name", {options}, scene);

The first argument of CreateDisc() is a String that we can use to retrieve the entire disc and data about the disc later. The second argument is an object that specifies various properties of the disc. The last argument is a reference to the scene in which the sphere 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 / 2, Math.PI / 2, 1.5, 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 disc = BABYLON.MeshBuilder.CreateDisc("disc", {}, scene);
    disc.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 Disc.

Properties

Radius

The radius property can be used to specify the size of the disc from the center to the perimeter of the disc. The default value is 0.5.

<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 / 2, Math.PI / 2, 5.5, 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 disc = BABYLON.MeshBuilder.CreateDisc("disc", {radius: 2}, scene);
    disc.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. The radius property is set to 2.

Tessellation

The tessellation property specifies the number of sides the disc has. The more sides the disc has, the more circular it is. The default value is 64.

<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 / 2, Math.PI / 2, 1.5, 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 disc = BABYLON.MeshBuilder.CreateDisc("disc", {tessellation: 3}, scene);
    disc.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. The tessellation property is set to 3, which turns our disc into a triangle.

Arc

The arc property allows us to decide how much of our disc is visible in the scene. The default value is 1. We can use any value between 0 and 1.

<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 / 2, Math.PI / 2, 5, 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 disc1 = BABYLON.MeshBuilder.CreateDisc("disc1", {arc: 0.25}, scene);
    disc1.material = mat;
    disc1.position = new BABYLON.Vector3(-3, 0, 0);

    let disc2 = BABYLON.MeshBuilder.CreateDisc("disc2", {arc: 0.5}, scene);
    disc2.material = mat;
    disc2.position = new BABYLON.Vector3(-1, 0, 0);
    
    let disc3 = BABYLON.MeshBuilder.CreateDisc("disc3", {arc: 0.75}, scene);
    disc3.material = mat;
    disc3.position = new BABYLON.Vector3(1, 0, 0);
    
    let disc4 = BABYLON.MeshBuilder.CreateDisc("disc4", {arc: 1}, scene);
    disc4.material = mat;
    disc4.position = new BABYLON.Vector3(3, 0, 0);
    
    return scene;
}

var scene3 = createScene3(canvas3, engine3);

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

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

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

Figure 4. From left to right, the values of the arc property of these discs are 0.25, 0.5, 0.75, and 1.

Updatable

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

SideOrientation

The sideOrientation property allows us to change what part of the disc is visible. The default value is FRONTSIDE, which only makes the front of the disc visible in the scene.

The different values for the sideOrientation property are:

<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 / 2, Math.PI / 2, 1.5, 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 disc = BABYLON.MeshBuilder.CreateDisc("disc", {sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene);
    disc.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 5. The disc's sideOrientation is set to DOUBLESIDE.