1000粉！使用Three.js製作一個專屬3D獎牌?

dragonir發表於2022-01-20
JS3D

背景

破防了 ?！突然發現 SegmentFault 平臺的粉絲數量已經突破 1000 了，它是我的三個部落格平臺掘金、部落格園、SegmentFault中首個粉絲突破 1000 的，於是設計開發這個頁面，特此紀念一下。非常感謝大家的關注 ?，後續我會更加專注前端知識的整理分享，寫出更多高質量的文章。（希望其他平臺也早日破千 ?）

本文使用 React + Three.js 技術棧，實現粉絲突破 1000 的 3D 紀念頁面，包含的主要知識點包括：Three.js 提供的光源、DirectionLight 平行光、HemisphereLight 半球光源、AmbientLight 環境光、獎牌素材生成、貼圖知識、MeshPhysicalMaterial 物理材質、TWEEN 鏡頭補間動畫、CSS 禮花動畫等。

效果

實現效果圖如文章 ? Banner圖 所示，頁面由包含我的個人資訊的獎牌 ?、1000+ Followers 模型構成，通過以下連結可以實時預覽哦 ?。

? 線上預覽：https://dragonir.github.io/3d...

實現

引入資源

首先引入開發功能所需的庫，其中 FBXLoader 用於加在 1000+ 字型模型、OrbitControls 鏡頭軌道控制、TWEEN 用於生成補間動畫、Stats 用於開發時效能檢視。

import * as THREE from "three";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
import Stats from "three/examples/jsm/libs/stats.module";

場景初始化

這部分內容主要用於初始化場景和引數，詳細講解可點選文章末尾連結閱讀我之前的文章，本文不再贅述。

container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.needsUpdate = true;
container.appendChild(renderer.domElement);
// 場景
scene = new THREE.Scene();
// 給場景設定好看的背景
scene.background = new THREE.TextureLoader().load(backgroundTexture);
// 攝像機
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 0);
camera.lookAt(new THREE.Vector3(0, 0, 0));
// 控制器
controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.enableZoom = false;
controls.enablePan = false;
controls.rotateSpeed = .2;
? 為了達到更好的視覺效果，為 OrbitControls 設定了縮放禁用、平移禁用和減小預設旋轉速度

光照效果

為了模擬真實的物理場景，本示例中使用了 3種 光源。

// 直射光
const cubeGeometry = new THREE.BoxGeometry(0.001, 0.001, 0.001);
const cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 0, 0);
light = new THREE.DirectionalLight(0xffffff, 1);
light.intensity = 1;
light.position.set(18, 20, 60);
light.castShadow = true;
light.target = cube;
light.shadow.mapSize.width = 512 * 12;
light.shadow.mapSize.height = 512 * 12;
light.shadow.camera.top = 80;
light.shadow.camera.bottom = -80;
light.shadow.camera.left = -80;
light.shadow.camera.right = 80;
scene.add(light);
// 半球光
const ambientLight = new THREE.AmbientLight(0xffffff);
ambientLight.intensity = .8;
scene.add(ambientLight);
// 環境光
const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0xfffc00);
hemisphereLight.intensity = .3;
scene.add(hemisphereLight);

? Three.js 提供的光源

Three.js 庫提供了一些列光源，而且沒種光源都有特定的行為和用途。這些光源包括：

光源名稱描述
AmbientLight 環境光這是一種基礎光源，它的顏色會新增到整個場景和所有物件的當前顏色上
PointLight 點光源空間中的一點，朝所有的方向發射光線
SpotLight 聚光燈光源這種光源有聚光的效果，類似檯燈、天花板上的吊燈，或者手電筒
DirectionLight 平行光也稱為無限光。從這種光源發出的光線可以看著平行的。例如，太陽光
HemishpereLight 半球光這是一種特殊光源，可以用來建立更加自然的室外光線，模擬放光面和光線微弱的天空
AreaLight 面光源使用這種光源可以指定散發光線的平面，而不是空間中的一個點
LensFlare 鏡頭眩光這不是一種光源，但是通過 LensFlare 可以為場景中的光源新增眩光效果

? THREE.DirectionLight 平行光

THREE.DirectionLight 可以看作是距離很遠的光，它發出的所有光線都是相互平行的。平行光的一個範例就是太陽光。被平行光照亮的整個區域接受到的光強是一樣的。

