Three.js+React實(shí)現(xiàn)3D文字懸浮效果

更新時(shí)間：2022年03月09日 11:33:12 作者：Dragonir

這篇文章主要介紹了如何利用Three.js+React制作出神奇的3D文字懸浮效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手嘗試一下

背景

在 Three.js Journey 課程示例中，提供了一個(gè)使用 Three.js 內(nèi)置方法實(shí)現(xiàn)的 3D 文字懸浮效果的例子，本文使用 React + Three.js 技術(shù)棧，參照示例實(shí)現(xiàn)類(lèi)似的效果。本文中涉及到的知識(shí)點(diǎn)主要包括：CSS 網(wǎng)格背景、MeshNormalMaterial 法向材質(zhì)、FontLoader 字體加載器、TextGeometry 文本緩沖幾何體、TorusBufferGeometry 圓環(huán)緩沖幾何體、ConeBufferGeometry 圓錐緩沖幾何體、OctahedronBufferGeometry 八面緩沖幾何體、Three.js 后期渲染、GlitchPass 通道、Element.requestFullscreen、Document.exitFullscreen 等。

效果

實(shí)現(xiàn)效果如 banner 圖所示，頁(yè)面主體由位于中心的文字網(wǎng)格模型以及四周的圓環(huán)面、圓錐以及八面體構(gòu)成。隨著鼠標(biāo)在頁(yè)面上移動(dòng)或點(diǎn)擊，模型也隨之移動(dòng)。頁(yè)面右上角提供了2個(gè)按鈕，可以切換頁(yè)面背景色和切換故障風(fēng)格后期特效。雙擊屏幕可以進(jìn)入或退出全屏。

在線預(yù)覽：https://3d-dragonir.vercel.app/#/floating

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

已適配:

PC端
移動(dòng)端

實(shí)現(xiàn)

資源引入

首先引入開(kāi)發(fā)所需要的模塊資源，其中 FontLoader 用于加載字體文件，TextGeometry 用于創(chuàng)建 3D 字體網(wǎng)格，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結(jié)構(gòu)

頁(yè)面 DOM 結(jié)構(gòu)非常簡(jiǎn)單，容器 #canvas 用于場(chǎng)景渲染，.color_pick 用于切換頁(yè)面背景顏色，.pass_button 用于切換故障風(fēng)格后期渲染。

<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 ? '開(kāi)' : '關(guān)'}</span></button>
</div>

設(shè)置狀態(tài)

backgroundColor 表示當(dāng)前頁(yè)面背景色， renderGlithPass 表示是否開(kāi)啟后期狀態(tài)。自測(cè)發(fā)現(xiàn)在 iOS Safari 瀏覽器中，故障風(fēng)格后期渲染會(huì)導(dǎo)致模型產(chǎn)生穿模問(wèn)題，因此使用該參數(shù)控制手機(jī)端默認(rèn)關(guān)閉后期效果、pc 端默認(rèn)開(kāi)啟。

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

網(wǎng)格背景

使用純 CSS 屬性 linear-gradient 實(shí)現(xiàn)網(wǎng)格背景來(lái)美化頁(yè)面。

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;

場(chǎng)景初始化

初始化渲染容器、場(chǎng)景、攝像機(jī)，攝像機(jī)的位置可根據(jù)自身所需調(diào)整。render 開(kāi)啟 alpha 并設(shè)置 .setClearAlpha(0) 可將背景色設(shè)置為透明。

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);

創(chuàng)建材質(zhì)

本文中所有網(wǎng)格模型都將使用同一種材質(zhì) MeshNormalMaterial，應(yīng)用它的特性，可以使網(wǎng)格模型產(chǎn)生彩色漸變。全局創(chuàng)建一次，后續(xù)開(kāi)發(fā)不需要重復(fù)創(chuàng)建，有利于頁(yè)面性能提升。

const material = new THREE.MeshNormalMaterial();

MeshNormalMaterial 法向材質(zhì)

