![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
WebGL
文章平均质量分 80
Yensean
这个作者很懒,什么都没留下…
展开
-
Web3D Art Lab——Threejs案例分享
最后以这种方式呈现给各位,希望可以减少大家coding消耗的时间,也可以帮助那些新手,让他们更快了解web3D的一些技术。是引用的font-end-roadmap的vue版本实现,后期,我会修改成自己觉得的路线,暂时就先用别人的吧,写的挺好的。就像名字一样,里面都是一些非常简单、基础的功能,有些可以用在智慧城市上,比如什么电子围栏,还有一些是扫描图。成长了,组合得更多,就可以开始实现一些更加复杂的功能,高度热力图啊,剖切,测量。自己可以不断精进自己的技术,分享,开源出来,让这个生态变得更好。原创 2023-05-19 09:59:10 · 331 阅读 · 0 评论 -
Threejs—sketch 素描特效实现
最近在研究shadertoy上的各种shader特效,并且想把这些特效移植到threejs里面,下面是最近实现的一个简单的素描特效原创 2022-08-10 15:28:04 · 389 阅读 · 0 评论 -
Threejs如何废置对象How to dispose of objects-内存管理
threejs 如何废置对象(How to dispose of objects),内存管理相关内容转载 2021-12-23 20:33:05 · 726 阅读 · 0 评论 -
Threejs 技巧和窍门大清单
threejs技巧及窍门,主要包括性能优化等翻译 2021-12-23 14:32:14 · 1542 阅读 · 5 评论 -
专注在BIM可视化的Revit查看神器-BIMView
专注在BIM可视化的Revit查看神器-BIMView安装步骤软件使用使用场景最近圈子的小伙伴在讨论一个事情,就是领导想看模型了,但是奈何他又没有安装Revit,即使是一个50MB的小文件他都看不了,怎么破?或者我这个还要购买一些云平台,上传模型,然后在查看,就没有更直接更方便的方式么?结果就一群热爱BIM的小伙伴做了一款插件,让我用了下,感觉还不错,叫BIMView,他们的想法非常直接,就是想一键导出一个文件,可以方便的查看模型,本地完全不需要安装任何软件就可以查看。这个文件就是一个html的页面,原创 2021-06-08 08:29:41 · 3786 阅读 · 2 评论 -
Threejs—BIM管道流向动态效果
Threejs—BIM管道流向动态效果Threejs—BIM管道流向动态效果Threejs—BIM管道流向动态效果BIM管道流向主要是描述管道内液体流动方向的一个业务场景,在BIM管道分析展示中一个比较常用的场景,这次基于threejs的纹理流动,实现一版效果,主要如下:原理很简单就是借助TubeGeometry,配合MeshPhongMaterial材质,在设置texture 的时候,给一个循环函数,让纹理的offset(偏移)每次都递增,就可以达到感觉有一个流动的特效。// 此部分为了展示为原创 2021-03-11 08:17:42 · 2099 阅读 · 0 评论 -
Threejs 精灵火焰特效 Sprite Firey Aura effect
Threejs 精灵火焰特效 Sprite Firey Aura effectThreejs 精灵火焰特效 Sprite Firey Aura effect核心代码Threejs 精灵火焰特效 Sprite Firey Aura effect最近看了一些关于用shader写的特效,感觉这个火焰一般的效果还有趣,我们经常在一些场景中也是会遇到,废话不多说先上效果:其实原理也比较好理解,比较关键的在于:1、通过上下左右的纹理采样的偏移来实现周围圆环的透明度设置;2、流动的纹理结合这样就行成这个效果原创 2021-03-10 22:11:24 · 1336 阅读 · 0 评论 -
Threejs多重纹理与过程纹理实现
Threejs多重纹理与过程纹理实现Threejs多重纹理与过程纹理实现具体实现核心代码Threejs多重纹理与过程纹理实现多数时候同一图元是采用单一纹理,但是为了增强显示效果,会存在同一图元多个纹理图的情况,效果比如只有灯光照射的时候才会显示其他图案,其他没有被照射到的地方显示正常灰色,边缘区域是平滑过渡的。这样就为图案的显隐更加增添一丝神秘气息,效果如下:1)对同一个图元采用多幅纹理图,这种技术称为多重纹理。2)在多重纹理变化的边界根据某种规则进行平滑过渡效果,这种技术称为过程纹理。这种平原创 2021-03-10 22:05:45 · 1516 阅读 · 0 评论 -
Threejs 高度热力图
Threejs 高度热力图Threejs 高度热力图自定义材质ShaderMaterial生成热力图修改THREE.ShaderChunk.meshphong_frag的源码修改THREE.ShaderChunk.meshphong_vert的源码修改THREE.ShaderChunk.begin_vertex的源码Threejs 高度热力图热力图是比较常见的一个应用场景,很多关于人流密度,受力应力云图,还有污染物的扩散图。如果是依照heatmapjs库的方式生成一个canvas做为纹理,贴在Plane原创 2021-03-10 22:01:46 · 2415 阅读 · 2 评论 -
WebGL Volume Rendering Made Easy
WebGL Volume Rendering Made EasyWebGL Volume Rendering Made Easy1、转换.raw文件成为一张16x16的png图片2、2个render passWebGL Volume Rendering Made EasyWebgl2.0的3D texture可以很好实现体渲染,而不是所有现有平台都能到2.0。最近在看threejs在webgl 1.0版本下如何实现体渲染,http://lebarba.com/blog/上提供了完整的解决方案,可以说是开原创 2021-03-10 19:23:52 · 636 阅读 · 0 评论