位置: IT常识 - 正文

基于Three.js实现酷炫3D地图效果(three.js gui)

编辑:rootadmin
这篇文章主要为大家详细介绍了如何利用Three.js实现酷炫3D地图的效果,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以尝试一下 目录

推荐整理分享基于Three.js实现酷炫3D地图效果(three.js gui),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:three. js,three. js,three.js例子,three.js bim,three. js,three.js入门指南,three. js,three.js入门指南,内容如对您有帮助,希望把文章链接给更多的朋友!

实现效果前言使用1.修改整体的背景图可以使用颜色或用贴图改材质2.取消地图上柱状图显示3.更换地图、更换省份、市4.修改相机的视角,页面展示的远近角度5.修改地图的颜色及贴图6.关闭一些特效7.页面适配和在vue2版本中使用实现效果

前言

本文主要说明使用threejs技巧,来定制适合项目需求的样式,源码将在本文最后附上gitee地址。

使用1.修改整体的背景图可以使用颜色或用贴图改材质

方法:

只需修改createChinaMap()方法中的color属性即可,注意一共要修改4个color,其中有两个是地图边界线的颜色。也可以使用贴图,

2.取消地图上柱状图显示

create钩子函数里注释掉// this.createBar()即可

3.更换地图、更换省份、市

基于Three.js实现酷炫3D地图效果(three.js gui)

更换很简单,就是如图位置修改引入的地图文件即可,但是修改之后需要注意的是,地图中心点改变了,比如现在将地图展示由金华市改为台州市,那么还需要修改@/comfig文件下的配置,如下图所示:

修改之后的效果如下:

4.修改相机的视角,页面展示的远近角度

5.修改地图的颜色及贴图

