先上一波完成效果图，由于是自学，在此仅仅分享自己的一些见解，有不当之处还请大家指教！
1.DEMO简介
本DEMO使用Three.js作为主要开发工具，开发过程主要分为两个部分：
首先是使用Three.js实现A*寻路算法，效果图如下：
具体功能：
1.自动生成地图
2.根据选定开始及结束位置计算路线（涉及构造器，raycaster的使用）
3.播放寻路动画（requestAnimationFrame动画）
4.小地图显示俯视图（多view显示渲染效果）
其次是加载外部场景以及人物动画，完成开头所示的DEMO效果
具体功能：
1.max格式文件转换与加载（附错误排除）
扫描二维码关注公众号，回复：
2287359 查看本文章
2.Three.group实现多模型组合旋转
2.环境部署
- 最新版Three.js库，下载地址：https://threejs.org/ 目前版本R85版，本次制作DEMO需要用到:three.js（核心类库）Detector.js（判断浏览器是否支持Three.js）Stats.js（性能监控插件）OrbitControls.js（实现漫游视图）；
- 3dsMax2018或者近期版本，用于导出3D场景模型以及人物模型；
- Json Exporter 一款从3dsMax导出模型再导入ThreeJs的插件，提供了3dsMax插件和js插件供双端使用，bug较少，十分推荐。下载地址：http://www.cgdev.net/json/download.php；
- astar.js 利用javascript封装的A*寻路算法，下载地址 http://github.com/bgrins/javascript-astar；
- 代码书写IDE，使用Hbuilder，调试使用Chrome。
3.初始化Three.js
网络上相关文章非常多，在此不再赘述，直接上源码：
<!--制作https://github.com/BluFis/
转载请注明作者
2018.07.19-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>A*寻路算法(threeJS)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="js/three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/stats.js"></script>
<script src="js/OrbitControls.js"></script>
<script type="text/javascript" src="js/astar.js" ></script>
<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
<script>
var container, scene, camera, renderer, controls;
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
var windowWidth, windowHeight;
threeStart();
function threeStart() {
initThree();
initScene();
initCamera();
initLight();
initControl();
initStatus();
renderer.clear();
animate();
}
function initThree(){
if ( Detector.webgl )
renderer = new THREE.WebGLRenderer( {antialias:true} );
else
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );
}
function initCamera(){
camera = new THREE.PerspectiveCamera( VIEW_ANGLE , ASPECT, NEAR, FAR);
camera.position.set(0,200,250);
camera.lookAt(scene.position);
}
function initScene(){
scene = new THREE.Scene();
}
function initLight(){
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
}
function initControl(){
controls = new THREE.OrbitControls( camera, renderer.domElement );
}
function initStatus(){
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
}
function updateSize() {
if ( windowWidth != window.innerWidth || windowHeight != window.innerHeight ) {
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
renderer.setSize ( windowWidth, windowHeight );
}
}
function animate() {
render();
controls.update();
stats.update();
requestAnimationFrame( animate );
}
function render() {
updateSize();
renderer.render( scene, camera );
}
</script>
</body>
</html>