「冰墩墩」代碼，開源了！

在下方公眾號后臺回復：JGNB，可獲取杰哥原創(chuàng)的 PDF 手冊。

大家好，我是杰哥。

原文地址：

https://segmentfault.com/a/1190000041363089

背景

迎冬奧，一起向未來！本文使用Three.js + React技術棧，實現(xiàn)冬日和奧運元素，制作了一個充滿趣味和紀念意義的冬奧主題3D頁面。本文涉及到的知識點主要包括：TorusGeometry圓環(huán)面、MeshLambertMaterial非光澤表面材質、MeshDepthMaterial深度網格材質、custromMaterial自定義材質、Points粒子、PointsMaterial點材質等。

效果

實現(xiàn)效果如以下 ?? 動圖所示，頁面主要由2022冬奧會吉祥物冰墩墩、奧運五環(huán)、舞動的旗幟 ??、樹木 ?? 以及下雪效果 ?? 等組成。按住鼠標左鍵移動可以改為相機位置，獲得不同視圖。

?? 在線預覽：https://dragonir.github.io/3d/#/olympic （部署在GitHub，加載速度可能會有點慢 ??）

實現(xiàn)

引入資源

首先引入開發(fā)頁面所需要的庫和外部資源，OrbitControls用于鏡頭軌道控制、TWEEN用于補間動畫實現(xiàn)、GLTFLoader用于加載glb或gltf格式的3D模型、以及一些其他模型、貼圖等資源。

import?React?from?'react';
import?{?OrbitControls?}?from?"three/examples/jsm/controls/OrbitControls";
import?{?TWEEN?}?from?"three/examples/jsm/libs/tween.module.min.js";
import?{?GLTFLoader?}?from?"three/examples/jsm/loaders/GLTFLoader";
import?bingdundunModel?from?'./models/bingdundun.glb';
//?...

頁面DOM結構

頁面DOM結構非常簡單，只有渲染3D元素的#container容器和顯示加載進度的.olympic_loading元素。

<div>
??<div?id="container">div>
??{this.state.loadingProcess?===?100???''?:?(
????<div?className="olympic_loading">
??????<div?className="box">{this.state.loadingProcess}?%div>
????div>
??)}
div>

場景初始化

初始化渲染容器、場景、相機。

container?=?document.getElementById('container');
renderer?=?new?THREE.WebGLRenderer({?antialias:?true?});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth,?window.innerHeight);
renderer.shadowMap.enabled?=?true;
container.appendChild(renderer.domElement);
scene?=?new?THREE.Scene();
scene.background?=?new?THREE.TextureLoader().load(skyTexture);
camera?=?new?THREE.PerspectiveCamera(60,?window.innerWidth?/?window.innerHeight,?0.1,?1000);
camera.position.set(0,?30,?100);
camera.lookAt(new?THREE.Vector3(0,?0,?0));

添加光源

本示例中主要添加了兩種光源：DirectionalLight用于產生陰影，調節(jié)頁面亮度、AmbientLight用于渲染環(huán)境氛圍。

//?直射光
const?light?=?new?THREE.DirectionalLight(0xffffff,?1);
light.intensity?=?1;
light.position.set(16,?16,?8);
light.castShadow?=?true;
light.shadow.mapSize.width?=?512?*?12;
light.shadow.mapSize.height?=?512?*?12;
light.shadow.camera.top?=?40;
light.shadow.camera.bottom?=?-40;
light.shadow.camera.left?=?-40;
light.shadow.camera.right?=?40;
scene.add(light);
//?環(huán)境光
const?ambientLight?=?new?THREE.AmbientLight(0xcfffff);
ambientLight.intensity?=?1;
scene.add(ambientLight);

加載進度管理

使用THREE.LoadingManager管理頁面模型加載進度，在它的回調函數(shù)中執(zhí)行一些與加載進度相關的方法。本例中的頁面加載進度就是在onProgress中完成的，當頁面加載進度為100%時，執(zhí)行TWEEN鏡頭補間動畫。

const?manager?=?new?THREE.LoadingManager();
manager.onStart?=?(url,?loaded,?total)?=>?{};
manager.onLoad?=?()?=>?{?console.log('Loading?complete!')};
manager.onProgress?=?(url,?loaded,?total)?=>?{
??if?(Math.floor(loaded?/?total?*?100)?===?100)?{
????this.setState({?loadingProcess:?Math.floor(loaded?/?total?*?100)?});
????//?鏡頭補間動畫
????Animations.animateCamera(camera,?controls,?{?x:?0,?y:?-1,?z:?20?},?{?x:?0,?y:?0,?z:?0?},?3600,?()?=>?{});
??}?else?{
????this.setState({?loadingProcess:?Math.floor(loaded?/?total?*?100)?});
??}
};

