CODEWITHSUNDEEP
babylonjs
SleepyFox89
SleepyFox89

Reputation: 1399

How to Create a Filled Shape from Custom Points in Babylon JS

I feel like the answer to this question is buried somewhere in the documentation but I am struggling to find it.

I simply want to define some custom points in an array to create lines (I have done this) then, since they are connected, fill the inside of the lines with colour and essentially have a single plane-like object (that, preferrably, I can transform and texture as is typical).

The outline shape has been defined like this (http://www.babylonjs-playground.com/#I22AB#1);

var createScene = function()
{
    // Create Scene
    var scene = new BABYLON.Scene(engine);

    // Create Camera
    var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 10, 0), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);

    // Create Points
    var x = 0;
    var z = 0;
    var points = [
        new BABYLON.Vector3(x - 1, 0, z + 1.5),
        new BABYLON.Vector3(x + 1, 0, z + 1.5),
        new BABYLON.Vector3(x + 1.5, 0, z),
        new BABYLON.Vector3(x + 1, 0, z - 1.5),
        new BABYLON.Vector3(x - 1, 0, z - 1.5),
        new BABYLON.Vector3(x - 1.5, 0, z),
        new BABYLON.Vector3(x - 1, 0, z + 1.5)
    ];

    // Create Hex
    var hex = BABYLON.Mesh.CreateLines("hex", points, scene);
    hex.color = BABYLON.Color3.Black();

    /* Question
        what can I do now to create a custom 2D shape that
        is a single filled plane within these defined points?
    */

    // Done
    return scene;
};

Thanks

Upvotes: 0

Views: 2117

Answers (1)

Svit
Svit

Reputation: 311

Ribbons can solve your problem. Essentially a ribbon allows you to define paths and triangles will be drawn in between those paths to create a mesh. You already have a path defined, you named it points.

Adding the following lines in your playground did the trick.

var filled_hex = BABYLON.Mesh.CreateRibbon("hex", [points], true, false, 0, scene);
filled_hex.color = BABYLON.Color3.Black();

Here is your updated playground.

Upvotes: 2

Related Questions