基于Three.js制作一个3D中国地图

目录
  • 1.使用geoJson绘制3d地图
    • 1.1 创建场景相关
    • 1.2 根据json绘制地图
  • 2.增加光照
  • 3.增加阴影模糊
  • 4.增加鼠标事件
  • 5.渲染
  • 6.动画效果

不想看繁琐步骤的,可以直接去github下载项目,如果可以顺便来个star哈哈

本项目使用vue-cli创建,但不影响使用,主要绘制都已封装成类

1.使用geoJson绘制3d地图

1.1 创建场景相关

// 创建webGL渲染器
this.renderer = new THREE.WebGLRenderer( { antialias: true,alpha: true} );
this.renderer.shadowMap.enabled = true; // 开启阴影
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
this.renderer.toneMappingExposure = 1.25;   

// 根据自己的需要调整颜色模式
// this.renderer.outputEncoding = THREE.sRGBEncoding;  

this.renderer.outputEncoding = THREE.sHSVEncoding;
this.renderer.setPixelRatio( window.devicePixelRatio );
// 清除背景色,透明背景
this.renderer.setClearColor(0xffffff, 0);
this.renderer.setSize(this.width, this.height);

// 场景
this.scene = new THREE.Scene();
this.scene.background = null
// 相机 透视相机
this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 0.1, 5000);
this.camera.position.set(0, -40, 70);
this.camera.lookAt(0, 0, 0);

1.2 根据json绘制地图

利用THREE.Shape绘制地图的平面边数据,再用THREE.ExtrudeGeometry将一个面拉高成3d模型,3d饼图同理也可以这么制作

let jsonData = require('./json/china.json')
this.initMap(jsonData);

// initMap 方法主要部分
initMap(chinaJson) {
    /* ...省略
        ...
    */
    chinaJson.features.forEach((elem, index) => {
        // 定一个省份3D对象
        const province = new THREE.Object3D();
        // 每个的 坐标 数组
        const { coordinates } = elem.geometry;
        const color = COLOR_ARR[index % COLOR_ARR.length]
        // 循环坐标数组
        coordinates.forEach(multiPolygon => {

            multiPolygon.forEach((polygon) => {
                const shape = new THREE.Shape();

                for (let i = 0; i < polygon.length; i++) {
                    let [x, y] = projection(polygon[i]);

                    if (i === 0) {
                        shape.moveTo(x, -y);
                    }
                    shape.lineTo(x, -y);
                }

                const extrudeSettings = {
                    depth: 4,
                    bevelEnabled: true,
                    bevelSegments: 1,
                    bevelThickness: 0.2
                };

                const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

                // 平面部分材质
                const material = new THREE.MeshStandardMaterial( {
                    metalness: 1,
                    color: color,

                } );
                // 拉高部分材质
                const material1 = new THREE.MeshStandardMaterial( {
                    metalness: 1,
                    roughness: 1,
                    color: color,

                } );

                const mesh = new THREE.Mesh(geometry, [
                    material,
                    material1
                ]);
                // 设置高度将省区分开来
                if (index % 2 === 0) {
                    mesh.scale.set(1, 1, 1.2);
                }
                // 给mesh开启阴影
                mesh.castShadow = true
                mesh.receiveShadow = true
                mesh._color = color
                province.add(mesh);

            })

        })

        _this.map.add(province);

    })
}

geoJson的坐标需要进行墨卡托投影转换才能转换成平面坐标,这里需要用到d3

// 墨卡托投影转换
const projection = d3.geoMercator().center([104.0, 37.5]).scale(80).translate([0, 0]);

2.增加光照

我们把各种光都打上,环境光,半球光,点光,平行光。以平行光为例,增加投影,调整投影分辨率,避免投影出现马赛克

const light = new THREE.DirectionalLight( 0xffffff, 0.5 );
light.position.set( 20, -50, 20 );

light.castShadow = true;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;

this.scene.add(light);

castShadow = true表示开启投影

3.增加阴影模糊

默认的阴影没有模糊效果,看起来像白炽灯照射的样子,没有柔和感。使用官方示例中的csm来增加阴影模糊

import { CSM } from 'three/examples/jsm/csm/CSM.js';

this.csm = new CSM( {
    maxFar: params.far,
    cascades: 4,
    mode: params.mode,
    parent: this.scene,
    shadowMapSize: 1024,
    lightDirection: new THREE.Vector3( params.lightX, params.lightY, params.lightZ ).normalize(),
    camera: this.camera
} );

4.增加鼠标事件

