目录
👋 前言
🚀 项目包
⚒️ 字体制作
🌐 地图制作
💡 参考视频 & 项目
开源项目(Vue3+ts+Windcss+Echart+Three.js大屏案例)
开源(教程)
UI风格学习( www.shuzixs.com )
💎知名的Three.js的项目Orillusion:https://space.bilibili.com/1006136755(打造完全开源WebGPU轻量级渲染引擎)VIS-THREE衍生:https://space.bilibili.com/3048588【零代码编辑器(Web3D编辑器)】
👋 前言
效果图:
- 因为做大屏需要,所以搞了一个3D地图的效果
- 我本人对Three.js根本不熟,就靠着GPT和百度,磨出来的
- 感谢大佬们的开源和案例(我会把参考项目的链接放在最后)
🚀 项目包
my-datiew-3D-map.zip - 蓝奏云文件大小:74.4 M|https://wwm.lanzout.com/iUEoE1vq153i启动项目:(node版本大于等于 16.20.2)
npm run dev
不用下载包了,因为我把第三方包都打包在里面了
⚒️ 字体制作
导出的.ttf文件转成json格式
转换工具:http://gero3.github.io/facetype.js/
注意:这些资源,得放在public这里面!
🌐 地图制作
DataV.GeoAtlas地理小工具系列由阿里云DataV数据可视化团队出品,多年深耕数据可视化领域,数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言,让更多人读懂大数据,受惠数据驱动的决策方式。http://datav.aliyun.com/portal/school/atlas/area_selector
获取全部数据:https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
获取边界线:https://geo.datav.aliyun.com/areas_v3/bound/100000.json
在绘制中心点的时候,有些时候,解析中心点的时候,有些偏差,得自己手动修改
💡 参考视频 & 项目
开源项目(Vue3+ts+Windcss+Echart+Three.js大屏案例)
PublicbigScreenPage: 公开3d大屏PublicbigScreenPagehttps://gitee.com/shaohqfspace/PublicbigScreenPage?_from=gitee_search
开源(教程)
【开源】用 three.js 制作你的第一个 3D 地图吧!_哔哩哔哩_bilibilireact-three-fiber 真的会帮你节省很多精力!在线预览地址(或许需科学上网):https://3d-geo-map.vercel.app/ github 项目地址:https://github.com/xiaogua-bushigua/3d-geoMap阿里地图小工具:https://datav.aliyun.com/portal/school/atlas/area_selector, 视频播放量 8944、弹幕量 3、点赞数 233、投硬币枚数 148、收藏人数 639、转发人数 46, 视频作者 小瓜不是瓜h, 作者简介 我不做抽奖号啦,相关视频:我的第一个three.js地图项目,react+framer motion+threejs实现个人网站介绍,Three.js - 智能3D房屋模型展开效果,不要再说这个地图效果开发不出来了,3D地图可视化three.js三维地图vue下钻地图GIS地图大屏源码,three.js地图可视化项目-贵阳模型,three.js教程+cesium教程 实战开源项目-智慧机场-数字孪生三维可视化教程(已经上线)(2022.8.7效果更新),three.js 实现机房可视化 源码,【D3.js】03. 绘制地图,threejs数字展馆项目正式开源啦!https://www.bilibili.com/video/BV1ku4y1X7wU
UI风格学习( www.shuzixs.com )
下全国下钻地图有了,科技感中国三维地图Three.js+vue前端源码_哔哩哔哩_bilibili科技感中国三维地图Three.js+vue前端源码更新,除区域交互、柱状图、飞线动效、散点图、数据标牌、粒子特效、路径轨迹、倒影功能特效外,增加了地图下钻功能,支持全国34个省级行政区,包括23个省、5个自治区、4个直辖市、2个特别行政区1地图区间3级下钻,转需。, 视频播放量 1389、弹幕量 0、点赞数 18、投硬币枚数 14、收藏人数 31、转发人数 4, 视频作者 数字像素, 作者简介 www.shuzixs.com 构建可视化所需要的一切,相关视频:不要再说这个地图效果开发不出来了,牛!Unity3D主视觉地图源码来了,事半功倍,Unity智慧物流园区可视化源码来了,最新!数字孪生可视化UI设计作品,贴心,大佬新素材又来了!,Unity双十一销量可视化大屏源码,Unity智慧园区项目源码来了,数据传输可视化源码都有了,你还在加班?,奥维互动地图最新二维码图源,奥维地图2024图源分享,今天给大家简单亲测一下,喜欢的三连支持一下谢谢,拒绝爆肝,我不允许前端还在为地图开发加班https://www.bilibili.com/video/BV1TF411S7wZ
💎知名的Three.js的项目
Orillusion:https://space.bilibili.com/1006136755(打造完全开源WebGPU轻量级渲染引擎)
VIS-THREE衍生:https://space.bilibili.com/3048588【零代码编辑器(Web3D编辑器)】thing.js:https://www.thingjs.com/guide/?m=sample(搞物联网+web3D)【要钱】