webgl
文章平均质量分 79
webgl学习
xi1213
在前端路上摸爬滚打的菜狗子
展开
-
疫情可视化part3
成都的12月份好冷啊ヽ(≧□≦)ノ,手指头开始造反不听使唤了,项目到这里差不多该是告一段落了,本项目仅作为我学习webgl与可视化结合使用的一个demo,项目是完全开源了的,有想使用的可以直接在我的gitee上clone,链接在本文开头(不要忘记star啊大哥们!)。原创 2022-12-02 19:12:24 · 1203 阅读 · 2 评论 -
疫情可视化part2
最后我发现人的审美真的变化太快了。项目刚搞完:嗯不错!真漂亮!过去一周后:好丑!如果还有后续的话,我可能就要考虑添加自定义主题配色了。原创 2022-11-06 22:36:46 · 32788 阅读 · 54 评论 -
疫情可视化part1
至成都九月份以来疫情原因被封了一两周,居家着实无聊,每天都是盯着微信公众号发布的疫情数据看,那种页面,就我一个前端仔来说,看着是真的丑啊!(⊙_⊙)?既然丑,那就自己动手开整!项目是2022.9.5开始的,截止2022.9.12我完成了大概有八成。主要是想让数据更加直观,而且可离线下载(当然还有装逼!┑( ̄Д  ̄)┍)。我做这个其实还是学到了很多东西,主要是vue2与vue3的区别。以前的this算是可以彻底抛弃了,还有就是组合式api配合setup语法糖,爽啊!就连组件引入后都不用注册了,直接使用。原创 2022-09-13 16:29:17 · 5293 阅读 · 22 评论 -
three.js实现太阳系
刚开始使用three.js时会不太熟悉,想写一些项目增加理解,网上翻了好多文章,不是画立方体就是画三角形,最后偶然看到这个网站,十分炫酷。我们也许没那么牛逼,但我们可以整个简略版的太阳系来练练手,加强理解,增加熟练度。1、绘制宇宙背景。2、添加宇宙星辰。3、绘制行星轨道。4、绘制行星环。5、实现行星自转与公转。6、实现双击行星后镜头的拉近效果(类似cesium的flyTo效果)。7、显示行星描述。项目是以vue开发的浏览地址项目地址废话少说,我们直接开整!构造行星数据我将数据写原创 2022-07-18 23:50:11 · 2383 阅读 · 4 评论 -
three.js添加3d模型
three官方的几何体也就那么几个,想要生成各种各样的模型,其难度十分之大,这时引入外部模型也不失为一种选择。具体引入办法如下。初始化场景 this.scene = new THREE.Scene(); //新建场景 let width = window.innerWidth; //窗口宽度 let height = window.innerHeight; //窗口高度 let k = width / height; //窗口宽高比 this.c原创 2022-03-03 01:20:13 · 8922 阅读 · 18 评论 -
cesium中添加建筑白模
1、在cesium中添加模型依赖于Cesium ion帐户的资产id,在这里创建账户。2、上传模型(模型文件类型在Cesium ion中有说明,模型的提取办法可在这里查看)到账户中并平铺为3D Tiles类型便于cesium的使用。3、复制下资产id,替换下面代码中的id://添加Cesium ion帐户中的模型let newBuildingTileset = viewer.scene.primitives.add( new Cesium.Cesium3DTileset({url: Cesium.原创 2022-02-28 09:51:57 · 1678 阅读 · 2 评论 -
cesium的使用
安装建议使用vue的cesium插件:vue-cli-plugin-cesium。vue add命令可零配置添加cesium:vue add vue-cli-plugin-cesium报错添加完成后如果报错cesium未定义(Eslint 语法校验问题),则在package.json中添加以下代码:{ "dependencies": {}, "devDependencies": {}, "eslintConfig": { "root": true, "env": {原创 2022-02-28 09:52:36 · 955 阅读 · 0 评论 -
three.js的使用
以创建一个立方体为例安装安装three:npm i three使用引用引入three以及three中自带的相机控件OrbitControls用以操控相机:初始化场景scene:场景所有three事物均在其中。camera:使用PerspectiveCamera透视相机,参数需注意调整否则会看不见物体与场景,参数依次为:fov视场,即可看到的角度范围,aspect长宽比,通常为窗口长宽比,near近面,基于相机位置开始渲染场景的位置一般较小默认0.1,far远面,基于相机位置结束渲染场景原创 2022-02-27 00:29:38 · 659 阅读 · 0 评论