是一種把法向量映射到 RGB 顏色的材質(zhì)，可以通過(guò)觀察模型表面漸變顏色是否連續(xù)來(lái)檢測(cè)模型表面是否平整。

構(gòu)造函數(shù)：

MeshNormalMaterial(parameters : Object)

parameters：可選，用于定義材質(zhì)外觀的對(duì)象，具有一個(gè)或多個(gè)屬性。

特殊屬性：

.normalMap[Texture]：用于創(chuàng)建法線貼圖紋理，RGB 值會(huì)影響每個(gè)像素片段的曲面法線，并更改顏色照亮的方式。
.normalMapType[Integer]：法線貼圖的類(lèi)型，選項(xiàng)為 THREE.TangentSpaceNormalMap（默認(rèn)）和 THREE.ObjectSpaceNormalMap。
.normalScale[Vector2]：法線貼圖對(duì)材質(zhì)的影響程度。范圍是 0-1，默認(rèn)值是 Vector2 設(shè)置為 (1, 1)。
.flatShading[Boolean]：定義材質(zhì)是否使用平面著色進(jìn)行渲染，默認(rèn)值為 false。
.morphNormals[Boolean]：定義是否使用 morphNormals。設(shè)置為 true 可將 morphNormal 屬性從 geometry 傳遞到 shader。默認(rèn)值為 false。
.morphTargets[Boolean]：定義材質(zhì)是否使用 morphTargets，默認(rèn)值為 false。

創(chuàng)建文字模型

使用 FontLoader 加載 fontface 字體 JSON 文件，并用 TextGeometry 創(chuàng)建文字幾何體模型。

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 格式中加載字體的一個(gè)類(lèi)，返回 Font, 返回值是表示字體的 Shape 類(lèi)型的數(shù)組，其內(nèi)部使用 FileLoader 來(lái)加載文件。

構(gòu)造函數(shù)：

FontLoader(manager: LoadingManager)

manager：加載器所使用的 loadingManager，默認(rèn)值為 THREE.DefaultLoadingManager。

方法：

.load 從 URL 中進(jìn)行加載，并將被加載的 texture 傳遞給 onLoad。

.load(url: String, onLoad: Function, onProgress: Function, onError: Function): null。
url：文件的URL或者路徑，也可以為 Data URI。
onLoad：加載完成時(shí)將調(diào)用?；卣{(diào)參數(shù)是將要被加載的 texture。
onProgress：將在加載過(guò)程中進(jìn)行調(diào)用。參數(shù)為 XMLHttpRequest 實(shí)例，包含 total 和 loaded 字節(jié)。
onError：加載錯(cuò)誤時(shí)被調(diào)用。

.parse 以 JSON 格式進(jìn)行解析，并返回一個(gè) Font。

.parse (json: Object ): Font。
json：用于解析的 JSON 結(jié)構(gòu)。

TextGeometry 文本幾何體

用于將文本生成單一幾何體的類(lèi)，它是由一串給定的文本，以及由加載的 Font 字體和該幾何體 ExtrudeGeometry 父類(lèi)中的設(shè)置所組成的參數(shù)構(gòu)造的。

構(gòu)造函數(shù)：

TextGeometry(text: String, parameters: Object)

text：將要顯示的文本。

parameters：

font[Font]：THREE.Font 實(shí)例。
size[Float]：字體大小，默認(rèn)值為 100。
height[Float]：擠出文本的厚度，默認(rèn)值為 50。
curveSegments[Integer]：表示文本的曲線上點(diǎn)的數(shù)量，默認(rèn)值為 12。
bevelEnabled[Boolean]：是否開(kāi)啟斜角，默認(rèn)為 false。
bevelThickness[Float]：文本斜角的深度，默認(rèn)值為 20。
bevelSize[Float]：斜角與原始文本輪廓之間的延伸距離，默認(rèn)值為 8。
bevelSegments[Integer]：斜角的分段數(shù)，默認(rèn)值為 3。

可以使用facetype.js在線轉(zhuǎn)換 Three.js 支持的字體。

創(chuàng)建幾何體模型

使用其他 3種內(nèi)置幾何體模型圓環(huán)、圓錐和八面體來(lái)裝飾頁(yè)面。裝飾幾何體的數(shù)量比較多，為了有效提升頁(yè)面性能，需要注意以下兩點(diǎn)：

使用 THREE.Group 管理所有幾何體。
創(chuàng)建幾何體時(shí)使用 BufferAttribute，如使用ConeBufferGeometry而不是ConeGeometry，這樣可以更有效地將數(shù)據(jù)傳遞到 GPU。

// 批量創(chuàng)建模型方法
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;
    // 設(shè)置隨機(jī)的位置和旋轉(zhuǎn)角度
    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;
    // 手動(dòng)控制何時(shí)重新計(jì)算3D變換以獲得更好的性能
    mesh.matrixAutoUpdate = false;
    mesh.updateMatrix();
    group.add(mesh);
  }
}
// 創(chuàng)建100個(gè)八面體
const octahedronGeometry = new THREE.OctahedronBufferGeometry(80);
generateRandomMesh(octahedronGeometry, material, 100);
// 創(chuàng)建200個(gè)圓環(huán)面
const torusGeometry = new THREE.TorusBufferGeometry(40, 25, 16, 40);
generateRandomMesh(torusGeometry, material, 200);
// 創(chuàng)建100個(gè)圓錐
const coneGeometry = new THREE.ConeBufferGeometry(40, 80, 80);
generateRandomMesh(coneGeometry, material, 100);
scene.add(group);

