three.js的地图3d应用

第一次学习使用three.js开发地图，实现地图3D功能应用，记录一下这个过程。
一、了解threejs和WEBGL的关系
WEBGL逻辑复杂难懂是浏览器实现三维的效果的一个定义规范，所以threejs是用底层WEBGL封装的一个应用，我们这样就可以直接使用threejs来实现浏览器三维场景。
二、threejs的三大模块
场景（scene）、相机（camera）、渲染器（renderers）。
1. 场景（scene）
想要显示三维需要有场景，也就是有个容器来容纳它，直接实例化THREE.Scene()，
let scene = new THREE.Scene();
如果要往场景中添加东西，如图像、线条等，scene.add(name);
2. 相机（camera）
相机就是要从哪个角度显示出景象来，相机也有好多种，其中一个是透视相机 （THREE.PerspectiveCamera），这个相机可以看到远近不同的景色，有四个参数分别是fov ：摄像机视锥体垂直视野角度；aspect： 摄像机视锥体长宽比；near ：摄像机视锥体近端面；far：摄像机视锥体远端面，那么实例化相机如下，参数是默认值，
let camera = new THREE.PerspectiveCamera(50,1,0.1,2000);
3. 渲染器（renderers）
渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制,渲染器也有好几个，WebGLRenderer使用 WebGL 技术；CanvasRenderer使用 Canvas 2D 技术；CSS2DRenderer和CSS3DRenderer则是使用 CSS 技术；我主要使用THREE.WEBGLRenderer();代码如下：
let renderer = new THREE.WEBGLRenderer();
//设置一下渲染器的宽高，这样渲染出来适应场景
renderer.setSize(window.innerWidth,window.innerHeight);
//把渲染的节点元素添加到页面中
document.body.appendChild(renderer.domElement);

三、图像的形式
网格（mesh）、几何体（Geometry）、网状基础材料（MeshBasicMaterial）、线状基础材料（LineBasicMaterial）
THREE.mesh(Geometry，MeshBasicMaterial) //相当于包装工一样，把图像，材料等结合到一块。代码如下：
//实例化立体几何图形,参数为长宽高
let geometry = new THREE.BoxGeometry(5,5,5);
//实例化一个网状材料，添加一个颜色，注意颜色一定要是16进制的形式表示
let material = new THREE.MeshBasicMaterial({color：0x000f0});
let mesh =new THREE.Mesh(geometry ，material ) ；
//因为物体添加到场景时，默认的坐标是（0,0,0），这样导致相机和物体就在一个点了，
会看不到物体，所以相机位置要移动一下
camera.position.z=10;
//场景添加
scene.add(mesh );
//渲染
renderer.render（scene,camera）;
结果是

//实例化一个平面几何图形
let geometry = new THREE.Geometry();
//线状材料也是这样的
let material = new THREE.LineBasicMaterial({color：0x000f0});
//定义几何图的顶点矢量坐标
geometry.vertices.push(new THREE.Vector3( 10, 0, 0) );
geometry.vertices.push(new THREE.Vector3( 0, 20, 0) );
geometry.vertices.push(new THREE.Vector3( 0, 0, 10) );
let line =new THREE.Line(geometry ，material ) ；
camera.position.z=10;
//场景添加
scene.add(line );
//渲染
renderer.render（scene,camera）;
结果是

后期遇到问题会继续分享