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