使用Three.js實現神奇的3D文字懸浮效果

dragonir發表於2022-03-09

宣告：本文涉及圖文和模型素材僅用於個人學習、研究和欣賞，請勿二次修改、非法傳播、轉載、出版、商用、及進行其他獲利行為。

背景

在 Three.js Journey 課程示例中，提供了一個使用 Three.js 內建方法實現的 3D 文字懸浮效果的例子，本文使用 React + Three.js 技術棧，參照示例實現類似的效果。本文中涉及到的知識點主要包括：CSS 網格背景、MeshNormalMaterial 法向材質、FontLoader 字型載入器、TextGeometry 文字緩衝幾何體、TorusBufferGeometry 圓環緩衝幾何體、ConeBufferGeometry 圓錐緩衝幾何體、OctahedronBufferGeometry 八面緩衝幾何體、Three.js 後期渲染、GlitchPass 通道、Element.requestFullscreen、Document.exitFullscreen 等。

效果

實現效果如 ? banner 圖所示，頁面主體由位於中心的文字網格模型以及四周的圓環面、圓錐以及八面體構成。隨著 ? 滑鼠在頁面上移動或點選，模型也隨之移動。頁面右上角提供了 2 個按鈕，可以切換頁面背景色和切換故障風格後期特效。雙擊螢幕可以進入或退出全屏。

? 線上預覽：https://3d-dragonir.vercel.app/#/floating

? 或 https://dragonir.github.io/3d/#/floating

已適配:

? PC 端
? 移動端

實現

資源引入

首先引入開發所需要的模組資源，其中 FontLoader 用於載入字型檔案，TextGeometry 用於建立 3D 字型網格，EffectComposer、RenderPass 和 GlitchPass 用於後期特效渲染。

import * as THREE from "three";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';

DOM結構

頁面 DOM 結構非常簡單，容器 #canvas 用於場景渲染，.color_pick 用於切換頁面背景顏色，.pass_button 用於切換故障風格後期渲染。

<div className='floating_page' style={{ backgroundColor: this.state.backgroundColor }}>
  <div id="canvas"></div>
  <input className='color_pick' type="color" onChange={this.handleInputChange} value={this.state.backgroundColor} />
  <button className='pass_button' onClick={this.handleRenderChange}>特效<span className='highlight'>{this.state.renderGlithPass ? '開' : '關'}</span></button>
</div>

設定狀態

backgroundColor 表示當前頁面背景色， renderGlithPass 表示是否開啟後期狀態。自測發現在 iOS Safari 瀏覽器中，故障風格後期渲染會導致模型產生穿模問題 ?，因此使用該引數控制手機端預設關閉後期效果、pc 端預設開啟。

state = {
  backgroundColor: '#164CCA',
  renderGlithPass: !(window.navigator.userAgent.toLowerCase().indexOf('mobile') > 0)
}

網格背景

使用純 CSS 屬性 linear-gradient 實現網格背景來美化頁面 ?。

background-image: linear-gradient(rgba(3, 192, 60, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(3, 192, 60, .3) 1px, transparent 1px);
background-size: 1em 1em;

場景初始化

初始化渲染容器、場景、攝像機，攝像機的位置可根據自身所需調整。render 開啟 alpha 並設定 .setClearAlpha(0) 可將背景色設定為透明。

canvas = document.getElementById('canvas');
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearAlpha(0);
canvas.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, .1, 10000);
camera.position.set(-2 * 10000, 0, 780);

建立材質

本文中所有網格模型都將使用同一種材質 MeshNormalMaterial，應用它的特性，可以使網格模型產生彩色漸變。全域性建立一次，後續開發不需要重複建立，有利於頁面效能提升。

const material = new THREE.MeshNormalMaterial();

`?` MeshNormalMaterial 法向材質

是一種把法向量對映到 RGB 顏色的材質，可以通過觀察模型表面漸變顏色是否連續來檢測模型表面是否平整。

建構函式：

MeshNormalMaterial(parameters : Object)

parameters：可選，用於定義材質外觀的物件，具有一個或多個屬性。

特殊屬性：

