谁还没有冰墩墩？速来领→
冬奥顶流，新晋网红“冰墩墩”，谁又能拒绝可可爱爱的冰墩墩呢？
很多网友反应“这也太可爱了吧”，连摩纳哥亲王也想带回去两个给自己的龙凤胎，请求工作人员再为自己制作一个冰墩墩，不然回去也就“不好交代”了。
作为一名程序员，没抢到也没关系，我们有属于自己的浪漫，我不允许老九的小伙伴还没有冰墩墩，抢不到咱就自己做一个！
思否的一位大佬 dragonir ，凭借高超的前端技术和建模技术，使用 Three.js + React 技术栈，自己创造了一个充满趣味和纪念意义的冬奥主题 3D 页面！
涉及到的知识点主要包括： TorusGeometry 圆环面、 MeshLambertMaterial 非光泽表面材质、 MeshDepthMaterial 深度网格材质、 custromMaterial 自定义材质、 Points 粒子、 PointsMaterial 点材质等。
效果
实现效果如以下 动图所示，页面主要由 2022 冬奥会吉祥物冰墩墩 、奥运五环、舞动的旗帜、树木以及下雪效果 ❄️ 等组成。
在线预览地址：https://dragonir.github.io/3d/#/olympic（部署在 GitHub，加载速度可能会有点慢 ）
我看了之后，就想说两个字：卧槽！奈何本人没文化，一句卧槽走天下！
实现过程
1、引入资源
首先引入开发页面所需要的库和外部资源， OrbitControls 用于镜头轨道控制、 TWEEN 用于补间动画实现、 GLTFLoader 用于加载 glb 或 gltf 格式的3D模型、以及一些其他模型、贴图等资源。
2、页面DOM结构
页面 DOM 结构非常简单，只有渲染 3D 元素的 #container 容器和显示加载进度的 .olympic_loading元素。
3、场景初始化
初始化渲染容器、场景、相机。
4、添加光源
示例中主要添加了两种光源：DirectionalLight 用于产生阴影，调节页面亮度、AmbientLight 用于渲染环境氛围。
5、加载进度管理
使用 THREE.LoadingManager 管理页面模型加载进度，在它的回调函数中执行一些与加载进度相关的方法。本例中的页面加载进度就是在 onProgress 中完成的，当页面加载进度为 100% 时，执行 TWEEN 镜头补间动画。
6、创建地面
本示例中凹凸起伏的地面是使用 Blender 构建模型，然后导出 glb 格式加载创建的。当然也可以直接使用 Three.js 自带平面网格加凹凸贴图也可以实现类似的效果。使用 Blender 自建模型的优点在于可以自由可视化地调整地面的起伏效果。
7、创建冬奥吉祥物冰墩墩
现在添加可爱的冬奥会吉祥物冰墩墩 ，冰墩墩同样是使用 glb 格式模型加载的。
它的原始模型来源于这里，从这个网站免费现在模型后，原模型是使用 3D max 建的我发现并不能直接用在网页中，需要在 Blender 中转换模型格式，还需要调整调整模型的贴图法线，才能还原渲染图效果。
原模型：
冰墩墩贴图：
转换成Blender支持的模型，并在Blender中调整模型贴图法线、并添加贴图:
导出 glb 格式
在 Blender 中给模型添加贴图教程传送门：在Blender中怎么给模型贴图
冰墩墩 🐼它的外面有一层 透明塑料或玻璃质感外壳 ，这个效果可以通过修改模型的透明度、金属度、粗糙度等材质参数实现，最后就可以渲染出如 👆 banner图 所示的那种效果，具体如以下代码所示。
8、创建奥运五环
奥运五环由基础几何模型圆环面 TorusGeometry 来实现，创建五个圆环面，并调整它们的材质颜色和位置来构成蓝黑红黄绿顺序的五环结构。五环材质使用的是 MeshLambertMaterial。
TorusGeometry 圆环面
TorusGeometry 一个用于生成圆环几何体的类。
构造函数：
TorusGemetry(radius:Float,tube:Float,radialSegments:Integer,tubularSegments:Integer,arc:Float)
radius：圆环的半径，从圆环的中心到管道（横截面）的中心。默认值是1。tube：管道的半径，默认值为0.4。radialSegments：圆环的分段数，默认值为8。tubularSegments：管道的分段数，默认值为6。arc：圆环的圆心角（单位是弧度），默认值为Math.PI * 2。
MeshLambertMaterial 非光泽表面材质
一种非光泽表面的材质，没有镜面高光。
该材质使用基于非物理的 Lambertian 模型来计算反射率。这可以很好地模拟一些表面（例如未经处理的木材或石材），但不能模拟具有镜面高光的光泽表面（例如涂漆木材）。
构造函数：
parameters：（可选）用于定义材质外观的对象，具有一个或多个属性。材质的任何属性都可以从此处传入。
9、创建旗帜
旗面模型是从 sketchfab 下载的，还需要一个旗杆，可以在 Blender中添加了一个柱状立方体，并调整好合适的长宽高和旗面结合起来。
旗面贴图：
旗面添加了动画，需要在代码中执行动画帧播放。
10、创建树木
为了充实画面，营造冬日氛围，需要添加了几棵松树 🌲 作为装饰。
添加松树的时候用到一个技巧非常重要：我们知道因为树的模型非常复杂，有非常多的面数，面数太多会降低页面性能，造成卡顿。
本文中使用两个如下图 👇 所示的两个交叉的面来作为树的基座，这样的话树只有两个面数，使用这个技巧可以很大程度上优化页面性能，而且树的样子看起来也是有 3D 感的。
材质贴图：
为了使树只在贴图透明部分透明、其他地方不透明，并且可以产生树状阴影而不是长方体阴影，需要给树模型添加如下 MeshPhysicalMaterial、MeshDepthMaterial 两种材质，两种材质使用同样的纹理贴图，其中 MeshDepthMaterial 添加到模型的 custromMaterial 属性上。
实现效果也可以从上面 Banner 图中可以看到，为了画面更好看，我取消了树的阴影显示。
在 3D 功能开发中，一些不重要的装饰模型都可以采取这种策略来优化。
MeshDepthMaterial 深度网格材质
一种按深度绘制几何体的材质。深度基于相机远近平面，白色最近，黑色最远。
构造函数：
parameters：（可选）用于定义材质外观的对象，具有一个或多个属性。材质的任何属性都可以从此处传入。
特殊属性：
.depthPacking[Constant]：depth packing的编码。默认为BasicDepthPacking。.displacementMap[Texture]：位移贴图会影响网格顶点的位置，与仅影响材质的光照和阴影的其他贴图不同，移位的顶点可以投射阴影，阻挡其他对象，以及充当真实的几何体。.displacementScale[Float]：位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。.displacementBias[Float]：位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。
custromMaterial 自定义材质：给网格添加 custromMaterial 自定义材质属性，可以实现透明外围 png 图片贴图的内容区域阴影。
11、创建雪花
创建雪花 ，需要用到粒子知识。THREE.Points 是用来创建点的类，也用来批量管理粒子。本例中创建了 1500 个雪花粒子，并为它们设置了限定三维空间的随机坐标及横向和竖向的随机移动速度。
Three.js 中，雨、雪、云、星辰 等生活中常见的粒子都可以使用 Points 来模拟实现。
构造函数：
- 构造函数可以接受两个参数，一个几何体和一个材质，几何体参数用来制定粒子的位置坐标，材质参数用来格式化粒子；
- 可以基于简单几何体对象如
BoxGeometry、SphereGeometry等作为粒子系统的参数； - 一般来讲，需要自己指定顶点来确定粒子的位置。
通过 THREE.PointsMaterial 可以设置粒子的属性参数，是 Points 使用的默认材质。
构造函数：
parameters：（可选）用于定义材质外观的对象，具有一个或多个属性。材质的任何属性都可以从此处传入。
材质属性 .blending
材质的.blending 属性主要控制纹理融合的叠加方式，.blending 属性的值包括：
THREE.NormalBlending：默认值THREE.AdditiveBlending：加法融合模式THREE.SubtractiveBlending：减法融合模式THREE.MultiplyBlending：乘法融合模式THREE.CustomBlending：自定义融合模式，与.blendSrc,.blendDst或.blendEquation属性组合使用
材质属性 .sizeAttenuation
粒子的大小是否会被相机深度衰减，默认为 true（仅限透视相机）。
Three.js 向量
几维向量就有几个分量，二维向量 Vector2 有 x 和 y 两个分量，三维向量 Vector3 有x、y、z 三个分量，四维向量 Vector4 有 x、y、z、w 四个分量。
相关API：
Vector2：二维向量Vector3：三维向量Vector4：四维向量
12、镜头控制、缩放适配、动画
总结
本文中主要包含的知识点包括：
- TorusGeometry 圆环面
- MeshLambertMaterial 非光泽表面材质
- MeshDepthMaterial 深度网格材质
- custromMaterial 自定义材质
- Points 粒子
- PointsMaterial 点材质
- 材质属性 .blending 、.sizeAttenuation
- Three.js 向量
进一步优化的空间：
添加更多的交互功能、界面样式进一步优化
吉祥物冰墩墩添加骨骼动画，并可以通过鼠标和键盘控制其移动和交互
- 完整开源代码：
https://github.com/dragonir/3d/tree/master/src/containers/Olympic