目录
创建自定义网格
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
会显示构成球体的各个面。对于平面阴影球体,每个面的法线是面的数学法线。