three project
可以引入模型的
three.js画地图，可以显示出各个国家在地图的轮廓
-
使用到的插件 three.js
OrbitControls.js
threeBSP.js -
基础知识
基础知识 需要知道基本的概念：场景 照相机 灯光 渲染器
获取到/data/world1.json世界地图的基本数据，使用ExtrudeGeometry几个体绘制出地图的基本轮廓，至于地图的颜色是否倾斜，就可以根据自己实际需求进行设置
我们想在地图上画出国家的名称：用到的是TextGeometry,需要注意的是如果是中文显示需要另外load一下js/three/MicrosoftYaHei_Regular.json这个文件
在地图上面显示点和线的时候：几何体都可以，目前这里面用倒的是SphereGeometry
如果想要检测鼠标移动到哪儿了：利用射线Raycaster进行碰撞检测
分部解析
- 阴影 render中告知需要有阴影:renderer.shadowMapEnabled=true 然后需要定义哪个物体投射阴影，哪个物体接收阴影：plane.receiveShadow=true cube.castShadow=true 告知哪个光源可以产生阴影：spotLight.castShdow=true
- 动画 用requestAnimationFrame(),利用这个方法我们可以旋转方块
function renderScene(){
cube.rotation.x+=0.2
cube.rotation.y+=0.2
cube.rotation.z+=0.2
requestAnimationFrame(renderScene)
renderer.render(scene.camera)
}
我们可以通过Stat监控每秒显示的帧数FPS
- 场景
Scene包含全部需要的东西
scend.add()将物体添加到场景中 - 相机 正投影 物体不管远近都是一样的大小 new THREE.PersepectiveCamera() 透视 近大远小 尽量用这种 new THREE.OrthographicCamera() 我们的相机一般指向中心点 camera.lookAt(new THREE.Vector3(x,y,z))
- 光源 AmbientLight 基础光源 不能产生阴影 不用设置位置 不能单独使用，需要和其他光源合并使用 主要为了给物体添加光源颜色 PointLight 点光源 不会产生阴影 可以设置位置 SpotLight 聚光灯光源 类似天花板的吊灯 产生阴影的时候最好用这个 可以设置位置 DirectionalLight 方向光 光源是平行的 类似太阳光 HemisphereLight 半球光 可以模拟光线微弱的天空 AreaLight 面光源 LensFlare 镜头眩光
- 纹理 纹理就好像皮肤一样 MeshBasicMaterial MeshDepthMaterial 外观的深浅由物体到相机的距离决定的 MeshDepthMaterial可以结合MeshBasicmaterial进行联合材质 MeshNormalMaterial 计算法向颜色 MeshFaceMaterial 材质容器 可以对几何体每一个面指定不用的材质 MeshLamberMaterial 用于暗淡 不光亮表面 MeshPhongMaterial 用于光亮的材质
- 射线 当我们选中某个元素的时候,使用Raycaster
- 控制器
- GUI
- stat
-
功能 （1） 散点数据：
方法1：打开QGIS里面设置随机点（推荐）
方法2：使用网址http://geojson.io/#map=2/32.2/18.3在这个里面手动点一些点
（2）获取路网信息：
方法1：直接打开OpenStreetMap地图网址（），手动圈出范围，下载范围内的路网信息（小范围的可以，类似场馆周围地理信息）
方法2：打开OpenStreetMap的api(http://www.overpass-api.de/index.html),使用以下代码
在Query and Convert Forms中输入,点击Query获取到这个id;<query type=""relation> <has-kv k="boundary" v="administrative"> <has-kv k="name:zh" v="贵阳市"/> </query> <print mode="body"/>
同样的页面中输入,ref是3600000000+2782246得到的结果，将这个代码放到Overpass API Convert Form中直接，得到xml的城市路网信息文件
<osm-script timeout="1800" element-limit="100000000"> <union> <area-query ref="3602782246"/> <recurse type="node-relation" into="rels"/> <recurse type="node-way"/> <recurse type="way-relation"/> </union> <union> <item/> <recurse type="way-node"/> </union> <print mode="body"/> </osm-script>
（3）设置线段或者点等任何物体的颜色
使用glsl（https://learnopengl-cn.github.io/01%20Getting%20started/05%20Shaders/#_2）
（4）加载地图
（5）说一下SketchUp
如果想做一个建筑，那么就需要纹理，纹理的话可以采用材质，材质里面可以贴图片也可以直接设置纯色
（6）事件
对场景中绑定事件都是用到的射线 -
使用的软件 代码：vscode
散点：QGIS
模型：SketchUp 3DMAX -
资料 glsl文档：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLProgram glsl例子：http://www.geeks3d.com/ glsl文档：https://thebookofshaders.com/06/?lan=ch 着色器：https://thebookofshaders.com/?lan=ch three.js文档：http://www.webgl3d.cn/threejs/docs/
three.js案例：http://www.webgl3d.cn/threejs/examples/ 建议down下来
获取国内地图数据：http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
获取全球路网信息方法1：https://www.openstreetmap.org/#map=15/39.9227/116.3533&layers=O
获取全球路网信息方法2：http://www.overpass-api.de/index.html
将OSM转成json：https://www.bejson.com/xml2json/
将XML转成shp:https://geoconverter.hsr.ch/vector
dat.GUI简单的界面组件，控制属性
计算动画函数 http://www.createjs.cc/tweenjs/
mapbox 插件http://www.mapbox.cn/
优点：功能齐备 支持移动端 地图样式可以个性化
缺点：地图不可以离线 英文文档 没有功能性的实例
maptalk添加网络地图https://maptalks.org/examples/cn/map/load/
优点：实例多 中文文档
缺点：地图不可以离线 地图样式不可以个性化
cesium地图https://cesium.com/platform/cesiumjs/ -
问题 https://stackoverrun.com/cn/q/11494942
区别： QuadraticBezierCurve3
CubicBezierCurve3
地球
建筑
热力图
glsl
https://thebookofshaders.com/?lan=ch
想要修改道路的颜色可以将mapbox作为底图
自动旋转的时候需要注意这两个函数requestAnimationFrame cancelAnimationFrame
hightopo 创建3D建筑
- 弯曲的地图
three map d3
- 资料：
https://blog.csdn.net/qq_31052401/article/details/88937832
https://bl.ocks.org/mbostock