3D开发专栏
文章平均质量分 54
本专栏主要是总结孪生3d的一些技巧和案例,项目使用的是vue3+vite+ant,技术使用的是threejs的138版本。希望对大家的孪生技术有所提升,当然对unity的开发也有借鉴的作用。
arguments_zd
一个前端工程师,原先用过angular.js,现在正在开发vue2.0和vue3.0的项目,一直在学习可视化相关部分,希望在可视化方面有自己的一席之地。
展开
-
十八、QGIS的作用和下载
最近在学习webGIS的时候,发现路径文件是geoJSON文件,那么如果是你没有这个文件怎么办,从哪里能够获取呢,我最近就查询了文档,发现大多数都是shp转geoJSON,或者是osm转geoJSON,那如何去转换呢,就有两个方法,如果只关注QGiS,第一个方法可以忽略。shp转geoJSON只是它一个很小的功能,它还能自己创建点,线,面合并、编辑等功能,还支持PostGis数据库、源码可更改操作,有的我还不知道,还需要慢慢研究。原创 2024-04-23 10:30:42 · 128 阅读 · 0 评论 -
十七、openstreetmap下载全球任意地方的地理信息
在我们webGIS开发的时候,无论是高德地图还是百度地图,都会牵扯到街道路线的文件信息,如果只是省市区的区域或者点的信息,只需要从高德API获取或者到echarts上获取就行了,那不是常规的省市区,只是要求只有一个角,或者就是某个街道的信息呢,能够怎么获取呢。原创 2024-04-23 10:22:14 · 124 阅读 · 0 评论 -
十六、Qgis工具如何将shp转换geoJson类型文件
在使用GIS地图的时候线路图是非常重要的一个部分,根据以前的下载方法下载好了Qgis工具,那么如何将在openstreetmap下载下来的.shp文件转换为geoJson呢原创 2024-04-23 10:17:19 · 477 阅读 · 0 评论 -
十五、CSS3DObject和CSS2DObject的区别
在3d场景中我们会遇到很多标签,主要分为三种,css3dobject、css2dobject、css3dsprite三种,今天主要说说css3dobject和css2dobject的相似点和区别。原创 2024-01-16 17:33:01 · 527 阅读 · 0 评论 -
十四、Three场景物体增加描边
以上就是实现物体描边的步骤,只需要调节composer.js里面outlineParams的参数就可以调节到你需要的描边的颜色、粗细等参数,还有是否闪烁,闪烁的交替颜色等,如果还有不懂的可以联系我哦。项目的场景中需要点击建筑物产生描边的效果,看着很是不错,本期就来给大家讲解一下怎么来实现。本次使用的是threejs138版本,在vue3+vite+ant的项目中使用。原创 2024-01-16 15:22:26 · 309 阅读 · 0 评论 -
十、Three场景实现多个物体的合并
目的产品需求是让物体的光柱墙包含一个多边形的区域,二而我的多边形只能使用原型,方向,多边形。那么再研究的时候就需要将这些多边形合并成为一个形状,那么就行实现了。原创 2024-01-15 08:59:52 · 903 阅读 · 0 评论 -
十三、Three场景物体增加发光特效
物体发光效果非常炫酷,本期来讲three场景内物体自带发光效果怎么来实现。本次使用的是threejs138版本,在vue3+vite+ant的项目中使用。原创 2024-01-15 17:41:03 · 1139 阅读 · 0 评论 -
十二、three大场景的阴影效果怎么实现
three3d大场景的阴影效果不能使用聚光灯,那么要使用什么方法呢,现在我们来研究一下。原创 2024-01-15 09:23:07 · 382 阅读 · 0 评论 -
十一、three场景实现太阳光晕
大概内容为以下,其中16个参数,分别为是否展示、位置、透明度、星形点数,炫光大小,太阳大小,闪烁速度,锐化数、刻度,是否旋转,是否光斑变形,是否开启重影,启用或禁用星爆,重影比例数,启用或禁用传统条纹,启用或禁用跟随鼠标镜头光斑。这个灯光,而是在场景里面能真实看到的光线特效,也可以叫做光晕。原创 2024-01-15 09:16:55 · 198 阅读 · 0 评论 -
九、IndexedDB前端缓存
在通才 3D 数字工厂项目中,由于场景文件(glb 资源文件)过大,并且每次加载页面时,glb 文件都会被重新加载,造成页面加载缓慢,最后通过保存生成 Blob 格式存储到 IndexedDB 中,增加文件缓存,减少资源重复加载。原创 2024-01-12 17:48:55 · 1175 阅读 · 0 评论 -
Three场景实现多个物体的合并
产品需求是让物体的光柱墙包含一个多边形的区域,二而我的多边形只能使用原型,方向,多边形。原创 2023-11-17 10:34:31 · 77 阅读 · 0 评论 -
基于threejs的3d学校示例
基于threejs的一个学校模型,包含黑夜切换,视频播放,漫游模式等原创 2023-10-12 09:09:33 · 281 阅读 · 0 评论 -
基于threejs的3d可视化工厂示例
源码下载地址在文章末尾!原创 2023-10-11 14:50:13 · 462 阅读 · 3 评论 -
八、3d场景的区域光墙
在遇到区域展示的时候我们就能看到炫酷的区域选中效果,那么代码是怎么编辑的呢,今天咱们就好好说说,下面看实现效果。原创 2023-09-28 14:22:18 · 655 阅读 · 0 评论 -
七、热力图展示
在开发3d模型之中,热力图是非常常见的需求,比如需要了解人口密度,空气质量,热力分布等这些都需要热力图来展示,那么3d常见的热力图是怎么实现的呢,现在我们就来看看。先看效果图。原创 2023-09-28 12:05:41 · 627 阅读 · 0 评论 -
六、如何让卡片一直对着摄像头
上期我们创建了卡片,那么如何让卡片一直面向浏览器。这个交互有一部分公司还是很需要的,今天我们就来讲讲,先看效果图原创 2023-09-28 11:28:49 · 99 阅读 · 0 评论 -
五、3d场景的卡片展示的创建
在我们3d的开发中,对某一些建筑和物体进行解释说明是非常常见的现象,那么就不得不说卡片的展示了,卡片展示很友好的说明了当前物体的状态,一目了然,下面就是效果图。原创 2023-09-28 10:33:35 · 1458 阅读 · 1 评论 -
四、如何改变观察视角
只要讲了three3d场景中的两个补间动画的实现方式。原创 2023-09-25 09:28:26 · 72 阅读 · 0 评论 -
三、gsap(动画)
GSAP JS顾名思义是指GSAP的js版本,GSAP JS是GreenSock公司新出的一个2D动画引擎,可以说是AS版本的移植版,虽然功能还不够AS版本的完善,但是一样是非常强大、高效、好用的,据说它的运行速度是JQuery的20倍。一个为ActionScript 版本,已经在flash平台上运行多年,是一个“轻量级”、“高效率”、强大的2D动画引擎,一直深受ASer(学ActionScript的人都叫自己 ASer)的欢迎,学AS的人,没有一个说是不知道、没使用过GSAP的。原创 2023-09-25 09:15:42 · 151 阅读 · 0 评论 -
二、飞线或者路线的实现(TubeBufferGeometry:管道缓冲几何体)
在做three大屏的时候我们经常会遇到绘制发光路线和指向的情况,那么就需要使用到管道(TubeBufferGeometry)这个API。。原创 2023-09-21 17:06:38 · 200 阅读 · 0 评论 -
一、three场景的构建结构
three场景的构建组成原创 2023-09-21 16:48:48 · 79 阅读 · 0 评论 -
模型文件放到线上(CDN)是否会优化加载的研究
最近在3d场景开发中,想让模型加载的更快,原先在开发其他项目的时候,发现放到线上(CDN)这个方法如果网速好就会影响加载和展示的速度。原创 2023-08-09 10:22:55 · 163 阅读 · 0 评论 -
glb/gltf文件打包的几种方法
主要实现了再项目中对glb或者gltf模型文件的压缩的方法,原创 2023-08-07 20:13:10 · 1283 阅读 · 0 评论