炫酷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. Scala Map操作

    1 package chapter07 2 3 object Test14_HighLevelFunction_Map { 4 def main(args: Array[String]): Unit ...

  2. Scala 类和对象与Java的对比

    一.包 1 package com{ 2 3 import com.atguigu.scala.Inner 4 5 // 在外层包中定义单例对象 6 object Outer{ 7 var out: ...

  3. 简直了,被“Java并发锁”问题追问到自闭...

    故事 地铁上,小帅双目空洞地望着窗外...绝望,发自内心地感到绝望... 距离失业已经过去两个月了,这是小帅接到的第四次面试邀请."回去等通知吧...",简简单单的六个字,把小帅的 ...

  4. Windows Server 2008 R2之升级IE8

    前言 先需求将Windows Server 2008 R2的IE8升级至IE9,需要安装系统补丁. 安装补丁 补丁包版本 KB2454826 下载地址 https://www.catalog.upda ...

  5. k8s集群安装(kubeadm方式)

    一.准备三台虚拟机,系统CentOS7.9: 192.168.1.221 master1 192.168.1.189  node1 192.168.1.60  node2 二..对三台虚拟机初始化 1 ...

  6. python异步正则字符串替换,asyncio异步正则字符串替换re

    自然语言处理经常使用re正则模块进行字符串替换,但是文本数量特别大的时候,需要跑很久,这就需要使用asyncio异步加速处理 import pandas as pd import re import ...

  7. 【笔记】rocketMQ了解

    记录rocketMQ 忘了从哪儿保存的图了 原图链接:https://www.jianshu.com/p/2838890f3284

  8. 剑指offer53(Java)-在排序数组中查找数字(简单)

    题目: 统计一个数字在排序数组中出现的次数. 示例 1: 输入: nums = [5,7,7,8,8,10], target = 8输出: 2示例 2: 输入: nums = [5,7,7,8,8,1 ...

  9. python:在cmd中输入pip install pandas 显示‘pip’不是内部或外部命令,也不是可运行的程序 或批处理文件解决办法

    1.首先找到自己文件夹中python的安装位置,一定要在Scripts文件夹下,可以看到pip文件,复制这时候的路径 2.使用快捷键  "win +R"打开cmd窗口,首先进入自己 ...

  10. [ABC342D] Square Pair 题解

    [题目描述] 给定一个长度为 \(N\) 的非负整数序列 \(A=\left(A_1,\cdots,A_n\right)\).求满足以下条件的整数对 \(\left(i,j\right)\) 的数量. ...