TorusBufferGeometry 圓環(huán)緩沖幾何體

用于生成圓環(huán)幾何體的類(lèi)。

構(gòu)造函數(shù)：

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

radius：圓環(huán)的半徑，從圓環(huán)的中心到管道橫截面的中心，默認(rèn)值是 1。
tube：管道的半徑，默認(rèn)值為 0.4。
radialSegments：圓環(huán)的分段數(shù)，默認(rèn)值為 8。
tubularSegments：管道的分段數(shù)，默認(rèn)值為 6。
arc：圓環(huán)的圓心角，單位是弧度，默認(rèn)值為 Math.PI * 2。

ConeBufferGeometry 圓錐緩沖幾何體

用于生成圓錐幾何體的類(lèi)。

構(gòu)造函數(shù)：

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

radius：圓錐底部的半徑，默認(rèn)值為 1。
height：圓錐的高度，默認(rèn)值為 1。
radialSegments：圓錐側(cè)面周?chē)姆侄螖?shù)，默認(rèn)為 8。
heightSegments：圓錐側(cè)面沿著其高度的分段數(shù)，默認(rèn)值為 1。
openEnded：指明該圓錐的底面是開(kāi)放的還是封頂?shù)?。默認(rèn)值為 false，即其底面默認(rèn)是封頂?shù)摹?/li>
thetaStart：第一個(gè)分段的起始角度，默認(rèn)為 0。
thetaLength：圓錐底面圓扇區(qū)的中心角，通常被稱為 θ。默認(rèn)值是 2*PI，使其成為一個(gè)完整的圓錐。

OctahedronBufferGeometry 八面緩沖幾何體

用于創(chuàng)建八面體的類(lèi)。

構(gòu)造函數(shù)：

OctahedronBufferGeometry(radius: Float, detail: Integer)

radius：八面體的半徑，默認(rèn)值為 1。
detail：默認(rèn)值為 0，將這個(gè)值設(shè)為一個(gè)大于 0 的數(shù)將會(huì)為它增加一些頂點(diǎn)，使其不再是一個(gè)八面體。

鼠標(biāo)事件監(jiān)聽(tīng)

通過(guò)對(duì)鼠標(biāo)移動(dòng)坐標(biāo)和模型坐標(biāo)的相互轉(zhuǎn)換來(lái)添加鼠標(biāo)移動(dòng)和觸摸移動(dòng)事件的監(jiān)聽(tīng)方法。

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);

