本文使用 Three.js + React 技术栈,实现冬日和奥运元素,制作了一个充满趣味和纪念意义的冬奥主题 3D 页面。

随着前两天冬奥会序幕的正式拉开,也成功带火了本次吉祥物冰墩墩。憨厚可爱的熊猫形象,让冰墩墩的实体公仔、钥匙扣都被一抢而空,众多网友呼吁现在真的是「一墩难求」!

为了圆大家「人手一墩」的梦想,国内一位程序员 dragonir(在稀土掘金上搜dragonir),用前端 + 建模的技术自己实现了一个冰墩墩,并将代码开源到了 GitHub 上。

下面咱们就来看下具体技术实现细节吧。

背景

本文使用 Three.js + React 技术栈,实现冬日和奥运元素,制作了一个充满趣味和纪念意义的冬奥主题 3D 页面。

本文涉及到的知识点主要包括:TorusGeometry 圆环面、MeshLambertMaterial 非光泽表面材质、MeshDepthMaterial 深度网格材质、custromMaterial 自定义材质、Points 粒子、PointsMaterial 点材质等。

效果

实现效果如以下