Chapter 02Planes

Using the CreatePlane method in the MeshBuilder class, we can make 2-dimensional planes.

let plane = BABYLON.MeshBuilder.CreatePlane("name", {options}, scene);

The first argument of CreatePlane() is a String that we can use to retrieve data about the plane and the entire plane mesh later. The second argument is an object that specifies various properties of the plane. The last argument is a reference to the scene in which the plane 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, 2, 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 plane = BABYLON.MeshBuilder.CreatePlane("plane", {sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene);
    plane.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 plane.

Properties

Size

The size parameter can be used to specify the length of the sides of the plane. The default value is 1.

Height and Width

To create a plane whose sides have different lengths, we can use the height and width parameters, which default to the value of the size parameter if not included.

<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 / 2, Math.PI / 2, 4, 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 plane = BABYLON.MeshBuilder.CreatePlane("plane", {height: 3, width: 5}, scene);
    plane.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 2. We set the height property to 3 and the width property to 5.

Updatable

If we want the mesh 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.

SourcePlane

The sourcePlane parameter is an instance of the Plane class. When the createPlane method utilizes the sourcePlane parameter, it creates a 3-dimensional mesh with the same geometry as the plane object.

<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, 2, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);
        let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);
        let abstractPlane = new BABYLON.Plane.FromPositionAndNormal(new BABYLON.Vector3(1, 1, 1), new BABYLON.Vector3(-1, 1, -1));
        
        let mat = new BABYLON.StandardMaterial("mat", scene);
        mat.diffuseColor = new BABYLON.Color3(0, 1, 0);
        
        let plane = BABYLON.MeshBuilder.CreatePlane("plane", {sideOrientation: BABYLON.Mesh.DOUBLESIDE, sourcePlane: abstractPlane}, scene);
        plane.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 3. We create a plane using the sourcePlane property.

let abstractPlane = new BABYLON.Plane.FromPositionAndNormal(new BABYLON.Vector3(1, 1, 1), new BABYLON.Vector3(-1, 1, -1));

let plane = BABYLON.MeshBuilder.CreatePlane("plane", {sideOrientation: BABYLON.Mesh.DOUBLESIDE, sourcePlane: abstractPlane}, scene);

Figure 3 above creates a plane using the FromPositionAndNormal method in the plane class. The FromPositionAndNormal method creates an instance of a plane class from an origin point and a normal. The origin of a mesh is in the center of the mesh.

Side Orientation

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

The different values for the sideOrientation property are:

<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, 2, 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 plane = BABYLON.MeshBuilder.CreatePlane("plane", {sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene);
        plane.material = mat;
        
        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. We set the plane's sideOrientation to DOUBLESIDE.

FrontUVs and BackUVs

If the mesh is double-sided, we can choose what parts of a texture image to crop and place to the front and back sides of our mesh with the frontUVs and backUVs parameters, respectively. The default value is Vector4(0, 0, 1, 1) for both, which places the entire image on each respective side.

<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, 2, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);

    let front = new BABYLON.Vector4(0, 0, 1/6, 1);
    let back = new BABYLON.Vector4(1/3, 0, 1/6, 1);

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

    let plane = BABYLON.MeshBuilder.CreatePlane("plane", {sideOrientation: BABYLON.Mesh.DOUBLESIDE, frontUVs: front, backUVs: back}, scene);
    plane.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 5. We apply 0 to the front of the plane and 1 to the back of the plane