用巴比伦js创建凹面多边形的最简单方法是什么？

Question

在3D空间的任何给定平面中的凹面多边形。出于争论的原因，我想画出以下内容：

（0.9，0.9），（0.9，1），（0，1），（0，0），（1，0），（1，0.9），（0.9，0.9）

（这看起来像是一个正方形，右上耳被切掉了）

网格生成器

Bab JS具有网格生成器

https://doc.babylonjs.com/how_to/parametric_shapes#non-regular-polygon

它只能在XZ平面上工作。

  

所有形状和孔的矢量均为Vector3，应在XoZ中   平面，即形式为BABYLON.Vector3（x，0，z）并在计数器中   顺时针顺序；

所以我可以立即放弃它作为选择。

丝带

据我所知，只能用丝带this is the tutorial来完成。

如果我尝试一条路径

// paths
var path = [];
path.push( new BABYLON.Vector3(0.3, 0.3, 0) );
path.push( new BABYLON.Vector3(0.3, 1, 0) );
path.push( new BABYLON.Vector3(-1, 1, 0) );
path.push( new BABYLON.Vector3(-1, -1, 0) );
path.push( new BABYLON.Vector3(1, -1, 0) );
path.push( new BABYLON.Vector3(1, 0.3, 0) );
path.push( new BABYLON.Vector3(0.3, 0.3, 0) );

// ribbon
var ribbon = BABYLON.MeshBuilder.CreateRibbon("ribbon", 
{pathArray: [path], closeArray: false }, scene);
ribbon.material = mat;

这是结果。如果我删除了最后一点（好像没有明确关闭路径），则看起来更糟。

请注意，颜色不正确，因为颜色有些扭曲，形状相似但也不正确，右上耳也不是正方形。

我可以尝试两条这样的路径：

// paths    
var path1;
var path2;
path1 = [];
path2 = [];
path1.push( new BABYLON.Vector3(0.3, 0.3, 0) );
path1.push( new BABYLON.Vector3(0.3, 1, 0) );
path1.push( new BABYLON.Vector3(-1, 1, 0) );

path2.push( new BABYLON.Vector3(1, 0.3, 0) );
path2.push( new BABYLON.Vector3(1, -1, 0) );
path2.push( new BABYLON.Vector3(-1, -1, 0) );

// ribbon
var ribbon = BABYLON.MeshBuilder.CreateRibbon("ribbon", 
{pathArray: [path1, path2], closeArray: false }, scene);
ribbon.material = mat;

我不包含图片，因为它与另一张图片相似并且完全错误。

我应该注意到，凹面多边形在形状和颜色上都可以很好地与两条路径相同，如我后面的示例所示。

如果我能发表我的个人观点，我可以肯定的是，即使顶点之间的所有连接都可以（即使将材质的线框设置为true），开发人员也不知道世界到底在发生什么。

我将凸多边形划分为凹形部分，但我使用了具有方向性的纹理，而多边形看起来就像一个难题，每个部分的每个纹理都可能朝着不同的方向看

这是一个完整的示例，可以在www.babylonjs-playground.com中使用。可以用来玩不同的选项，并确保没有任何作用。

var createScene = function() {
    // scene
    var scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3(0.8, 0.8, 0.8);
    var camera = new BABYLON.ArcRotateCamera("Camera", 3 *Math.PI / 2, Math.PI / 2, 20, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, false);

    // lights
    var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0.3, 1, 0), scene);
    light.groundColor = new BABYLON.Color3(0.2, 0.2, 0.5);
    light.intensity = 0.6;
    var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(-20, 0, -20), scene);
    light2.diffuse = BABYLON.Color3.White();
    light2.specular = BABYLON.Color3.Green();
    light2.intensity = 0.6;

    // material
    var mat = new BABYLON.StandardMaterial("mat1", scene);
    mat.alpha = 1.0;
    mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
    mat.backFaceCulling = false;
    mat.wireframe = false;

    // paths    
    var path1;
    var path2;
    path1 = [];
    path2 = [];
    path1.push( new BABYLON.Vector3(0.3, 0.3, 0) );
    path1.push( new BABYLON.Vector3(0.3, 1, 0) );
    path1.push( new BABYLON.Vector3(-1, 1, 0) );

    path2.push( new BABYLON.Vector3(1, 0.3, 0) );
    path2.push( new BABYLON.Vector3(1, -1, 0) );
    path2.push( new BABYLON.Vector3(-1, -1, 0) );

    // ribbon
    var ribbon = BABYLON.MeshBuilder.CreateRibbon("ribbon", 
    {pathArray: [path1, path2], closeArray: false }, scene);
    ribbon.material = mat;

    return scene;
}