Babylon.js 第29章创建自定义网格

码龄4年

关注

原创最新推荐文章于 2026-06-23 16:43:22 发布 1.2k 阅读

Babylon.js 第26章基本的3D网格形状当平面的宽度或高度无法容纳整数个瓦片时，“切割”瓦片并使用部分瓦片填充平面。发生这种情况时，您可以安排零件拼贴的放置位置，可以在平面的一个边缘上，也可以均匀地在两个相对的边缘上。您可以通过在选项中设置。意味着最左边的瓦片列将是整个瓦片，而部分瓦片将在最右边的列中。ntal 以及您希望放置整个图块的位置来执行此操作。阅读详情

创建自定义网格

1、创建

    let mat=new BABYLON.StandardMaterial('mat',scene)
    mat.diffuseTexture=new BABYLON.Texture('../img/9.jpg',scene)
    mat.backFaceCulling=false


    let customMesh=new BABYLON.Mesh('sustom',scene)
    //顶点数据里每3个元素组成一个vector3。indices是vector3的索引
    let positions=[0,0,0,5,0,0,2.5,2.5,0,0,0,-5,-5,0,-5,-2.5,-2.5,-5]
    let indices=[0,1,2,3,4,5]
    let normals=[]//空数组添加法线，法线方向，与光照有影响
    //Color3数组
    let colors=[1,0,0,1,1,0,1,1,1,0,1,1,0,0,1,1,0,1,1,1,0,0,1,0]
    //uv2维数组
    let uvs=[0,1,0,0,0,0,0,1,0,0,0,0]
    //添加法线
    BABYLON.VertexData.ComputeNormals(positions,indices,normals)
    let vertesData=new BABYLON.VertexData()
    vertesData.positions=positions
    vertesData.indices=indices
    //将法线分配给顶点数组
    vertesData.normals=normals
    //添加顶点颜色
    vertesData.colors=colors
    vertesData.uvs=uvs
    //第二个参数表示网格可更新
    vertesData.applyToMesh(customMesh,true)
    customMesh.material=mat

通常，平面的法线是与平面成直角的向量，ComputeNormal使用将位置、索引和法线的数组作为参数的方法在 vertexData 对象上计算法线。

2、更新顶点

获取顶点各种数据

var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
var normals = mesh.getVerticesData(BABYLON.VertexBuffer.NormalKind);
var colors = mesh.getVerticesData(BABYLON.VertexBuffer.ColorKind);
var uvs = mesh.getVerticesData(BABYLON.VertexBuffer.UVKind);

var indices = mesh.getIndices();

更新数据，确保网格已设置为在创建时可更新。然后这只是改变位置、法线、颜色和 uvs 数组中的任何数据以适应项目的问题，然后更新顶点数据

mesh.updateVerticesData(BABYLON.VertexBuffer.PositionKind, positions);
mesh.updateVerticesData(BABYLON.VertexBuffer.NormalKind, normals);
mesh.updateVerticesData(BABYLON.VertexBuffer.ColorKind, colors);
mesh.updateVerticesData(BABYLON.VertexBuffer.UVKind, uvs);

vertexData.applyToMesh(customMesh, true);

创建网格时，会平滑地创建每个面的法线以匹配预期的形状，例如球体。可以使用convertToFlatShadedMesh 使法线变平以使网格呈平坦着色。

sphere.convertToFlatShadedMesh()

还可以使用set方法添加数据

mesh.setVerticesData(BABYLON.VertexBuffer.ColorKind, colors);

示例：

	var sphere = BABYLON.MeshBuilder.CreateSphere("sphere",
        {diameter:10, updatable: true}, scene);

    var colors = sphere.getVerticesData(BABYLON.VertexBuffer.ColorKind);
    //如果网格颜色不存在
    if(!colors) {
        colors = [];
        var positions = sphere.getVerticesData(BABYLON.VertexBuffer.PositionKind);
        for(var p = 0; p < positions.length / 3; p++) {
            colors.push(Math.random(), Math.random(), Math.random(), 1);
        }
    }
    //设置网格颜色
    sphere.setVerticesData(BABYLON.VertexBuffer.ColorKind, colors);

3、顶点法线

网格的每个三角形面都包含三个顶点。除了一个位置，每个顶点还有另一个重要的向量3，称为法线。着色器代码使用这些顶点法线来计算网格的光照方式。与数学法线不同，没有必要将它们设置为直角，而对于诸如球体之类的弯曲形状，它们可能不是。在球体的情况下，它们被设置为球体表面的数学法线，而不是创建球体的网格平面的数学法线。

首先，顶点法线被计算为小平面的数学法线。然后，这取决于您是将小平面视为平面还是曲线的一部分。对于平面，顶点法线保留为数学法线。为了在光线下观察时增强曲线，其中三角形面共享具有相同位置的顶点，每个共享顶点法线被重新计算为共享顶点法线的数学法线的平均值。

共享法线意味着着色器生成一个看起来更圆的球体，因为顶点法线是球体表面的数学法线。

应用该功能converToFlatShadedMesh会显示构成球体的各个面。对于平面阴影球体，每个面的法线是面的数学法线。