炫酷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. kafka集群启动命令脚本文件kf.sh

    注意代码缩进 添加执行权限 chmod +x kf.sh 1 #! /bin/bash 2 case $1 in 3 "start"){ 4 for i in hadoop102 ...

  2. 实现一个简单的echarts词云图PythonFlask

    cloud.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta char ...

  3. OpenHarmony自定义构建函数:@Builder装饰器

      前面章节介绍了如何创建一个自定义组件.该自定义组件内部UI结构固定,仅与使用方进行数据传递.ArkUI还提供了一种更轻量的UI元素复用机制@Builder,@Builder所装饰的函数遵循buil ...

  4. OpenHarmony—应用间HSP开发指导

     应用间HSP用于不同应用间的代码.资源共享. 应用间HSP的宿主应用是一种特殊状态的应用,只能由一个HSP组成,不会独立运行在设备上,而是被普通应用模块的依赖项引用.当普通应用运行时,通过动态调用的 ...

  5. 有奖调研 | 让虚拟照入现实的完美AR开发平台长什么样?

    6年前的夏天,一款现实与虚拟结合的手游成了无数玩家的心头好,手握智能手机,玩家就能在真实世界来一场妙趣横生的探险,收集动漫作品里如数家珍的宠物精灵.AR技术结合用户熟识喜爱的内容形式,与现实环境中扩充 ...

  6. Python拷贝、移动、重命名、删除文件和文件夹----shutil

    拷贝 # 拷贝文件import shutil # 语法: shutil.copy(src, dst) '''示例 将 a 文件夹中的 a.txt 拷贝到 b 文件夹 ''' shutil.copy(' ...

  7. mybatis 手写分页

    mybatis 手动分页查询 .xml文件 SELECT .... FROM dip_pack_box AS t1 LEFT JOIN dip_pack_content AS t2 ON t1.id ...

  8. .NET服务发现(Microsoft.Extensions.ServiceDiscovery)集成Consul

    随着Aspire发布preview5的发布,Microsoft.Extensions.ServiceDiscovery随之更新, 服务注册发现这个属于老掉牙的话题解决什么问题就不赘述了,这里主要讲讲M ...

  9. Avalonia下拉可搜索树(TreeComboBox)

    1.需求分析   树形下拉的功能是ComboBox和TreeView的功能结合起来,再结合数据模板来实现这一功能. 2.代码实现   1.创建UserControl集成TreeView控件   2.将 ...

  10. Node.js 与前端开发实战

    0x1 Node.js 的应用场景 前端工程化 打包工具:webpack.vite.esbuild.parce 代码压缩:uglifyjs 语法转换:babeljs,typescript 难以替代 W ...