建構函式：

new THREE.DirectionLight(color);

屬性說明：

  • position：光源在場景中的位置。
  • target：目標。它的指向很重要。使用 target 屬性，你可以將光源指向場景中的特定物件或位置。此屬性需要一個 THREE.Object3D 物件。
  • intensity：光源照射的強度，預設值：1。
  • castShadow：投影，如果設定為 true，這個光源就會生成陰影。
  • onlyShadow：僅陰影，如果此屬性設定為 true，則該光源只生成陰影，而不會在場景中新增任何光照。
  • shadow.camera.near：投影近點，表示距離光源的哪一個位置開始生成陰影。
  • shadow.camera.far：投影遠點，表示到距離光源的哪一個位置可以生成陰影。
  • shadow.camera.left：投影左邊界。
  • shadow.camera.right：投影右邊界。
  • shadow.camera.top：投影上邊界。
  • shadow.camera.bottom：投影下邊界。
  • shadow.map.width 和 shadow.map.height：陰影對映寬度和陰影對映高度。決定了有多少畫素用來生成陰影。當陰影具有鋸齒狀邊緣或看起來不光滑時，可以增加這個值。在場景渲染之後無法更改。兩者的預設值均為：512。

? THREE.HemisphereLight 半球光光源

使用半球光光源，可以建立出更加貼近自然的光照效果。

建構函式：

new THREE.HeimsphereLight(groundColor, color, intensity);

屬性說明：

  • groundColor：從地面發出的光線顏色。
  • Color：從天空發出的光線顏色。
  • intensity：光線照射的強度。

? THREE.AmbientLight 環境光

在建立 THREE.AmbientLight 時，顏色會應用到全域性。該光源並沒有特別的來源方向，並且不會產生陰影。

建構函式：

new THREE.AmbientLight(color);

使用建議：

  • 通常不能將 THREE.AmbientLight 作為場景中唯一的光源，因為它會將場景中的所有物體渲染為相同的顏色。
  • 使用其他光源，如 THREE.SpotLight 或 THREE.DirectionLight的同時使用它，目的是弱化陰影或給場景新增一些額外顏色。
  • 由於 THREE.AmbientLight 光源不需要指定位置並且會應用到全域性，所以只需要指定個顏色，然後將它新增到場景中即可。

新增網格和地面

新增網格是為了方便開發，可以調整模型的合適的相對位置，本例中保留網格的目的是為了頁面更有 3D景深效果。透明材質的地面是為了顯示模型的陰影。

// 網格
const grid = new THREE.GridHelper(200, 200, 0xffffff, 0xffffff);
grid.position.set(0, -30, -50);
grid.material.transparent = true;
grid.material.opacity = 0.1;
scene.add(grid);
// 建立地面，透明材質顯示陰影
var planeGeometry = new THREE.PlaneGeometry(200, 200);
var planeMaterial = new THREE.ShadowMaterial({ opacity: .5 });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(0, -30, -50);
plane.receiveShadow = true;
scene.add(plane);

建立獎牌

由於時間關係，本示例獎牌模型直接使用 Three.js 自帶的基礎立方體模型 THREE.BoxGeometry 來實現，你也可以使用其他立方體如球體、圓珠等，甚至可以使用 Blender 等專業建模軟體建立自己喜歡的獎牌形狀。（ps：個人覺得立方體也挺好看的 ?)

? 獎牌UI素材生成

? 獎牌上下面和側面貼圖製作：

為了生成的獎牌有黃金質感，本例中使用 ? 該材質貼圖，來生成亮瞎眼的24K純金效果 ?。

? 獎牌正面和背面貼圖製作：

獎牌的正面和背面使用的貼圖是 SegmentFault 個人中心頁的截圖，為了更具有金屬效果，我用 ? 上面金屬材質貼圖給它新增了一個帶有圓角的邊框。

Photoshop 生成圓角金屬邊框具體方法：截圖上面新增金屬圖層 -> 使用框選工具框選需要刪除的內容 -> 點選選擇 -> 點選修改 -> 點選平滑 -> 輸入合適的圓角大小 -> 刪除選區 -> 合併圖層 -> 完成並匯出圖片。

