![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Threejs
文章平均质量分 79
Yensean
这个作者很懒,什么都没留下…
展开
-
Web3D Art Lab——Threejs案例分享
最后以这种方式呈现给各位,希望可以减少大家coding消耗的时间,也可以帮助那些新手,让他们更快了解web3D的一些技术。是引用的font-end-roadmap的vue版本实现,后期,我会修改成自己觉得的路线,暂时就先用别人的吧,写的挺好的。就像名字一样,里面都是一些非常简单、基础的功能,有些可以用在智慧城市上,比如什么电子围栏,还有一些是扫描图。成长了,组合得更多,就可以开始实现一些更加复杂的功能,高度热力图啊,剖切,测量。自己可以不断精进自己的技术,分享,开源出来,让这个生态变得更好。原创 2023-05-19 09:59:10 · 335 阅读 · 0 评论 -
Threejs—sketch 素描特效实现
最近在研究shadertoy上的各种shader特效,并且想把这些特效移植到threejs里面,下面是最近实现的一个简单的素描特效原创 2022-08-10 15:28:04 · 395 阅读 · 0 评论 -
Threejs如何废置对象How to dispose of objects-内存管理
threejs 如何废置对象(How to dispose of objects),内存管理相关内容转载 2021-12-23 20:33:05 · 732 阅读 · 0 评论 -
Threejs 技巧和窍门大清单
threejs技巧及窍门,主要包括性能优化等翻译 2021-12-23 14:32:14 · 1547 阅读 · 5 评论 -
Threejs—BIM管道流向动态效果
Threejs—BIM管道流向动态效果Threejs—BIM管道流向动态效果Threejs—BIM管道流向动态效果BIM管道流向主要是描述管道内液体流动方向的一个业务场景,在BIM管道分析展示中一个比较常用的场景,这次基于threejs的纹理流动,实现一版效果,主要如下:原理很简单就是借助TubeGeometry,配合MeshPhongMaterial材质,在设置texture 的时候,给一个循环函数,让纹理的offset(偏移)每次都递增,就可以达到感觉有一个流动的特效。// 此部分为了展示为原创 2021-03-11 08:17:42 · 2108 阅读 · 0 评论 -
Threejs+lumion 360全景图
Threejs+lumion 3D全景图Threejs+lumion 3D全景图主要是技术实现步骤lumion部分:threejs部分:Threejs+lumion 3D全景图作者:Han&Yen最近在研究threejs,看到lumion生成的全景图,突发奇想,要是这个两个可以结合下,在web端就可以看到在线的全景360°图片了,就花了点时间和小韩同学一起研究了下,最后的效果如下:主要是技术实现步骤lumion部分:1、 选择360全景操作界面,选择要生成全景图片位置,调整好角度,点击原创 2021-03-11 08:18:01 · 876 阅读 · 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 · 1338 阅读 · 0 评论 -
Threejs多重纹理与过程纹理实现
Threejs多重纹理与过程纹理实现Threejs多重纹理与过程纹理实现具体实现核心代码Threejs多重纹理与过程纹理实现多数时候同一图元是采用单一纹理,但是为了增强显示效果,会存在同一图元多个纹理图的情况,效果比如只有灯光照射的时候才会显示其他图案,其他没有被照射到的地方显示正常灰色,边缘区域是平滑过渡的。这样就为图案的显隐更加增添一丝神秘气息,效果如下:1)对同一个图元采用多幅纹理图,这种技术称为多重纹理。2)在多重纹理变化的边界根据某种规则进行平滑过渡效果,这种技术称为过程纹理。这种平原创 2021-03-10 22:05:45 · 1521 阅读 · 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 · 2426 阅读 · 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 · 638 阅读 · 0 评论