.normalMap[Texture]：用於建立法線貼圖紋理，RGB 值會影響每個畫素片段的曲面法線，並更改顏色照亮的方式。
.normalMapType[Integer]：法線貼圖的型別，選項為 THREE.TangentSpaceNormalMap（預設）和 THREE.ObjectSpaceNormalMap。
.normalScale[Vector2]：法線貼圖對材質的影響程度。範圍是 0-1，預設值是 Vector2 設定為 (1, 1)。
.flatShading[Boolean]：定義材質是否使用平面著色進行渲染，預設值為 false。
.morphNormals[Boolean]：定義是否使用 morphNormals。設定為 true 可將 morphNormal 屬性從 geometry 傳遞到 shader。預設值為 false。
.morphTargets[Boolean]：定義材質是否使用 morphTargets，預設值為 false。

建立文字模型

使用 FontLoader 載入 fontface 字型 JSON 檔案，並用 TextGeometry 建立文字幾何體模型。

const loader = new FontLoader();
loader.load('./fonts/helvetiker_regular.typeface.json', font => {
  textMesh.geometry = new TextGeometry('@dragonir\nfantastic\nthree.js\nart work', {
    font: font,
    size: 100,
    height: 40,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 30,
    bevelSize: 8,
    bevelOffset: 1,
    bevelSegments: 12
  });
  textMesh.material = material;
  scene.add(textMesh);
});

`?` FontLoader 字型載入器

使用 JSON 格式中載入字型的一個類，返回 Font, 返回值是表示字型的 Shape 型別的陣列，其內部使用 FileLoader 來載入檔案。

建構函式：

FontLoader(manager: LoadingManager)

manager：載入器所使用的 loadingManager，預設值為 THREE.DefaultLoadingManager。

方法：

.load 從 URL 中進行載入，並將被載入的 texture 傳遞給 onLoad。
- .load(url: String, onLoad: Function, onProgress: Function, onError: Function): null。
- url：檔案的URL或者路徑，也可以為 Data URI。
- onLoad：載入完成時將呼叫。回撥引數是將要被載入的 texture。
- onProgress：將在載入過程中進行呼叫。引數為 XMLHttpRequest 例項，包含 total 和 loaded 位元組。
- onError：載入錯誤時被呼叫。
.parse 以 JSON 格式進行解析，並返回一個 Font。
- .parse (json: Object ): Font。
- json：用於解析的 JSON 結構。

`?` TextGeometry 文字幾何體

用於將文字生成單一幾何體的類，它是由一串給定的文字，以及由載入的 Font 字型和該幾何體 ExtrudeGeometry 父類中的設定所組成的引數構造的。

建構函式：

TextGeometry(text: String, parameters: Object)

text：將要顯示的文字。
parameters：
- font[Font]：THREE.Font 例項。
- size[Float]：字型大小，預設值為 100。
- height[Float]：擠出文字的厚度，預設值為 50。
- curveSegments[Integer]：表示文字的曲線上點的數量，預設值為 12。
- bevelEnabled[Boolean]：是否開啟斜角，預設為 false。
- bevelThickness[Float]：文字斜角的深度，預設值為 20。
- bevelSize[Float]：斜角與原始文字輪廓之間的延伸距離，預設值為 8。
- bevelSegments[Integer]：斜角的分段數，預設值為 3。

? 可以使用facetype.js線上轉換 Three.js 支援的字型。

建立幾何體模型

使用其他 3種 內建幾何體模型圓環、圓錐和八面體來裝飾頁面。裝飾幾何體的數量比較多，為了有效提升頁面效能，需要注意以下兩點：

⭐ 使用 THREE.Group 管理所有幾何體。
⭐ 建立幾何體時使用 BufferAttribute，如使用ConeBufferGeometry而不是ConeGeometry，這樣可以更有效地將資料傳遞到 GPU。

// 批量建立模型方法
generateRandomMesh = (geometry, material, count) => {
  for (let i = 0; i < count; i++) {
    let mesh = new THREE.Mesh(geometry, material);
    let dist = farDist / 3;
    let distDouble = dist * 2;
    // 設定隨機的位置和旋轉角度
    mesh.position.x = Math.random() * distDouble - dist;
    mesh.position.y = Math.random() * distDouble - dist;
    mesh.position.z = Math.random() * distDouble - dist;
    mesh.rotation.x = Math.random() * 2 * Math.PI;
    mesh.rotation.y = Math.random() * 2 * Math.PI;
    mesh.rotation.z = Math.random() * 2 * Math.PI;
    // 手動控制何時重新計算3D變換以獲得更好的效能
    mesh.matrixAutoUpdate = false;
    mesh.updateMatrix();
    group.add(mesh);
  }
}
// 建立100個八面體
const octahedronGeometry = new THREE.OctahedronBufferGeometry(80);
generateRandomMesh(octahedronGeometry, material, 100);
// 建立200個圓環面
const torusGeometry = new THREE.TorusBufferGeometry(40, 25, 16, 40);
generateRandomMesh(torusGeometry, material, 200);
// 建立100個圓錐
const coneGeometry = new THREE.ConeBufferGeometry(40, 80, 80);
generateRandomMesh(coneGeometry, material, 100);
scene.add(group);

