使用Three.JS以及A*寻路算法制作自动寻路场景（一）DEMO简介及环境部署

先上一波完成效果图，由于是自学，在此仅仅分享自己的一些见解，有不当之处还请大家指教！

---

---

1.DEMO简介

本DEMO使用Three.js作为主要开发工具，开发过程主要分为两个部分：

首先是使用Three.js实现A*寻路算法，效果图如下：

具体功能：

1.自动生成地图

2.根据选定开始及结束位置计算路线（涉及构造器，raycaster的使用）

3.播放寻路动画（requestAnimationFrame动画）

4.小地图显示俯视图（多view显示渲染效果）

其次是加载外部场景以及人物动画，完成开头所示的DEMO效果

具体功能：

1.max格式文件转换与加载（附错误排除）

2.Three.group实现多模型组合旋转

2.环境部署

1. 最新版Three.js库，下载地址：https://threejs.org/ 目前版本R85版，本次制作DEMO需要用到:three.js（核心类库）Detector.js（判断浏览器是否支持Three.js）Stats.js（性能监控插件）OrbitControls.js（实现漫游视图）；
2. 3dsMax2018或者近期版本，用于导出3D场景模型以及人物模型；
3. Json Exporter 一款从3dsMax导出模型再导入ThreeJs的插件，提供了3dsMax插件和js插件供双端使用，bug较少，十分推荐。下载地址：http://www.cgdev.net/json/download.php；
4. astar.js 利用javascript封装的A*寻路算法，下载地址 http://github.com/bgrins/javascript-astar；
5. 代码书写IDE，使用Hbuilder，调试使用Chrome。

3.初始化Three.js

网络上相关文章非常多，在此不再赘述，直接上源码：

源码下载地址：https://github.com/BluFis/Threejs-initial

下一节内容：使用Three.JS以及A*寻路算法制作自动寻路场景（二）随机地图生成