使用Three.JS以及A*寻路算法制作自动寻路场景（五）使用多view绘图实现小地图功能

本节内容：

1. 使用多view渲染同一场景方法简介
2. 套用此方法，实现小地图功能，完成本DEMO

本节最终效果图：

使用多view渲染同一场景方法简介

主要参考的three.js官方案例（https://threejs.org/examples/?q=orb#webgl_multiple_views），效果如下：

查看本案例源代码，要实现多view渲染，需要定义一个views数组，存放每个view的camera相关属性，并对每个camera分别进行初始化，并在渲染函数render()中对每个camera分别进行渲染，节选关键代码如下：

var views = [
				{
					left: 0,
					top: 0,
					width: 0.5,
					height: 1.0,
					background: new THREE.Color( 0.5, 0.5, 0.7 ),
					eye: [ 0, 300, 1800 ],
					up: [ 0, 1, 0 ],
					fov: 30,
					updateCamera: function ( camera, scene, mouseX, mouseY ) {
					  camera.position.x += mouseX * 0.05;
					  camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), -2000 );
					  camera.lookAt( scene.position );
					}
				},
				{
					left: 0.5,
					top: 0.5,
					width: 0.5,
					height: 0.5,
					background: new THREE.Color( 0.7, 0.5, 0.5 ),
					eye: [ 0, 1800, 0 ],
					up: [ 0, 0, 1 ],
					fov: 45,
					updateCamera: function ( camera, scene, mouseX, mouseY ) {
					  camera.position.x -= mouseX * 0.05;
					  camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), -2000 );
					  camera.lookAt( camera.position.clone().setY( 0 ) );
					}
				},
				{
					left: 0.5,
					top: 0,
					width: 0.5,
					height: 0.5,
					background: new THREE.Color( 0.5, 0.7, 0.7 ),
					eye: [ 1400, 800, 1400 ],
					up: [ 0, 1, 0 ],
					fov: 60,
					updateCamera: function ( camera, scene, mouseX, mouseY ) {
					  camera.position.y -= mouseX * 0.05;
					  camera.position.y = Math.max( Math.min( camera.position.y, 1600 ), -1600 );
					  camera.lookAt( scene.position );
					}
				}
			];
for (var ii =  0; ii < views.length; ++ii ) {
					var view = views[ii];
					var camera = new THREE.PerspectiveCamera( view.fov, window.innerWidth / window.innerHeight, 1, 10000 );
					camera.position.fromArray( view.eye );
					camera.up.fromArray( view.up );
					view.camera = camera;
				}
for ( var ii = 0; ii < views.length; ++ii ) {
					var view = views[ii];
					var camera = view.camera;
					view.updateCamera( camera, scene, mouseX, mouseY );
					var left   = Math.floor( windowWidth  * view.left );
					var top    = Math.floor( windowHeight * view.top );
					var width  = Math.floor( windowWidth  * view.width );
					var height = Math.floor( windowHeight * view.height );
					renderer.setViewport( left, top, width, height );
					renderer.setScissor( left, top, width, height );
					renderer.setScissorTest( true );
					renderer.setClearColor( view.background );
					camera.aspect = width / height;
					camera.updateProjectionMatrix();
					renderer.render( scene, camera );
				}

套用此方法，实现小地图功能，完成本DEMO

首先，我们需要定义一个Views数组，用来存放本demo需要用到的两个view：

var views = [
				{
					left: 0,
					top: 0,
					width: 1,
					eye: [ 0, 200, 250 ],
					up: [ 0, 1, 0 ],
					fov: 45,
					updateCamera: function ( camera, scene ) {
					  camera.lookAt( scene.position );
					}
				},
				{
					left: 0.75,
					top: 0.7,
					width: 0.3,
					height: 0.3,
					background: new THREE.Color( 0.7, 0.5, 0.5 ),
					eye: [ 0, 200, 0 ],
					up: [ 0, 1, 0 ],
					fov: 60,
					updateCamera: function ( camera, scene) {
					  camera.lookAt( camera.position.clone().setY( 0 ) );
					}
				},
			];

其中views[0]代表主场景，而v