`?` TorusBufferGeometry 圓環緩衝幾何體

用於生成圓環幾何體的類。

建構函式：

TorusBufferGeometry(radius: Float, tube: Float, radialSegments: Integer, tubularSegments: Integer, arc: Float)

radius：圓環的半徑，從圓環的中心到管道橫截面的中心，預設值是 1。
tube：管道的半徑，預設值為 0.4。
radialSegments：圓環的分段數，預設值為 8。
tubularSegments：管道的分段數，預設值為 6。
arc：圓環的圓心角，單位是弧度，預設值為 Math.PI * 2。

`?` ConeBufferGeometry 圓錐緩衝幾何體

用於生成圓錐幾何體的類。

建構函式：

ConeBufferGeometry(radius: Float, height: Float, radialSegments: Integer, heightSegments: Integer, openEnded: Boolean, thetaStart: Float, thetaLength: Float)

radius：圓錐底部的半徑，預設值為 1。
height：圓錐的高度，預設值為 1。
radialSegments：圓錐側面周圍的分段數，預設為 8。
heightSegments：圓錐側面沿著其高度的分段數，預設值為 1。
openEnded：指明該圓錐的底面是開放的還是封頂的。預設值為 false，即其底面預設是封頂的。
thetaStart：第一個分段的起始角度，預設為 0。
thetaLength：圓錐底面圓扇區的中心角，通常被稱為 θ。預設值是 2*PI，使其成為一個完整的圓錐。

`?` OctahedronBufferGeometry 八面緩衝幾何體

用於建立八面體的類。

建構函式：

OctahedronBufferGeometry(radius: Float, detail: Integer)

radius：八面體的半徑，預設值為 1。
detail：預設值為 0，將這個值設為一個大於 0 的數將會為它增加一些頂點，使其不再是一個八面體。

滑鼠事件監聽

通過對 ? 滑鼠移動座標和模型座標的相互轉換來新增滑鼠移動和觸控移動事件的監聽方法。

const mouseFX = {
  windowHalfX: window.innerWidth / 2,
  windowHalfY: window.innerHeight / 2,
  coordinates: (coordX, coordY) => {
    mouseX = (coordX - mouseFX.windowHalfX) * 5;
    mouseY = (coordY - mouseFX.windowHalfY) * 5;
  },
  onMouseMove: e => { mouseFX.coordinates(e.clientX, e.clientY) },
  onTouchMove: e => { mouseFX.coordinates(e.changedTouches[0].clientX, e.changedTouches[0].clientY)}
};
document.addEventListener('mousemove', mouseFX.onMouseMove, false);
document.addEventListener('touchmove', mouseFX.onTouchMove, false);

背景色切換

使用一個 input[type='color'] 標籤來實現背景色切換。

handleInputChange = e => {
  this.setState({ backgroundColor: e.target.value });
}

後期渲染

為了更具有衝擊感的視覺效果 ?，我新增了一個故障風格後期渲染特效，並使用一個按鈕開關 ⚙ 來控制開啟和關閉該特效。

composer = new EffectComposer(renderer);
composer.addPass( new RenderPass(scene, camera));
glitchPass = new GlitchPass();
composer.addPass(glitchPass);

handleRenderChange = () => {
  this.setState({ renderGlithPass: !this.state.renderGlithPass });
}

`?` 後期渲染

Three.js 後期渲染處理，是通過疊加渲染通道達到預期視覺效果的過程。實現流程如下：

建立效果組合器：效果組合器是各種處理通道的入口，使用 EffectComposer 物件建立一個效果組合器。
新增通道：新增 RenderPass 通道它將在指定的場景和相機的基礎上渲染出一個新的場景。
組合器更新：在動畫迴圈中，呼叫效果組合器的 render 方法，通道生成效果將在場景中輸出。

