基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码

2020-04-25 07:43:31易采站长站整理

创建 3D 模型

在 3D 建模文档中了解到,HT 通过一个个三角形来组合模型。

首先,先将网络上查找到的街机模型进行拆分,将其中的各个模块拆分成三角形面:

如图所示,将0所在位置设置为原点(0,0,0),我们打开画图工具根据标尺大概估计出每个坐标相对原点的位置,将计算好的坐标数组传入 vs 中,同时在is顶点索引坐标中将每个三角图形的组合传入其中:


ht.Default.setShape3dModel('damBoard', { // 为新模型起名
  vs: [
    0, 0, 0, //0
    0.23, 0, 0,
    0.23, 0.27, 0,
    0.27, 0.28, 0, //3
    0.27, 0.32, 0,
    0.20, 0.33, 0,
    0.18, 0.51, 0, // 6
    0.27, 0.57, 0,
    0.27, 0.655, 0,
    0.20, 0.67, 0, // 9
    0, 0.535, 0
  ],
  is: [
    0, 1, 2,
    0, 2, 5,
    2, 3, 4,
    4, 2, 5,
    5, 0, 10,
    10, 5, 6,
    6, 7, 8,
    8, 6, 9,
    9, 10, 6
  ]});

与 2D 一样,我们创建一个 ht.Node() 的基础图元,类型设置为我们新注册的3D模型名称:


dataModel = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dataModel);
g3d.addToDOM();

var node = new ht.Node();
node.s({
  'shape3d': 'damBoard',
  'shape3d.reverse.flip': true,
  '3d.movable': false,
  '3d.editable': false,
  '3d.selectable': false
});
node.p3([0, 20, 0]);
node.s3([100, 100, 100]);
dataModel.add(node);

已经有个侧边了,我们可以将坐标系延z轴移动一定距离后得到另一个侧边的坐标数组同时再根据没个面的不同,分别设置 is 数组,将所有的面组合起来后,我们就将初步得到一个街机模型:


vs: [
  0, 0, 0, //0
  0.23, 0, 0,
  0.23, 0.27, 0,
  0.27, 0.28, 0, //3
  0.27, 0.32, 0,
  0.20, 0.33, 0,
  0.18, 0.51, 0, // 6
  0.27, 0.57, 0,
  0.27, 0.655, 0,
  0.20, 0.67, 0, // 9
  0, 0.535, 0,

  0, 0, 0.4, //11
  0.23, 0, 0.4,
  0.23, 0.27, 0.4,
  0.27, 0.28, 0.4, //14
  0.27, 0.32, 0.4,
  0.20, 0.33, 0.4,
  0.18, 0.51, 0.4, // 17
  0.27, 0.57, 0.4,
  0.27, 0.655, 0.4,
  0.20, 0.67, 0.4, // 20
  0, 0.535, 0.4,
]

模型不够美观,我们可以给模型的每个面进行贴图,参考文档中对模型 uv 参数的说明,我们可以知道 uv 对应的是模型中每个顶点在图片中的偏移量,图片的左上角为(0, 0)右下角为(1,1), 以此我们可以为每个面设置贴图。如: