ITman彪叔 - 博客园

webgl(threejs)生成房间楼层

摘要：楔子在很多数字孪生项目中，都会涉及到楼层的建模。楼层的建模由于结构繁多，如果都是建模师进行手动建模，工作量会比较大。而楼层本身的结构，可以抽象成可以通过路径构造的对象(这和之前的文章提及的的管路以及道路类似)，这方便我们通过代码的方式来生成房间楼层。墙体几何对象PathCubeGeometry 阅读全文

posted @ 2022-08-20 15:02 ITman彪叔阅读(409) 评论(0) 推荐(0)

基于webgl(threejs)的路面编辑

摘要：楔子在很多应用中，特别是一些园区类的应用。都需要对园区的地面环境进行展示，路面就是地面的一部分。通常的做法是，都是建模的时候把相关的元素都建好，然后导入到展示系统中进行展示。不过有些情况下，可能建模并不太方便，所以三维编辑器可以直接进行简单的路面编辑显得挺有必要。路面对象扩展简单的路面阅读全文

posted @ 2022-08-11 17:51 ITman彪叔阅读(831) 评论(0) 推荐(0)

WebGL管网展示(及TubeGeometry优化)

摘要：前言管路展示在三维场景中很常见。比如地下管网，建筑里面的水果，暖通管道等等的展示。建立管路的方式主要两种：通过3DMax C4D Blender等建模工具进行建模。通过路径数据，程序生成三维管路。如果需要动态的通过数据生成管路，只能采用第二种方式来生成。生成管路的方式在THREE中，通阅读全文

posted @ 2022-08-03 17:11 ITman彪叔阅读(289) 评论(0) 推荐(0)

WebGL实践之半透阴影

摘要：楔子相信很多人都知道，通过ShadowMap可以产生阴影，通过渲染阴影可以增加场景渲染的对比度，增加渲染的真实效果。如下图所示：但是对于透明或者半透明的对象，WebGL在处理阴影效果的时候，会把他当成一个不透明的对象来处理，这也渲染的阴影效果就显得很假。比如下面树得阴影效果：真实物理得效果阅读全文

posted @ 2022-07-11 16:21 ITman彪叔阅读(227) 评论(0) 推荐(0)

JS数组at函数(获取最后一个元素的方法)介绍

摘要：本文介绍js中数组的at函数，属于比较简单的知识普及性文章，难度不大。 0x00 首先，我们可以思考如下一个问题，如果要获取一个数组的最后一个元素(这是很常用的操作)，我们应该怎么做？相信大部分人能够想到的代码是这样的： let last = array[ array.length - 1]; 嗯阅读全文

posted @ 2022-06-15 14:28 ITman彪叔阅读(503) 评论(0) 推荐(1)

webgl未使用独立显卡报告2

摘要：楔子在上一篇文章《# [https://juejin.cn/post/7074771064286347301] webgl未使用独立显卡报告》发表后，有读者在公众号给我发了一段评论，如下图所示：我通过找电脑测试，发现确实有这个情况，而我之前的文章没有提到这种情况：“在windows下面进行图阅读全文

posted @ 2022-05-12 13:42 ITman彪叔阅读(115) 评论(0) 推荐(0)

WebGL加载本地模型

摘要：前言大部分的webgl框架，比如threejs和babylon等，都可以加载obj和gltf模型。我们的引擎，基于three封装，同样有加载模型的loader，因此加载obj和gltf模型也是很简单就可以实现的。不过加载文件都是在线的文件，也就是通过url的形式进行加载。团队开发的三维可视化阅读全文

posted @ 2022-05-06 13:55 ITman彪叔阅读(180) 评论(0) 推荐(0)

webgl未使用独立显卡报告

摘要： 0x00 楔子最近客户在使用我们的的三维可视化平台的时候，总是会出现浏览器崩溃，webgl context lost的情况。这种请一般出现在电脑配置很低的电脑上，比如没有独显，只有很小现存的集成显卡的电脑。但是客户的电脑大部分都是配置还不错，有独立的显卡。经过摸索和分析，最终发现了问题所在：阅读全文

posted @ 2022-03-14 10:15 ITman彪叔阅读(794) 评论(0) 推荐(0)

使用IndexedDB缓存给WebGL三维程序加速

摘要：前言使用webgl开发三维应用的时候，经常会发现三维场景加载比较慢，往往需要等待挺长时间，这样用户的体验就很不友好。造成加载慢的原因，主要是三维应用涉及到的资源文件会特别多，这些资源文件主要是模型及其图片，往往这些模型和图片都会比较大。为了加快三维场景的加快速度，可以使用IndexedDB在客阅读全文

posted @ 2022-02-09 15:58 ITman彪叔阅读(734) 评论(0) 推荐(1)

threejs 贴图动画总结

摘要：引言在三维可视化中，会涉及到很多动画，其中贴图动画是其中很重要的一种，本文介绍几种贴图动画的思路，供大家一起探讨。流动动画流动动画通过设置贴图的repeat属性，并不断改变贴图对象的offset让贴图产生流动效果。这种动画不难实现，首先加载贴图，如下所示： let img = new Ima 阅读全文

posted @ 2021-12-17 12:14 ITman彪叔阅读(1316) 评论(0) 推荐(0)