`?` GlitchPass 故障風格通道

GlitchPass 通道產生模擬故障風格效果，它只有一個可選配置引數：

goWild 該屬性接收一個布林值，指定是否持續產生電磁風暴效果。

? Three.js 提供了很多後期處理的通道，可以直接使用。同時提供了 ShaderPass 通道，它支援使用自定義 Shader，可以建立高階的自定義後期處理通道。

動畫

在 requestAnimationFrame 中更新場景、相機、和後期渲染通道。

function animate() {
  requestAnimationFrame(animate);
  camera.position.x += (mouseX - camera.position.x) * 0.05;
  camera.position.y += (mouseY * -1 - camera.position.y) * 0.05;
  camera.lookAt(scene.position);
  // 給場景中的立方體網格和字型網格新增自轉動畫
  const t = Date.now() * 0.001;
  const rx = Math.sin(t * 0.7) * 0.5;
  const ry = Math.sin(t * 0.3) * 0.5;
  const rz = Math.sin(t * 0.2) * 0.5;
  group.rotation.x = rx;
  group.rotation.y = ry;
  group.rotation.z = rz;
  textMesh.rotation.x = rx;
  textMesh.rotation.y = ry;
  textMesh.rotation.z = rx;
  renderer.render(scene, camera);
  // 更新後期渲染通道
  composer.render();
}

縮放適配

renderer 和 composer 大小要同時調整。

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

雙擊全屏

監聽頁面 ? 雙擊 dblclick 事件，通過呼叫 requestFullscreen 和 exitFullscreen 進入或退出全屏狀態。

window.addEventListener('dblclick', () => {
  let fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;
  if (!fullscreenElement) {
    if (canvas.requestFullscreen) {
      canvas.requestFullscreen();
    } else if (canvas.webkitRequestFullscreen) {
      canvas.webkitRequestFullscreen();
    }
    console.log('進入全屏')
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
    console.log('退出全屏')
  }
})

`?` Element.requestFullscreen

Element.requestFullscreen 方法用於發出非同步請求使元素進入全屏模式。呼叫此 API 並不能保證元素一定能夠進入全屏模式。如果元素被允許進入全螢幕模式，返回的 Promise 會 resolve，並且該元素會收到一個 fullscreenchange 事件，通知它已經進入全屏模式。如果全屏請求被拒絕，返回的 promise 會變成 rejected 並且該元素會收到一個 fullscreenerror 事件。如果該元素已經從原來的文件中分離，那麼該文件將會收到這些事件。

語法：

var Promise = Element.requestFullscreen(options);

options：可選，一個 FullscreenOptions 物件提供切換到全屏模式的控制選項。

? 這個方法只能在使用者互動或者裝置方向改變的時候呼叫，否則將會失敗。FullscreenOptions 目前唯一的選項是 navigationUI，這控制了是否在元素處於全屏模式時顯示導航條 UI。預設值是 auto，表明這將由瀏覽器來決定是否顯示導航條。

`?` Document.exitFullscreen

Document.exitFullscreen 方法用於讓當前文件退出全屏模式。呼叫這個方法會讓文件回退到上一個呼叫 Element.requestFullscreen 方法進入全屏模式之前的狀態。

語法：

document.exitFullscreen();

到此，示例頁面的全部功能都完成了，可訪問以下連結檢視完整程式碼 ?。

? 完整程式碼：https://github.com/dragonir/3d/tree/master/src/containers/Floating

總結

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

CSS 網格背景
MeshNormalMaterial 法向材質
FontLoader 字型載入器
TextGeometry 文字緩衝幾何體
TorusBufferGeometry 圓環緩衝幾何體
ConeBufferGeometry 圓錐緩衝幾何體
OctahedronBufferGeometry 八面緩衝幾何體
Three.js 後期渲染
GlitchPass 通道
Element.requestFullscreen
Document.exitFullscreen

想了解場景初始化、光照、陰影、基礎幾何體、網格、材質及其他Three.js的相關知識，可閱讀我往期文章。轉載請註明原文地址和作者。如果覺得文章對你有幫助，不要忘了一鍵三連哦 ?。

附錄

本文作者：dragonir 本文地址：https://www.cnblogs.com/dragonir/p/15983473.html