3d空间中,鼠标事件主要通过射线来获取鼠标所在位置,可以想象成鼠标放出一道射线,照射到的第一个物体就是鼠标所在位置。此时用的threejsRaycaster,通过Raycaster给对应的省份增加鼠标移入高亮效果和省份民悬浮展示效果

this.raycaster = new THREE.Raycaster();
// 传入需要检测的对象 group,group下的所有对象都会被检测到,如果被射线照到,则intersects有值,表示鼠标当前在这些物体上
const intersects = this.raycaster.intersectObject( this.group, true );
// 代码太多就不贴了,见 GitHub源码

5.渲染

threejs的渲染一般调用原生的requestAnimationFrame,主要做的事就是调用rendererrender方法,当然因为我们做了阴影模糊处理,所以还有别的需要做的:

this.camera.updateMatrixWorld();
this.csm.update();
this.renderer.render(this.scene, this.camera);

6.动画效果

地图上如果有一些动画效果,可以使用TWEEN.jsgithub地址,比如地图标注的出现动画:

最后再奉上项目地址

到此这篇关于基于Three.js制作一个3D中国地图的文章就介绍到这了,更多相关Three.js 3D中国地图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue 使用 echarts 绘制中国地图的实现代码

    1. 插入echarts 所需模块 import echarts from "echarts"; import 'echarts/map/js/china' // 使用中国地图需把China.js文件引入 2. 正式代码部分 //初始化echarts实例 通过传参获取要放置的id名称 var myChart = echarts.init(document.getElementById("容器的id名称")); // 指定图表的配置项和数据 var optionMap

  • Python pyecharts实现绘制中国地图的实例详解

    目录 实例演示 1.pyecharts 1.9.1 版本安装与数据准备 2.添加数据项,默认中国地图显示 常用配置项及参数解析 1.设置是否默认选中 2.设置地图颜色类型是否分段显示 3.缩放平移配置 4.启用和关闭图形标记 5.关闭标签名称显示 6.颜色设置:标签颜色.区域颜色.边框颜色 实例演示 先给大家看下效果图哈. 1.pyecharts 1.9.1 版本安装与数据准备 首先需要安装 pyecharts 库,直接 pip install pyecharts 就好了. 新版本的话不需要单独

  • Three.js开发实现3D地图的实践过程总结

    前言 本文主要介绍Three.js的开发基础和基本原理,以及如何实现3D全景图.想在web端实现3D全景图的效果,除了全景图片.WebGL外,还需要处理很多细节.据我所知,目前国外3D全景图比较好的是KrPano,国内很多3D全景服务是在使用krpano的工具. 前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目.也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享. Three.js 基于简化WebGL开发复杂度和降低入门难度的目的,mrdoob)在WebGL标准基础

  • vue+echarts5实现中国地图的示例代码

    使用echarts5.0版本实现中国地图,E charts在5.0版本之后,地图不能直接引入了,需要自己去下载. 地图文件下载地址:下载地址(http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5) 注意: 将下载后的json文件放置/public目录下 map类型的地图 <template> <

  • Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示

    目录 实现效果 完整代码+详细注释 要点小结 实现效果 完整代码+详细注释 <template> <div class="echart"> <div class="content"> <div id="map_cn"></div> </div> </div> </template> <script> import echarts from

  • 基于Three.js制作一个3D中国地图

    目录 1.使用geoJson绘制3d地图 1.1 创建场景相关 1.2 根据json绘制地图 2.增加光照 3.增加阴影模糊 4.增加鼠标事件 5.渲染 6.动画效果 不想看繁琐步骤的,可以直接去github下载项目,如果可以顺便来个star哈哈 本项目使用vue-cli创建,但不影响使用,主要绘制都已封装成类 1.使用geoJson绘制3d地图 1.1 创建场景相关 // 创建webGL渲染器 this.renderer = new THREE.WebGLRenderer( { antiali

  • 使用Three.js制作一个3D奖牌页面

    目录 背景 效果 实现 引入资源 场景初始化 光照效果 Three.js 提供的光源 添加网格和地面 创建奖牌 奖牌UI素材生成 Three.js 中的贴图 MeshPhysicalMaterial 物理材质 特殊属性 加载1000+文字模型 补间动画 动画更新 礼花动画 总结 背景 本文使用 React + Three.js 技术栈,实现粉丝突破1000的3D纪念页面,包含的主要知识点包括:Three.js 提供的光源.DirectionLight 平行光.HemisphereLight 半球

  • 基于JS制作一个简单的网页版地图

    目录 前言 一.申请地图的AK密钥 二.主要代码分析 三.全部代码 四.结果展示 前言 以前做了一个安卓版的地图应用,现在突然想做一个简单的网页版地图.这个简单的网页版地图能根据城市名进行位置查询(有个城市列表的小控件,支持城市列表选择),还能根据经纬度进行位置查询.当你进行城市搜索时,或者经纬度查询城市时,该小控件也能自由地切换到目标城市. 一.申请地图的AK密钥 1.首先找到一个地图开放平台,这里以百度地图开放平台为例,步骤如下:进入百度地图开放平台,拉到最底下,进行登录注册,然后进入应用管

  • 基于node.js制作简单爬虫教程

    前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishujia.com/webapp/build/html/ 网站的所有门店发型师的基本信息. 思路:访问上述网站,通过chrome浏览器的network对网页内容分析,找到获取各个门店发型师的接口,对参数及返回数据进行分析,遍历所有门店的所有发型师,直到遍历完毕,同事将信息存储到本地. 步骤一:安装nod

  • 基于Particles.js制作超炫粒子动态背景效果(仿知乎)

    好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果. 上图 上图: 感觉有比格,就照着弄了一个,玩玩. github: https://github.com/VincentGarreau/particles.js/ 操作过程: 网上有基本流程,可以参考一下,不过直接用在登录页面 会有小bug,需要调整下. 1.首先在页面中引入particles.js文件. <script src="js/particles.js

  • 如何使用three.js 制作一个三维的推箱子游戏

    今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击 要制作一个推箱子游戏,正常要有以下4个步骤 定义一些数组,要有开始箱子数组.结束箱子数组.地面数组还有墙面数组,有这四个数组就可以组成一个关卡. 根据数组初始化地面墙面箱子和目标地点标志物. 使用FirstPersonControls控制器,控制相机移动,根据地面箱子和墙面算出可移动区域. 根据相机正对箱

  • 利用Vue.js制作一个拼图华容道小游戏

    目录 游戏介绍 核心思路 核心代码 html games 类 生成随机图片数量 移动图片 键盘事件 拼图完成 结语 游戏介绍 先看看界面 这是一个拼图游戏,可以自选难度和自选闯关图片 游戏开始后根据不同难度,生成与所选主图 对应的 不同张数的 随机顺序的小图,然后只要把乱序的小图片还原成完整的图片就闯关成功 游戏区域有一个空白位置,可以用鼠标点击空白位相邻的图片完成替换,也就是移动,也可以用键盘上下左右操作 游戏好玩,可不要贪杯哦,学习也不能落下,不管什么游戏都一样 这个虽然用到的技术很一般很简

  • 利用Three.js制作一个新闻联播开头动画

    目录 这里才是引言 技术选型 场景分解 代码逻辑分解 创建背景图和背景音乐 背景图 背景音乐 在线体验地址:点我预览 代码地址:点我github 这里才是引言 五一居家隔离,闲着也是闲着,想着整个活儿,于是就有了这个项目. 项目本身不是很难,但是中间确实是遇到了一些小问题,断断续续也是花费了三四天时间才写完,还有一些需要优化的地方,后续有时间再整. 我会从脚手架开始,按照场景中出现的物体顺序逐条进行讲解制作,每个物体将分为独立的一篇文章,方便理解.Go. 技术选型 选用vite作为构建工具: 选

  • 基于Python轻松制作一个股票K线图网站

    目录 获取股票数据 PyEcharts 作图 构建 Web 框架 视图函数编写 模板编写 编辑主逻辑 前端页面编写 在前面的文章中,我们学习了如何使用 Tkinter 构建股票数据抓取以及展示K线图功能,虽然大致的功能已经具备,但是在当今这个人手一个 Web 服务的年代,GUI 程序还是没有 Web 服务来的香啊. 我们需要用到的知识包括 PyEcharts 的使用,tushare 库获取股票数据的方法以及 Flask 的基本用法. 获取股票数据 我们先来看下 tushare 的使用,这个应该是

  • 教你使用html+css制作一个3D立体相册

    目录 前言 一.先看效果 二.实现步骤 总结 前言 用css的transform属性做一个3D相册~~~值translate表示偏移:scale表示缩放:rotate就是转动. 一.先看效果 二.实现步骤 1.我们知道一个正方体有6个面,所以定义一个父亲元素然后定义6个子元素作为6个面.每个面放一张图片.里面q1表示前面,h2表示后面,以此类推,就是首拼音. <div class="baba"> <div class="q1"> <im

随机推荐