如何用Babylon.js和recast.js打造RTS游戏中的3D单位控制网页实验？
摘要：一、运行效果 1、建立一幅具有地形起伏和不同地貌纹理的地图： 地图中间为凹陷的河道，两角为突出的高地，高地和低地之间以斜坡通道相连。 水下为沙土材质，沙土材质网格贴合地形，河流材质网格则保持水平。 2、在地图上随机放置土黄色小方块表示可控单
一、运行效果
1、建立一幅具有地形起伏和不同地貌纹理的地图：
地图中间为凹陷的河道，两角为突出的高地，高地和低地之间以斜坡通道相连。
水下为沙土材质，沙土材质网格贴合地形，河流材质网格则保持水平。
2、在地图上随机放置土黄色小方块表示可控单位
默认控制为自由相机——鼠标左键拖拽改变视角，上下左右键进行移动；按v键切换为RTS式控制，视角锁定为45度俯视，按wasd键水平移动相机，鼠标滚轮调整相机缩放。
3、左键拖拽鼠标产生选框：
松开鼠标后，被选中的单位显示为白色
4、右键单击地图，选中单位开始向目标地点寻路
白色虚线为单位的预计路径，可以看到单位贴合地面运动，经由坡道跨越河流，而非直线飞跃。（在长距离导航时发现部分单位的预计路径没有显示，因时间有限尚未仔细调试）
可以先后为多组单位指定不同的目的地，单位在相遇时会自动绕开对方继续前进
5、鼠标左键单击也可以选中单位
以上代码可从https://github.com/ljzc002/ControlRTS 下载，项目使用传统html引用css、js形式构建，建议读者具有Babylon.js基础知识以及少许ES6知识。
项目结构如下：
二、实现地图编辑
createmap2.html是地图编辑程序的入口文件，推荐阅读https://www.cnblogs.com/ljzc002/p/11105496.html了解在WebGL中建立地形的一些方法，本项目用到了其中的一些思路，这里只介绍不同的地方，重复的部分则不再赘述。地图编辑与RTS控制没有直接关系，对地图编辑不感兴趣的读者可以直接跳到下一章节。
1、入口html中生成地形的代码：
1 var ground1=new FrameGround();//定义在FrameGround2.js中的“地面类”，负责管理地面的纹理坐标和顶点位置
2 var obj_p={
3 name:"ground1",
4 segs_x:segs_x,
5 segs_z:segs_z,
6 size_per_x:size_per_x,
7 size_per_z:size_per_z,
8 mat:"mat_grass",
9 };
10 ground1.init(obj_p);
11 //ground1.TransVertexGradientlyByDistance(new BABYLON.Vector3(0,0,-50),30,[[0,14,15],[15,4,5],[30,0,1]]);
12 obj_ground["ground1"]=ground1;
13
14 cri();//这是写在command.js文件中的一些全局方法的简写，比如“cri”是全局方法command.RefreshisInArea的简写，
//用来在程序运行时引入额外的代码，这里默认引入的是additionalscript.js，其中包含判断范围的代码。