滑鼠懸浮文字實現霓虹燈效果程式碼例項
2017-03-06
css3實現滑鼠懸浮文字水平晃動效果
2017-02-26
CSSS3
滑鼠懸浮div實現旋轉效果
2018-07-09
實現列表懸浮標籤「頂上去」的效果
2017-12-13
滑鼠懸浮實現環形旋轉效果
2018-07-15
滑鼠懸浮圖片實現翻轉效果
2018-07-09
滑鼠懸浮圖片實現縮放效果
2018-07-09
javascript實現滑鼠懸浮圖片實現抖動效果
2017-04-02
JavaScript
利用CSS變數實現炫酷的懸浮效果
2019-04-25
CSS變數
滑鼠懸浮圖片3D翻轉出現文字說明
2018-07-15
3D
利用css變數實現按鈕懸浮效果
2018-10-25
CSS變數
滑鼠懸浮實現連結背景變色效果
2017-03-04
js滑鼠懸浮字串實現字串跳動效果
2017-04-17
JS字串
滑鼠懸浮實現翻牌效果程式碼例項
2017-04-14
CSS3實現的滑鼠懸浮文字顏色漸變效果程式碼例項
2017-02-17
CSSS3
利用CSS變數實現令人震驚的懸浮效果
2018-06-21
CSS變數
css3實現的滑鼠懸浮按鈕動畫效果
2017-03-22
CSSS3動畫
滑鼠懸浮於連結<a>之上出現提示文字效果程式碼
2017-04-01
three.js實現的地球3D旋轉效果
2017-04-17
JS3D
[譯] CSS 變數實現炫酷滑鼠懸浮效果
2019-03-02
CSS變數
Android RecyclerView實現頭部懸浮吸頂效果
2019-03-04
AndroidView
實現滑鼠懸浮table表格行背景變色效果
2017-03-19
滑鼠懸浮實現圖片動畫上下切換效果
2017-04-15
動畫
滑鼠懸浮實現抖動效果例項程式碼
2017-06-20
使用 three.js 中的 CSS3DRenderer 實現 3d 卡片的效果
2019-04-16
JSCSSS33D
css3實現滑鼠懸浮背景上下翻滾效果
2017-03-07
CSSS3
滑鼠懸浮實現當前圖片高亮效果詳解
2017-04-12
滑鼠懸浮可以實現圓角矩形明亮變化效果
2017-03-02
jQuery實現的滑鼠懸浮和選中實現表格行背景變色效果
2017-03-12
jQuery
Android懸浮框的實現
2018-08-13
Android
懸浮窗的一種實現 | Android懸浮窗Window應用
2019-12-19
Android
Android實現仿360手機衛士懸浮窗效果
2014-08-14
Android
js文字內容感應滑鼠懸浮效果程式碼例項
2017-04-02
JS
javascript實現的滑鼠懸浮當前td單元格變色效果
2017-03-31
JavaScript
css3實現的滑鼠懸浮立體動態按鈕效果
2017-03-26
CSSS3
CSS3實現的滑鼠懸浮廣告牌翻轉切換效果
2017-02-17
CSSS3
【轉載】使用WindowManage實現Android懸浮窗
2018-12-20
Android
Andorid 任意介面懸浮窗，實現懸浮窗如此簡單
2017-12-24

使用Three.js實現神奇的3D文字懸浮效果

背景

效果

實現

資源引入

DOM結構

設定狀態

網格背景

場景初始化

建立材質

? MeshNormalMaterial 法向材質

建立文字模型

? FontLoader 字型載入器

? TextGeometry 文字幾何體

建立幾何體模型

? TorusBufferGeometry 圓環緩衝幾何體

? ConeBufferGeometry 圓錐緩衝幾何體

? OctahedronBufferGeometry 八面緩衝幾何體

滑鼠事件監聽

背景色切換

後期渲染

? 後期渲染

? GlitchPass 故障風格通道

動畫

縮放適配

雙擊全屏

? Element.requestFullscreen

? Document.exitFullscreen

總結

附錄

相關文章

`?` MeshNormalMaterial 法向材質

`?` FontLoader 字型載入器

`?` TextGeometry 文字幾何體

`?` TorusBufferGeometry 圓環緩衝幾何體

`?` ConeBufferGeometry 圓錐緩衝幾何體

`?` OctahedronBufferGeometry 八面緩衝幾何體

`?` 後期渲染

`?` GlitchPass 故障風格通道

`?` Element.requestFullscreen

`?` Document.exitFullscreen