位置: 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怎么增加子栏目)

  • 采购合同缴纳印花税依据
  • 季度申报,其他收益科目是怎样的科目
  • CIA是指什么会计考试
  • 分配税后利润需交个人所得税吗
  • 分公司撤销跨区域转固定资产到总公司
  • 房地产公司属于第几产业
  • 出口退税正式申报撤销申请
  • 结转损益类费用科目的余额
  • 错账的查找方法及适用范围
  • 未发货先开票怎么结转成本
  • 一般纳税人采购收到普通发票
  • 话费发票入账
  • 购置办公大楼
  • 公司欠增值税如何补交?
  • 收到投资分红要缴纳企业所得税吗?
  • 税控系统技术维护费抵扣如何填报
  • 什么是城镇土地使用税
  • 消费税暂行条例实施细则
  • 基建人员工资计入哪个科目
  • 固定资产进项发票怎么开
  • 个体户需要申报工资薪金吗
  • 有限责任公司出资方式有哪些
  • 应收账款期初余额是借还是贷
  • 员工离职补偿金计算方法
  • 第三方检测公司招聘信息
  • 单位办事人员
  • rtc resume
  • sbsetup.exe - sbsetup是什么进程 有什么用
  • mac怎么切换输入方式
  • 留底的进项税额记哪儿?
  • PHP:iconv_strpos()的用法_iconv函数
  • 软件入无形资产还是长期待摊费用了
  • 非居民企业股权转让特殊性税务处理
  • 博登湖下载
  • 门店装修费怎么记会计凭证
  • php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
  • css选择器分哪几类
  • [深度学习] 基于切片辅助超推理库SAHI优化小目标识别
  • php点运算符
  • php getcwd与dirname(__FILE__)区别详解
  • 出口货物视同内销征税的会计核算?
  • mysql存储引擎是什么意思
  • 税务变更了股东工商没变更
  • 兼职人员的工资怎么做账
  • 织梦可以放两套模板吗
  • 织梦设置会员访问
  • 普票需要填写全额发票吗
  • 工资包含福利费吗
  • sql server 2008的安全机制
  • 固定资产盘点怎么做
  • 材料成本差异的会计分录
  • 应交税费余额是什么意思
  • 发票入账是什么意思
  • 企业职工食堂就餐收费
  • 对公账户存款利息分录
  • 固定资产的残值率是什么意思
  • 销售废旧物资如何入账
  • sql 随机
  • 任务栏taskbar 教程
  • centos如何设置ip
  • win7用户账户控制设置电脑重启后恢复
  • windowsxp打不开
  • win8.1如何更改开始菜单
  • wind10怎么重置网络
  • 在linux系统中,用来存在系统所需
  • jquery网页设计
  • cocos2dx-js
  • 安卓版影音播放器哪个好用
  • unity获取当前位置
  • jquery easyui从零开始学pdf
  • jquery示例
  • under code
  • js如何实现图片轮播
  • js创建对象的方法有哪些
  • jquery绑定数据
  • 企业医院和事业医院的区别
  • 怎样在开票系统中增加新的名称
  • 国家发票真伪查验
  • 卡车生产企业
  • 西藏自治区税务局电子税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设