創(chuàng)建地面

本示例中凹凸起伏的地面是使用Blender構建模型，然后導出glb格式加載創(chuàng)建的。當然也可以只使用 Three.js自帶平面網格加凹凸貼圖也可以實現(xiàn)類似的效果。使用Blender自建模型的優(yōu)點在于可以自由可視化地調整地面的起伏效果。

var?loader?=?new?THREE.GLTFLoader(manager);
loader.load(landModel,?function?(mesh)?{
??mesh.scene.traverse(function?(child)?{
????if?(child.isMesh)?{
??????child.material.metalness?=?.1;
??????child.material.roughness?=?.8;
??????//?地面
??????if?(child.name?===?'Mesh_2')?{
????????child.material.metalness?=?.5;
????????child.receiveShadow?=?true;
??????}
??});
??mesh.scene.rotation.y?=?Math.PI?/?4;
??mesh.scene.position.set(15,?-20,?0);
??mesh.scene.scale.set(.9,?.9,?.9);
??land?=?mesh.scene;
??scene.add(land);
});

材質貼圖：

為了使樹只在貼圖透明部分透明、其他地方不透明，并且可以產生樹狀陰影而不是長方體陰影，需要給樹模型添加如下MeshPhysicalMaterial、MeshDepthMaterial兩種材質，兩種材質使用同樣的紋理貼圖，其中 MeshDepthMaterial添加到模型的custromMaterial屬性上。

?let?treeMaterial?=?new?THREE.MeshPhysicalMaterial({
??map:?new?THREE.TextureLoader().load(treeTexture),
??transparent:?true,
??side:?THREE.DoubleSide,
??metalness:?.2,
??roughness:?.8,
??depthTest:?true,
??depthWrite:?false,
??skinning:?false,
??fog:?false,
??reflectivity:?0.1,
??refractionRatio:?0,
});
let?treeCustomDepthMaterial?=?new?THREE.MeshDepthMaterial({
??depthPacking:?THREE.RGBADepthPacking,
??map:?new?THREE.TextureLoader().load(treeTexture),
??alphaTest:?0.5
});
loader.load(treeModel,?mesh?=>?{
??mesh.scene.traverse(child?=>{
????if?(child.isMesh)?{
??????child.material?=?treeMaterial;
??????child.custromMaterial?=?treeCustomDepthMaterial;
????}
??});
??mesh.scene.position.set(14,?-9,?0);
??mesh.scene.scale.set(16,?16,?16);
??scene.add(mesh.scene);
??//?克隆另兩棵樹
??let?tree2?=?mesh.scene.clone();
??tree2.position.set(10,?-8,?-15);
??tree2.scale.set(18,?18,?18);
??scene.add(tree2)
??//?...
});

實現(xiàn)效果也可以從 ?? 上面 Banner 圖中可以看到，為了畫面更好看，我取消了樹的陰影顯示。

?? 在 3D 功能開發(fā)中，一些不重要的裝飾模型都可以采取這種策略來優(yōu)化。

?? MeshDepthMaterial 深度網格材質

一種按深度繪制幾何體的材質。深度基于相機遠近平面，白色最近，黑色最遠。

構造函數(shù)：

MeshDepthMaterial(parameters:?Object)

• parameters：（可選）用于定義材質外觀的對象，具有一個或多個屬性。材質的任何屬性都可以從此處傳入。

特殊屬性：

• .depthPacking[Constant]：depth packing的編碼。默認為BasicDepthPacking。

• .displacementMap[Texture]：位移貼圖會影響網格頂點的位置，與僅影響材質的光照和陰影的其他貼圖不同，移位的頂點可以投射陰影，阻擋其他對象，以及充當真實的幾何體。

• .displacementScale[Float]：位移貼圖對網格的影響程度（黑色是無位移，白色是最大位移）。如果沒有設置位移貼圖，則不會應用此值。默認值為 1。

• .displacementBias[Float]：位移貼圖在網格頂點上的偏移量。如果沒有設置位移貼圖，則不會應用此值。默認值為0。

?? custromMaterial 自定義材質

給網格添加custromMaterial自定義材質屬性，可以實現(xiàn)透明外圍 png 圖片貼圖的內容區(qū)域陰影。

創(chuàng)建雪花

創(chuàng)建雪花 ??，就要用到粒子知識。THREE.Points是用來創(chuàng)建點的類，也用來批量管理粒子。本例中創(chuàng)建了1500個雪花粒子，并為它們設置了限定三維空間的隨機坐標及橫向和豎向的隨機移動速度。

//?雪花貼圖
let?texture?=?new?THREE.TextureLoader().load(snowTexture);
let?geometry?=?new?THREE.Geometry();
let?range?=?100;
let?pointsMaterial?=?new?THREE.PointsMaterial({
??size:?1,
??transparent:?true,
??opacity:?0.8,
??map:?texture,
??//?背景融合
??blending:?THREE.AdditiveBlending,
??//?景深衰弱
??sizeAttenuation:?true,
??depthTest:?false
});
for?(let?i?=?0;?i?1500;?i++)?{
??let?vertice?=?new?THREE.Vector3(Math.random()?*?range?-?range?/?2,?Math.random()?*?range?*?1.5,?Math.random()?*?range?-?range?/?2);
??//?縱向移速
??vertice.velocityY?=?0.1?+?Math.random()?/?3;
??//?橫向移速
??vertice.velocityX?=?(Math.random()?-?0.5)?/?3;
??//?加入到幾何
??geometry.vertices.push(vertice);
}
geometry.center();
points?=?new?THREE.Points(geometry,?pointsMaterial);
points.position.y?=?-30;
scene.add(points);

?? Points 粒子

Three.js中，雨 ???、雪 ??、云 ??、星辰 ? 等生活中常見的粒子都可以使用Points來模擬實現(xiàn)。

構造函數(shù)：

new?THREE.Points(geometry,?material);

• 構造函數(shù)可以接受兩個參數(shù)，一個幾何體和一個材質，幾何體參數(shù)用來制定粒子的位置坐標，材質參數(shù)用來格式化粒子；

• 可以基于簡單幾何體對象如BoxGeometry、SphereGeometry等作為粒子系統(tǒng)的參數(shù)；

• 一般來講，需要自己指定頂點來確定粒子的位置。

?? PointsMaterial 點材質

通過THREE.PointsMaterial可以設置粒子的屬性參數(shù)，是Points使用的默認材質。

構造函數(shù)：

PointsMaterial(parameters?:?Object)

• 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：四維向量

鏡頭控制、縮放適配、動畫

controls?=?new?OrbitControls(camera,?renderer.domElement);
controls.target.set(0,?0,?0);
controls.enableDamping?=?true;
//?禁用平移
controls.enablePan?=?false;
//?禁用縮放
controls.enableZoom?=?false;
//?垂直旋轉角度限制
controls.minPolarAngle?=?1.4;
controls.maxPolarAngle?=?1.8;
//?水平旋轉角度限制
controls.minAzimuthAngle?=?-.6;
controls.maxAzimuthAngle?=?.6;

window.addEventListener('resize',?()?=>?{
??camera.aspect?=?window.innerWidth?/?window.innerHeight;
??camera.updateProjectionMatrix();
??renderer.setSize(window.innerWidth,?window.innerHeight);
},?false);

function?animate()?{
??requestAnimationFrame(animate);
??renderer.render(scene,?camera);
??controls?&&?controls.update();
??//?旗幟動畫更新
??mixer?&&?mixer.update(new?THREE.Clock().getDelta());
??//?鏡頭動畫
??TWEEN?&&?TWEEN.update();
??//?五環(huán)自轉
??fiveCyclesGroup?&&?(fiveCyclesGroup.rotation.y?+=?.01);
??//?頂點變動之后需要更新，否則無法實現(xiàn)雨滴特效
??points.geometry.verticesNeedUpdate?=?true;
??//?雪花動畫更新
??let?vertices?=?points.geometry.vertices;
??vertices.forEach(function?(v)?{
????v.y?=?v.y?-?(v.velocityY);
????v.x?=?v.x?-?(v.velocityX);
????if?(v.y?<=?0)?v.y?=?60;
????if?(v.x?<=?-20?||?v.x?>=?20)?v.velocityX?=?v.velocityX?*?-1;
??});
}

?? 完整代碼：

https://github.com/dragonir/3d/tree/master/src/containers/Olympic

總結

?? 本文中主要包含的新知識點包括：

• TorusGeometry圓環(huán)面

• MeshLambertMaterial非光澤表面材質

• MeshDepthMaterial深度網格材質

• custromMaterial自定義材質

• Points粒子

• PointsMaterial點材質

• 材質屬性.blending、.sizeAttenuation

• Three.js向量

進一步優(yōu)化的空間:

• 添加更多的交互功能、界面樣式進一步優(yōu)化；

• 吉祥物冰墩墩添加骨骼動畫，并可以通過鼠標和鍵盤控制其移動和交互。

真的是太硬核了！dragonir 同學寫的那么詳細，看來他是真的想教會我們。

點擊下方「閱讀原文」直接查看網頁，3D 可視化方向的同學，也可以看 github 源碼來學習。

利用 Python 教你繪制冬奧吉祥物“冰墩墩”