最終的正反面的材質貼圖如 ? 下圖所示，為了顯示更清晰，我在 Photoshop 中同時修改了圖片的對比度 和 飽和度，並加了 SegmentFault 的 Logo 在上面。

? 獎牌正面和背面的法相貼圖製作：

為了生成凹凸質感，就需要為模型新增法相貼圖。使用 ? 上面已經生成的正面和背面的材質貼圖，就可以使用線上工具自動生成法相貼圖。生成時可以根據需要，通過調整 Strength、Level、Blur 等引數進行樣式微調，並且能夠實時預覽。調整好後點選 Download 下載即可。

? 法相貼圖線上製作工具傳送門：NormalMap-Online

通過多次調節優化，最終使用的法相貼圖如 ? 下圖所示。

使用上面生成的素材，現在進行獎牌模型的構建。正面和背面使用個人資訊材質，其他面使用金屬材質。然後遍歷對所有面調整金屬度和粗糙度樣式。

let segmentMap = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(segmentTexture), normalMap: new THREE.TextureLoader().load(normalMapTexture) });
let metalMap = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(metalTexture)});
// 建立紋理陣列
const boxMaps = [metalMap, metalMap, metalMap, metalMap, segmentMap, segmentMap];
// ? 立方體長寬高比例需要和貼圖的大小比例一致，厚度可以隨便定
box = new THREE.Mesh(new THREE.BoxGeometry(297, 456, 12), boxMaps);
box.material.map(item => {
  // 材質樣式調整
  item.metalness = .5;
  item.roughness = .4;
  item.refractionRatio = 1;
  return item;
});
box.scale.set(0.085, 0.085, 0.085);
box.position.set(-22, 2, 0);
box.castShadow = true;
meshes.push(box);
scene.add(box);

? 上面 4 張效果圖依次對應的是：

  • 圖1：建立沒有貼圖的 BoxGeometry，只是一個白色的立方體。
  • 圖2：立方體新增 材質貼圖，此時沒有凹凸效果。
  • 圖3：立方體新增 法相貼圖，此時產生凹凸效果。
  • 圖4：調節立方體材質的 金屬度、粗糙程度 和 反射率，更具有真實感。

? Three.js 中的貼圖

貼圖型別
  • map：材質貼圖
  • normalMap：法線貼圖
  • bumpMap：凹凸貼圖
  • envMap：環境貼圖
  • specularMap：高光貼圖
  • lightMap：光照貼圖
貼圖原理

通過紋理貼圖載入器 TextureLoader() 去新建立一個貼圖物件出來，然後再去呼叫裡面的 load() 方法去載入一張圖片，這樣就會返回一個紋理物件，紋理物件可以作為模型材質顏色貼圖 map 屬性的值，材質的顏色貼圖屬性 map 設定後，模型會從紋理貼圖上採集畫素值。

? MeshPhysicalMaterial 物理材質

MeshPhysicalMaterial 類是 PBR 物理材質，可以更好的模擬光照計算，相比較高光網格材質MeshPhongMaterial 渲染效果更逼真。

如果你想展示一個產品，為了更逼真的渲染效果最好選擇該材質，如果遊戲為了更好的顯示效果可以選擇 PBR 材質 MeshPhysicalMaterial，而不是高光材質 MeshPhongMaterial。
特殊屬性
  • .metalness 金屬度屬性：表示材質像金屬的程度。非金屬材料，如木材或石材，使用 0.0，金屬使用 1.0，中間沒有（通常）. 預設 0.5. 0.0 到 1.0 之間的值可用於生鏽的金屬外觀。如果還提供了粗糙度貼圖 .metalnessMap，則兩個值都相乘。
  • .roughness 粗糙度屬性：表示材質的粗糙程度. 0.0 表示平滑的鏡面反射，1.0 表示完全漫反射. 預設 0.5. 如果還提供粗糙度貼圖 .roughnessMap，則兩個值相乘.
  • .metalnessMap 金屬度貼圖：紋理的藍色通道用於改變材料的金屬度.
  • .roughnessMap 粗糙度貼圖：紋理的綠色通道用於改變材料的粗糙度。
? 注意使用物理材質的時候，一般需要設定環境貼圖 .envMap。

載入1000+文字模型

