随着前两天冬奥会序幕的开源了正式拉开,也成功带火了本次吉祥物冰墩墩。冰墩憨厚可爱的墩代熊猫形象,让冰墩墩的开源了实体公仔、钥匙扣都被一抢而空,冰墩众多网友呼吁现在真的墩代是「一墩难求」!源码下载
为了圆大家「人手一墩」的开源了梦想,国内一位程序员 dragonir(在稀土掘金上搜dragonir),冰墩用前端 + 建模的墩代技术自己实现了一个冰墩墩,并将代码开源到了 GitHub 上。开源了
下面咱们就来看下具体技术实现细节吧。冰墩
背景
本文使用 Three.js + React 技术栈,墩代实现冬日和奥运元素,开源了制作了一个充满趣味和纪念意义的服务器租用冰墩冬奥主题 3D 页面。
本文涉及到的墩代知识点主要包括:TorusGeometry 圆环面、MeshLambertMaterial 非光泽表面材质、MeshDepthMaterial 深度网格材质、custromMaterial 自定义材质、Points 粒子、PointsMaterial 点材质等。
效果
实现效果如以下