背景色切換

使用一個(gè) input[type='color'] 標(biāo)簽來(lái)實(shí)現(xiàn)背景色切換。

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

后期渲染

為了更具有沖擊感的視覺(jué)效果，我添加了一個(gè)故障風(fēng)格后期渲染特效，并使用一個(gè)按鈕開(kāi)關(guān)來(lái)控制開(kāi)啟和關(guān)閉該特效。

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 后期渲染處理，是通過(guò)疊加渲染通道達(dá)到預(yù)期視覺(jué)效果的過(guò)程。實(shí)現(xiàn)流程如下：

創(chuàng)建效果組合器：效果組合器是各種處理通道的入口，使用 EffectComposer 對(duì)象創(chuàng)建一個(gè)效果組合器。
添加通道：添加 RenderPass 通道它將在指定的場(chǎng)景和相機(jī)的基礎(chǔ)上渲染出一個(gè)新的場(chǎng)景。
組合器更新：在動(dòng)畫(huà)循環(huán)中，調(diào)用效果組合器的 render 方法，通道生成效果將在場(chǎng)景中輸出。

GlitchPass 故障風(fēng)格通道

GlitchPass 通道產(chǎn)生模擬故障風(fēng)格效果，它只有一個(gè)可選配置參數(shù)：

goWild 該屬性接收一個(gè)布爾值，指定是否持續(xù)產(chǎn)生電磁風(fēng)暴效果。

Three.js 提供了很多后期處理的通道，可以直接使用。同時(shí)提供了 ShaderPass 通道，它支持使用自定義 Shader，可以創(chuàng)建高級(jí)的自定義后期處理通道。

動(dòng)畫(huà)

在 requestAnimationFrame 中更新場(chǎng)景、相機(jī)、和后期渲染通道。

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);
  // 給場(chǎng)景中的立方體網(wǎng)格和字體網(wǎng)格添加自轉(zhuǎn)動(dòng)畫(huà)
  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 大小要同時(shí)調(diào)整。

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

雙擊全屏

監(jiān)聽(tīng)頁(yè)面鼠標(biāo)雙擊 dblclick 事件，通過(guò)調(diào)用 requestFullscreen 和 exitFullscreen 進(jìn)入或退出全屏狀態(tài)。

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

Element.requestFullscreen

Element.requestFullscreen 方法用于發(fā)出異步請(qǐng)求使元素進(jìn)入全屏模式。調(diào)用此 API 并不能保證元素一定能夠進(jìn)入全屏模式。如果元素被允許進(jìn)入全屏幕模式，返回的 Promise 會(huì) resolve，并且該元素會(huì)收到一個(gè) fullscreenchange 事件，通知它已經(jīng)進(jìn)入全屏模式。如果全屏請(qǐng)求被拒絕，返回的 promise 會(huì)變成 rejected 并且該元素會(huì)收到一個(gè) fullscreenerror 事件。如果該元素已經(jīng)從原來(lái)的文檔中分離，那么該文檔將會(huì)收到這些事件。

語(yǔ)法：

var Promise = Element.requestFullscreen(options);

options：可選，一個(gè) FullscreenOptions 對(duì)象提供切換到全屏模式的控制選項(xiàng)。

這個(gè)方法只能在用戶交互或者設(shè)備方向改變的時(shí)候調(diào)用，否則將會(huì)失敗。FullscreenOptions 目前唯一的選項(xiàng)是 navigationUI，這控制了是否在元素處于全屏模式時(shí)顯示導(dǎo)航條 UI。默認(rèn)值是 auto，表明這將由瀏覽器來(lái)決定是否顯示導(dǎo)航條。

Document.exitFullscreen

Document.exitFullscreen 方法用于讓當(dāng)前文檔退出全屏模式。調(diào)用這個(gè)方法會(huì)讓文檔回退到上一個(gè)調(diào)用 Element.requestFullscreen 方法進(jìn)入全屏模式之前的狀態(tài)。

語(yǔ)法：