数字孪生之WEB三维可视化技术ThreeJS
文章平均质量分 64
将数字化的数据通过3D模型赋予数据更直观的展示,是数字孪生的点睛之笔,注入深入学习开源技术ThreeJS技术,实现Web3D开发
优惠券已抵扣
余额抵扣
还需支付
¥9.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
牟云飞
不会造积木,只会拼积木的程序员
展开
-
Threejs着色器(GPU)编程——感温管网
管网,作为支撑现代城市运转的重要基础设施,是隐藏在地面之下的庞大工程网络。这些管网如同城市的血脉,负责输送各种必要的资源,如水源、热力、燃气等,同时排除废水和其他废弃。数字孪生技术通过构建与现实世界高度一致的虚拟模型,让原本“看不见”的地下工程,现在可以通过数字孪生技术变得“触手可及”。Threejs作为数字孪生技术手段之一,提供了基于GPU编程的语言支持GLSL,将看不见的工程,虚拟可视化,管理人员不仅可以实时查看管网的各种参数数据,还可以在虚拟模型中进行模拟分析和优化,从而提高管理效率,减少安全隐患原创 2024-03-06 19:30:00 · 510 阅读 · 0 评论 -
ThreeJS模型加载动画——从下向上加载
1、首先将模型压扁,获取point的position位置,然后设置y轴的高度为0,并将原始高度记录到modelPositons用于后面还原高度。2、在render动画执行中,获取原始高度,已经当前高度,并在当前高度的基础上,增加每帧的增长高度,直到该帧恢复到原始高度,停止对该点的操作。------------------- 完整示例代码 ------------------原创 2023-08-30 19:21:29 · 538 阅读 · 0 评论 -
ThreeJS加载公路GeoJson数据实现流光效果
threejs加载公路geojson数据,跟加载行政区域的原理一样,唯一不同的是geojson格式不一样,路线并不是连贯起来的,按照路段进行的拆分,在加载的时候问题不大,正常解析然后转墨卡托投影,但是在做流光效果时,需要对geojson进行重新组合.原创 2023-02-24 17:30:29 · 805 阅读 · 0 评论 -
ThreeJS加载geojson数据实现3D地图
geojson内的坐标使用的是wgs-84坐标系,也就是我们说的GPS坐标,所以地图撒点需要先转gps坐标系,然后通过d3的方法将gps坐标系转摩托尔坐标,之后就可以直接在threejs地图上使用。原创 2023-02-22 15:39:07 · 1557 阅读 · 0 评论 -
Threejs封装电流效果
封装 //样条线,根据规划的路径显示电流 云 const curve_catmullRom3 = new THREE.CatmullRomCurve3( [ new THREE.Vector3( 500, 500, 0 ), new THREE.Vector3(900, 600, 0 ), new THREE.Vector3(450, 200, 0 ), new THREE.Vect...原创 2021-10-11 16:53:36 · 2123 阅读 · 4 评论 -
ThreeJS入门篇(4)-场景Scene,三维空间
场景(Scene),是Web3D中的一个情景,在情景中允许放置多个对象、多个灯光、多个照相机、多个渲染器以及多个控制器。换句话说,Scene就是我们的一个3D页面,我们看到的所有东西都需要加载到Scene中。Scene提供了五个属性autoUpdate、background、environment、fog、overrideMaterial,这其中我只使用了两个,也只介绍两个:background:情景背景图,背景图支持普通的2D图片做为背景,也支持使用天空之盒做三维立体视角;fog:雾化效果,支持场原创 2021-05-11 12:01:13 · 2363 阅读 · 2 评论 -
ThreeJS入门篇11—移动3D 控帧
渲染Render更像打印机,将我们前面“拍摄”的图像呈现在浏览器中,根据图像的拍摄方式不同,基于B/S的ThreeJS能够将不同的画面到PC/移动等设备,通过控制每秒帧的数量fbs保持流程的画面感,渲染器根据渲染的物体有不同的类型,多个类型可以组合使用:WebGLRenderer:按照webGL的规范进行渲染显示场景,这种渲染方式最常用 CSS3DRenderer:通过CSS3转换属性将分层的3D应用到DOM元素中,这种渲染方式不支持材质和几何体,只适合普通的DOM元素 CSS2DRender...原创 2021-01-22 22:01:28 · 902 阅读 · 1 评论 -
ThreeJS入门篇(3)-HelloWord规范化重构
上一节中讲到了第一个示例HelloWord,但是这个示例代码很乱,不成体系也不方便后期修改,我们采用面向对象的思想对原示例进行整理,每一个三维场景都可以理解成人拿着相机对一个物体进行拍摄,我们对三维场景进行客观描述有场景、相机、物体、光源,交互事件有视角控制、物体交互控制、渲染成像、特效处理,为了方便研发还有坐标辅助线、视角辅助线、网格辅助线等等辅助功能,所以将其整理成10个独立的部分,这也是之后所有示例的基础版本,每个示例对这10个方法进行不同的填充初始化数据三维背景空间相机原创 2021-01-18 17:52:29 · 417 阅读 · 0 评论 -
ThreeJS入门篇(2)—HelloWord
一个好的Web3D场景开发自创模型太难,外部模型太复杂(3D max、maya、 sketchup );模型需要优化,太大会导致加载时间过长,需要与模型方沟通;现阶段所有的模型都是用别人优化过得,只尝试优化过3D MAX。...原创 2021-01-13 14:59:39 · 748 阅读 · 1 评论 -
ThreeJS入门篇(1)开场扯淡
工业和信息化部主管、中国信息通信研究院主办的专业学术期刊《信息通信技术与政策》,2020年第3期设置“数字孪生城市”专题,以“数字孪生城市”为主题,展示数字孪生城市关键技术、数字孪生城市研究成果以及数字孪生城市发展趋势。2020年2月28日,工信部发布《建材工业智能制造数字转型三年行动计划(2020-2022年)》,在新一代信息通信技术创新场景方向中指出大数据、云平台、5G通信、人工智能、BIM、数字孪生六个方向。2020年4月10日,为深入实施数字经济战略,加快数字产业化和产业数字化,培育新经济发原创 2021-01-13 10:41:01 · 1721 阅读 · 3 评论