这篇文章讨论如何在基于Babylon.js的WebGL场景中，实现多个简单卡牌类对象的显示、选择、分组、排序，同时建立一套实用的3D场景代码框架。由于作者美工能力有限，所以示例场景视觉效果可能欠佳，本文的重点在于对相关技术的探讨。
因为文章比较长，读者可以考虑将网页导出为mhtml格式，使用Word浏览。Chrome浏览器导出mhtml文件的方法见末尾。
一、显示效果：
1、访问https://ljzc002.github.io/CardSimulate/HTML/TEST2.html查看“卡牌模拟页面”：
场景中间是三个作为参照物的小球，视口平面的中间是一个用Babylon.js GUI制作的准星，默认鼠标与准星锁定在一起，直接移动鼠标即可改变相机视角，使用WASD Shift 空格键可以控制相机前、左、后、右、下、上运动（可能将Ctrl键设为向下更符合传统，但是没有找到禁用浏览器Ctrl+s快捷键的方法，只好用Shift代替）。因为光标被锁定，将这种浏览状态命名为“first_lock”。
2、按下Alt键，75张卡片通过动画移入相机视野，同时相机的位置被固定（但仍可以通过拖动鼠标改变视角）：
点击右侧的“向上两行”和“向下两行”按钮可以上下滚动卡片，再次按下Alt键将隐藏卡片，同时恢复相机的移动和光标的锁定。因为这种浏览状态主要用来点选场景中的物体，将它命名为“first_pick”。
3、鼠标左键单击一张卡片，卡片将处于“选中状态”（绿色边缘），再次左键单击处于选中状态的卡片，卡片将被放大拉近显示，再左键单击将恢复原位：
执行动画时会禁用用户的控制，完全由动画控制视角，所以将这种浏览状态命名为“first_ani”。
4、模仿Windows的文件多选编写了卡片多选功能，按下Ctrl时可以点选多个卡片，按下Shift时可以选取首尾之间的所有卡片：
5、选中若干张卡片后，按1-5键可以将被选中的卡片编为1-5队，被编队的卡片将按编队顺序显示在最高处，同时编队的前面会显示队号标记：
6、在first_pick状态可以使用上下左右方向键进行场景漫游，可以看到场景中的所有对象：
二、代码实现：
1、文件结构：
CardSimulate工程的文件结构如下图所示：
其中LIB目录下是从网上下载的代码库
babylon.32.all.maxs.js是Babylon.js引擎库
earcut.dev.js是一个Babylon.js扩展，其功能是在网格上挖洞
stat.js是用来显示帧数的代码
MYLIB是自己编写的代码库
Events.js是一些用来处理事件的方法
FileText.js是与文件处理相关的代码
newland.js是自己编写的一些Babylon.js辅助类
View.js是html视图的一些相关方法
PAGE是直接操纵这个页面（WebGL场景）的代码库
Character.js是场景中出现的各种对象的类（比如卡牌网格、相机网格）
Control20180312.js是用来处理鼠标键盘输入的代码
DrawCard.js是用来绘制卡牌的代码
FullUI.js是用来绘制全局（全屏）UI的代码
Game.js是游戏类，存储用来调度整个场景的信息
HandleCard.js是用来处理已经绘制出的卡牌的代码，后期考虑和DrawCard.js整合在一起
HandleCard2.js是一个分枝修改版
Moves.js是运动计算代码
tab_carddata.js里是卡牌种类信息
tab_somedata.js里是其他辅助信息
2、代码入口与场景初始化：
A、代码由TEST2.html开始执行，其中一部分和前面几篇文章用到的相似：