let city = new BaseMap(this, {data: data,// topFaceMaterial: material.getMaterial(),topFaceMaterial: new THREE.MeshPhongMaterial({color: "red", //想要的颜色emissive: 0x072534,transparent: true,opacity: 1,}),sideMaterial: sideMaterial.getMaterial(),renderOrder: 6,depth: config.cityName ? 0.3 : 3,})

如果你想引入贴图,这样会更好看,可以使用以下方法:

// 在index.js中引入的给地图做材质estartconst texture = new THREE.TextureLoader()const textureMap = texture.load(require('./data/map/gz-map.jpg'))const texturefxMap = texture.load(require('./data/map/gz-map-fx.jpg'))textureMap.wrapS = texturefxMap.wrapS = THREE.RepeatWrappingtextureMap.wrapT = texturefxMap.wrapT = THREE.RepeatWrappingtextureMap.flipY = texturefxMap.flipY = falsetextureMap.rotation = texturefxMap.rotation = THREE.MathUtils.degToRad(45)const scale = 0.1textureMap.repeat.set(scale, scale)

然后

let city = new BaseMap(this, {data: data,// topFaceMaterial: material.getMaterial(),topFaceMaterial: new THREE.MeshPhongMaterial({map: textureMap,//不要忘记这里使用贴图color: "red", //想要的颜色emissive: 0x072534,transparent: true,opacity: 1,}),sideMaterial: sideMaterial.getMaterial(),renderOrder: 6,depth: config.cityName ? 0.3 : 3,})6.关闭一些特效

create中是所有方法的开关,在这里可以进行调试

create () {// 添加雾this.scene.fog = new THREE.Fog(0x191919, 30, 70)this.getCenterPoint()this.createPlane()this.createChinaMap()this.createProvinceMap()this.createCityMap()this.createGrid()this.createLight()this.createRotateBorder()this.createLabel()this.createWall()// this.createBar()this.createParticles()}7.页面适配和在vue2版本中使用

页面适配建议给这个地图使用绝对定位,样式代码可参考以下:

width: 1920px;height: 1080px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);

在vue2中使用:

npm 下载这个插件:@vue/composition-api

然后main.js注册下即可

到此这篇关于基于Three.js实现酷炫3D地图效果的文章就介绍到这了,更多相关Three.js 3D地图内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

本文链接地址:https://www.jiuchutong.com/zhishi/309224.html 转载请保留说明!

上一篇:二、python基本数据类型(python提供的3个基本数字类型)

下一篇:帝国cms怎么增加专题(帝国cms怎么增加子栏目)

  • 小米mix4怎么关闭快速充电(小米mix4怎么关闭应用)

    小米mix4怎么关闭快速充电(小米mix4怎么关闭应用)

  • 抖音没粉丝可以直播吗(抖音没粉丝可以开小店吗)

    抖音没粉丝可以直播吗(抖音没粉丝可以开小店吗)

  • 小米指纹传感器有脏污(小米指纹传感器坏了能修吗)

    小米指纹传感器有脏污(小米指纹传感器坏了能修吗)

  • 苹果13.4.1升级以后没有信号(苹果更新13.4.1怎么样)

    苹果13.4.1升级以后没有信号(苹果更新13.4.1怎么样)

  • 手机迅雷怎么没有匹配字幕了(手机迅雷怎么没有下载链接选项)

    手机迅雷怎么没有匹配字幕了(手机迅雷怎么没有下载链接选项)

  • 情侣空间解除了对方能看到吗(情侣空间解除了再重新建立会怎样)

    情侣空间解除了对方能看到吗(情侣空间解除了再重新建立会怎样)

  • 乐视是做什么的呢(乐视是集团还是公司)

    乐视是做什么的呢(乐视是集团还是公司)

  • 拼多多商家提现规则(拼多多商家提现到账)

    拼多多商家提现规则(拼多多商家提现到账)

  • 电脑microsoft账户登不进去(电脑microsoft账户怎么退出登录)

    电脑microsoft账户登不进去(电脑microsoft账户怎么退出登录)

  • 情侣空间解除了还能恢复相恋天数(情侣空间解除了还能恢复内容吗)

    情侣空间解除了还能恢复相恋天数(情侣空间解除了还能恢复内容吗)

  • 光猫离线自己能修吗(什么叫光猫离线)

    光猫离线自己能修吗(什么叫光猫离线)

  • 手机出现耳机模式,听不到音是咋了(手机出现耳机模式是怎么回事)

    手机出现耳机模式,听不到音是咋了(手机出现耳机模式是怎么回事)

  • 华为nova支持无线充电的手机(华为nova支持无线充电带nfc的手机)

    华为nova支持无线充电的手机(华为nova支持无线充电带nfc的手机)

  • 头条私聊能发图片吗(头条私聊怎么发图片)

    头条私聊能发图片吗(头条私聊怎么发图片)

  • itunes怎么样备份(用itunes怎么备份)

    itunes怎么样备份(用itunes怎么备份)

  • oppoa5耳机模式怎么关(oppoa5耳机模式怎么解除没有智能辅助)

    oppoa5耳机模式怎么关(oppoa5耳机模式怎么解除没有智能辅助)

  • 抖音移除粉丝会通知对方吗(抖音移除粉丝会降权吗)

    抖音移除粉丝会通知对方吗(抖音移除粉丝会降权吗)

  • 手机与电视投屏怎么弄(手机与电视投屏连接不上什么原因)

    手机与电视投屏怎么弄(手机与电视投屏连接不上什么原因)

  • 苹果7p微信视频怎么美颜(苹果7p微信视频前置摄像头黑屏)

    苹果7p微信视频怎么美颜(苹果7p微信视频前置摄像头黑屏)

  • linux修改密码命令(linux修改密码命令passwd)

    linux修改密码命令(linux修改密码命令passwd)

  • 使用最新版本的Windows7升级顾问2.0的方法(使用最新版本的浏览器可以防御黑客)

    使用最新版本的Windows7升级顾问2.0的方法(使用最新版本的浏览器可以防御黑客)

  • kensocks.exe是什么进程 有什么作用 kensocks进程查询(kcleaner.exe是什么)

    kensocks.exe是什么进程 有什么作用 kensocks进程查询(kcleaner.exe是什么)

  • echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化)

    echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化)

  • 计提个税与实际缴纳不一致
  • 餐厅打包盒算不算商品
  • 合营企业和联营企业的持股比例
  • 黑色金属冶炼压延品税收编码
  • 企业财务发工资流程
  • 公司被扣货款怎么记账
  • 服务行业适用什么核算
  • 公司闲置房租出去违法吗
  • 建筑行业会计如何合理避税
  • 增值税普票跨年重开风险
  • 专用设备抵免企业所得税目录
  • 没有收款人复核人的发票能报销吗
  • 税收征收管理法
  • 货币资金闲置对企业偿债能力的影响
  • 分期收款销售的核算中发出商品时借什么账户
  • 财务费用明细科目怎么写
  • 保险公司买保险和银行买保险有什么区别
  • 对外捐赠会计和税法差异调整
  • 一般纳税人劳务发票税点多少
  • 发送文件桌面上显示不出来
  • 苹果推送最新系统
  • aspnet_admin.exe进程是安全的吗 aspnet_admin进程信息查询
  • 净损益是
  • 远期结汇会计分录
  • thinkphp分页传递参数
  • php生成php文件
  • 退回银行本票会计分录
  • elements table
  • 最新版本金铲铲强势阵容
  • php7.3安装
  • 公司房产处置
  • php多条件搜索功能的实现
  • 公司支付工伤赔偿,是先签字还是先打钱
  • php cat
  • pytorch自定义网络层
  • 应付未付的工资属于负债吗
  • ps怎么把图片套入样机快捷键
  • 物流破损拒收的理由
  • 银行开户有几种账户
  • 已冲销凭证是否可以删除
  • 税款所属期止是怎么写
  • sqldbmon
  • Sqlserver 2005使用XML一次更新多条记录的方法
  • ibm.data.db2
  • 对外投资损失可以抵税吗
  • 银行存款属于其他收益吗
  • 企业固定电话费收费标准
  • 土地使用税如何计算缴纳
  • 社保计提少了怎么办
  • 收到的成本票怎么做账
  • 员工罚款从工资中代扣
  • 无形资产当年提摊销嘛
  • 用盈余公积弥补亏损的会计分录是
  • 汽车折旧费谁出
  • 过路费油费计入什么费用
  • 建筑工程购买的搬运设备升降平台分录
  • 研发支出资本化支出在资产负债表哪里体现
  • sql判断字段是否包含数字和字母
  • RSync文件备份同步 Linux服务器rsync同步配置图文教程
  • linux开机启动ftp
  • win7桌面整理软件
  • linux网络不可达是什么原因
  • win10更新需要重启怎么办
  • win10右键菜单不显示
  • windows中创建的任务计划可以多久执行一次任务?
  • Python HTTP客户端自定义Cookie实现实例
  • unity jsonutility 数组
  • unity 3d场景2d角色
  • python的threading模块详解
  • nodejs body-parser 解析post数据实例
  • unity ui批处理
  • Android - DrawerLayout的使用
  • jQuery实现table中的tr上下移动并保持序号不变的实例代码
  • python中计数函数怎么用
  • javascript的基本语法
  • 非房地产企业土地增值税
  • 一般纳税人提供公共交通运输服务免征增值税
  • 税务ukey登录界面
  • 新型墙体材料税率是多少
  • 社会救助档案管理规范化的好处
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设