炫酷3D地图效果如下:

代码注释非常详细:

  create() {
// 添加雾,随着距离线性增大,只能看到一个小是视野范围内的场景,地图缩小很多东西就会看不清
//this.scene.fog = new THREE.Fog(0x191919, 30, 70)
this.getCenterPoint() //计算城市中心点,并将center存储到localStorage中
this.createSpreadWave() //创建向四周扩散的蓝色波纹
this.createChinaMap() //创建中国省份地图-加载渲染时间比较长,可以注释掉
this.createProvinceMap() //创建山西省城市地图
this.createCityMap() //创建阳泉市地图
this.createGrid() //创建地图网格效果
//this.createLight() //设置点光源
this.createRotateBorder() //城市地图上旋转的圆圈边框动画
this.createCityLabel() //城市地图上的文本标签
this.createCityWall() //城市边界线上的半透明的围墙
this.createBar() //城市地图上各个区县的柱状图
this.createParticles() //三维空间的向上飞的粒子动画
}

需要案例源码,+vx:jackgiss

three.js案例-web3d三维地图大屏炫酷3D地图下钻地图-附源码的更多相关文章

  1. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  2. arcgis api 3.x for js 共享干货系列之二自定义 Navigation 控件样式风格(附源码下载)

    0.内容概览 自定义 Navigation 控件样式风格 源码下载 1.内容讲解 arcgis api 3.x for js 默认的Navigation控件样式风格如下图:这样的风格不能说不好,各有各 ...

  3. 大文件拆分问题的java实践(附源码)

    引子 大文件拆分问题涉及到io处理.并发编程.生产者/消费者模式的理解,是一个很好的综合应用场景,为此,花点时间做一些实践,对相关的知识做一次梳理和集成,总结一些共性的处理方案和思路,以供后续工作中借 ...

  4. 大文件拆分方案的java实践(附源码)

    引子 大文件拆分问题涉及到io处理.并发编程.生产者/消费者模式的理解,是一个很好的综合应用场景,为此,花点时间做一些实践,对相关的知识做一次梳理和集成,总结一些共性的处理方案和思路,以供后续工作中借 ...

  5. 利用HTML5和echarts开发大数据展示及大屏炫酷统计系统

    想这样的页面统计及展示系统都是通过echarts来发开的及ajax数据处理,echarts主要是案例,在案例上修改即可,填充数据 echarts的demo案例如下: http://echarts.ba ...

  6. arcgis api 3.x for js 实现克里金插值渲染图不依赖 GP 服务(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  7. jQuery+Ajax滚屏异步加载数据实现(附源码)

    一.CSS样式 body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2e ...

  8. openlayers4 入门开发系列之地图导航控件篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. threejs三维地图大屏项目分享

    这是最近公司的一个项目.客户的需求是基于总公司和子公司的数据,开发一个数据展示大屏. 大屏两边都是一些图表展示数据,中间部分是一个三维中国地图,点击中国地图的某个省份,可以下钻到省份地图的展示. 地图 ...

  10. Vue过渡和动画效果展示(案例、GIF动图演示、附源码)

    前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...

随机推荐

  1. Spring Bean 的一生

    Spring Bean 的一生包括其从创建到消亡的整个过程: 实例创建 => 填充 => 初始化 => 使用 => 销毁. 这里需要注意的是,从 bean 实例的创建到可以使用 ...

  2. 5. Determinant

    5.1 The Properties of Determinants The determinant of the n by n identity matrix is 1 : \(det I = 1\ ...

  3. 深度剖析:Dubbo使用Nacos注册中心的坑

    2020年笔者在做微服务部件升级时,Dubbo的注册中心从Zookeeper切换到Nacos碰到个问题,最近刷Github又有网友提到类似的问题,就在这篇文章里做个梳理和总结. 1.问题描述 前几年我 ...

  4. 【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit(2)

    1.问题描述: 开发服务端推送,客户端能收到离线推送,但是推送收到的通知只能从手机顶部下拉看到,无法收到一个顶部的弹框.请问是什么原因? 解决方案: 可能原因一: 消息提醒的方式与消息类别有关,比如: ...

  5. HMS Core电商解决方案之商品3D商品展示

    传统电商商品展示采用图文结合的形式,文案介绍产品的相关参数,搭配精美图片去吸引客户眼球.但图文商品展示由于色差.尺寸不符等原因,会让消费者产生图片和实物不一致的疑虑,且消费者需要消耗大量精力阅读和比较 ...

  6. Qt 桌面服务 QDesktopServices

    使用浏览器打开网址 #include <QDesktopServices> #include <QUrl> QUrl url(QString("https://cn. ...

  7. 堆结构(Heap)的基本实现【数据结构与算法—TypeScript 实现】

    笔记整理自 coderwhy 『TypeScript 高阶数据结构与算法』课程 概念 本质:一种特殊的树结构,由 完全二叉树 实现 多数情况为二叉堆 二叉堆:最大堆.最小堆 最大堆:堆上的每个节点都的 ...

  8. c++ 中const 原理

    前言 在c++ 中和别的语言不一样,高级语言是将const编译了,c又不同这里不介绍,而c++ 是实现了. 正文 const 原理 请看一个解析: const a=10; int*p=&a; ...

  9. c# 后端与前端时间戳的转换

    C# DateTime与时间戳转换 C# DateTime与时间戳的相互转换,包括JavaScript时间戳和Unix的时间戳. 1. 什么是时间戳 首先要清楚JavaScript与Unix的时间戳的 ...

  10. ES6---new Promise()使用方法

    2015年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范.作为ES6中最重要的特性之一,我们有必要掌握并理解透彻.本文将由浅到深,讲解Promise ...