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

  • 应纳税额减征额包括哪些内容
  • 个人独资企业要承担无限责任吗
  • 生产车间领用材料,用于产品生产
  • 免税行业可以开什么发票
  • 外资企业对应的企业是什么
  • 以旧换新帐务处理
  • 已付款已收货但发票未到账务处理怎么做
  • 补交以前年度增值税的科目处理
  • 变电站是否缴纳房产税
  • 购置股权账务处理流程
  • 哪些政府补助属于国家
  • 工资基数缴纳个税怎么交
  • 差额征税扣除额大于收入时如何开票?
  • 农村合作社开的鸡蛋免税票可以抵进项税吗?
  • 携税宝服务费可以入办公费吗
  • 银票和承兑的区别
  • 购买固定资产的税率是多少
  • 法定盈余公积是留存收益吗
  • 会计中的贷款核算分录是什么?
  • 自建用地是什么性质
  • 公司车辆违章怎么办
  • 固定资产占资产总额比例
  • win11任务栏消失了怎么办
  • win10任务栏变成黑色
  • kb4592438安装失败
  • 时序模型算法
  • 宣告分配现金股利和股票股利的区别
  • 微信小程序使用时间记录查询
  • servlet工作原理和生命周期
  • 基本户可以公对私吗
  • 安装elipse教程
  • 前端实战面试题
  • 新个人所得税起征点2023
  • 一个小柜的货代费用
  • 门店有营业执照仓库加工要办营业执照
  • 公司对其他公司的投资怎么做账
  • mysql5.7设置编码
  • 库存不多
  • 代开专票的个税减免吗?
  • 小规模纳税人企业所得税怎么算
  • 税控盘买了怎么用
  • 报销差旅费会计分录退回现金
  • 销售明细账本怎么填写
  • 抵顶税款怎么办理
  • 小微企业流转税优惠政策
  • 企业用实物资产出资 增值税
  • 银行进账单是什么样子的
  • 机关事业单位以高于市场价租赁房屋
  • 赠送客户的商品怎么入账
  • mysql命令导入
  • MySQL关键字执行顺序
  • mysql默认8小时自动断开
  • 防止黑客入侵的有效做法
  • 微软在印度的投资
  • windowssystem32oobe找不到指定的路径
  • macbookpro双系统和虚拟机
  • windowsxp优化教程
  • xp系统禁止程序联网
  • win10 20h2 v2
  • win8操作中心
  • win10系统出现蓝色框框
  • win7系统aero主题变成黑色
  • window.location.href怎么加请求头
  • android base64传图片
  • perl use of uninitialized
  • javascript简单
  • jquery插件怎么写
  • 创建网元
  • node.js网站
  • nodejs实战教程
  • node.js mac
  • 江苏省国家税务局官网
  • 绿牌电动车需要什么条件
  • 重庆国税电子税务局官网登录入口网址
  • 如何在电子税务局签订三方协议
  • 盐城市地税局稽查大队长
  • 水电费加1
  • 环保税按次申报需要交滞纳金吗
  • 浙江省电子税务局手机开票入口
  • 合肥哪里可以注销电信卡
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设