1000+ 字樣的模型使用 THREE.LoadingManager 和 FBXLoader 載入。詳細使用方法也不再本文中贅述，可參考文章末尾連結檢視我的其他文章，裡面有詳細描述。?

const manager = new THREE.LoadingManager();
manager.onProgress = async(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: 4, z: 60 }, { x: 0, y: 0, z: 0 }, 3600, () => {});
  } else {
    _this.setState({ loadingProcess: Math.floor(loaded / total * 100) });
  }
};
const fbxLoader = new FBXLoader(manager);
fbxLoader.load(textModel, mesh => {
  mesh.traverse(child => {
    if (child.isMesh) {
      // 生成陰影
      child.castShadow = true;
      // 樣式調整
      child.material.metalness = 1;
      child.material.roughness = .2;
      meshes.push(mesh);
    }
  });
  mesh.position.set(16, -4, 0);
  mesh.rotation.x = Math.PI / 2
  mesh.scale.set(.08, .08, .08);
  scene.add(mesh);
});

補間動畫

相機移動實現漫遊等動畫，頁面開啟時，模型載入完畢從大變小的動畫就是通過 TWEEN 實現的。

animateCamera: (camera, controls, newP, newT, time = 2000, callBack) => {
  var tween = new TWEEN.Tween({
    x1: camera.position.x, // 相機x
    y1: camera.position.y, // 相機y
    z1: camera.position.z, // 相機z
    x2: controls.target.x, // 控制點的中心點x
    y2: controls.target.y, // 控制點的中心點y
    z2: controls.target.z, // 控制點的中心點z
  });
  tween.to({
    x1: newP.x,
    y1: newP.y,
    z1: newP.z,
    x2: newT.x,
    y2: newT.y,
    z2: newT.z,
  }, time);
  tween.onUpdate(function (object) {
    camera.position.x = object.x1;
    camera.position.y = object.y1;
    camera.position.z = object.z1;
    controls.target.x = object.x2;
    controls.target.y = object.y2;
    controls.target.z = object.z2;
    controls.update();
  });
  tween.onComplete(function () {
    controls.enabled = true;
    callBack();
  });
  tween.easing(TWEEN.Easing.Cubic.InOut);
  tween.start();
}

動畫更新

最後不要忘了要在 requestAnimationFrame 中更新場景、軌道控制器、TWEEN、以及模型的自轉 ? 等。

// 監聽頁面縮放，更新相機和渲染
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  stats && stats.update();
  controls && controls.update();
  TWEEN && TWEEN.update();
  // 獎牌模型自轉
  box && (box.rotation.y += .04);
}

禮花動畫

最後，通過 box-shadow 和簡單的 CSS 動畫，給頁面新增 ? 綻放效果，營造 ? 歡慶氛圍！

<div className="firework_1"></div>
<div className="firework_2"></div>
<!-- ... -->
<div className="firework_10"></div>

樣式動畫：

[class^=firework_] {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  border-radius: 50%;
  transform: scale(8)
}
.firework_1 {
  animation: firework_lg 2s both infinite;
  animation-delay: 0.3s;
  top: 5%;
  left: 5%;
}
@keyframes firework_lg {
  0%, 100% {
    opacity: 0;
  }
  10%, 70% {
    opacity: 1;
  }
  100% {
    box-shadow: -0.9rem 0rem 0 #fff, 0.9rem 0rem 0 #fff, 0rem -0.9rem 0 #fff, 0rem 0.9rem 0 #fff, 0.63rem -0.63rem 0 #fff, 0.63rem 0.63rem 0 #fff, -0.63rem -0.63rem 0 #fff, -0.63rem 0.63rem 0 #fff;
  }
}

實現效果：

? 完整程式碼 https://github.com/dragonir/3...

總結

本文中主要涉及到的知識點包括：

  • Three.js 提供的光源
  • THREE.DirectionLight 平行光
  • THREE.HemisphereLight 半球光光源
  • THREE.AmbientLight 環境光
  • 獎牌 UI 素材生成
  • Three.js 中的貼圖
  • MeshPhysicalMaterial 物理材質
  • TWEEN 鏡頭補間動畫
  • CSS 禮花動畫

想了解場景初始化、光照、陰影及其他 Three.js 的相關知識，可閱讀我的其他文章。如果覺得文章對你有幫助，不要忘了 一鍵三連 ?。

附錄

相關文章