关于javascript:使用Threejs实现神奇的3D文字悬浮效果

6次阅读

共计 10358 个字符，预计需要花费 26 分钟才能阅读完成。

申明：本文波及图文和模型素材仅用于集体学习、钻研和观赏，请勿二次批改、非法流传、转载、出版、商用、及进行其余获利行为。

在 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.ap…

👀 或 https://dragonir.github.io/3d…

已适配:

💻 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 构造非常简单，容器 #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/3…

本文知识点次要蕴含的的新常识：

CSS 网格背景
MeshNormalMaterial 法向材质
FontLoader 字体加载器
TextGeometry 文本缓冲几何体
TorusBufferGeometry 圆环缓冲几何体
ConeBufferGeometry 圆锥缓冲几何体
OctahedronBufferGeometry 八面缓冲几何体
Three.js 前期渲染
GlitchPass 通道
Element.requestFullscreen
Document.exitFullscreen

想理解场景初始化、光照、暗影、根底几何体、网格、材质及其他 Three.js 的相干常识，可浏览我往期文章。转载请注明原文地址和作者 。如果感觉文章对你有帮忙，不要忘了 一键三连哦 👍。

[1]. Three.js 实现让二维图片具备 3D 成果
[2]. Three.js 实现 2022 冬奥主题 3D 趣味页面，冰墩墩 🐼
[3]. Three.js 制作一个专属 3D 奖牌
[4]. Three.js 实现虎年春节 3D 创意页面
[5]. Three.js 实现脸书元宇宙 3D 动静 Logo
[6]. Three.js 实现 3D 全景侦探小游戏
[7]. Three.js 实现炫酷的酸性格调 3D 页面
[8]. www.ilithya.rocks
[9]. MDN requestFullScreen
[10]. MDN exitFullscreen

正文完

javascript

发表至： javascript

2022-03-09

0

手把手教你用jsx封装Vue中的复杂组件网易云音乐实战项目需求

关于javascript:一个由父子组件传值和nextTick引发的关于宏任务和微任务的思考

关于javascript:前端面试每日-31-第811天

关于javascript:使用这种技巧可以大大地提高前端布局效率

关于cad:Autodesk-AutoCAD-2022-Macwincad2022v2022中文版下

关于javascript:使用Threejs实现神奇的3D文字悬浮效果

背景

成果

实现

资源引入

DOM 构造

设置状态

网格背景

场景初始化

创立材质

`💡` MeshNormalMaterial 法向材质

创立文字模型

`💡` FontLoader 字体加载器

`💡` TextGeometry 文本几何体

创立几何体模型

`💡` TorusBufferGeometry 圆环缓冲几何体

`💡` ConeBufferGeometry 圆锥缓冲几何体

`💡` OctahedronBufferGeometry 八面缓冲几何体

鼠标事件监听

背景色切换

前期渲染

`💡` 前期渲染

`💡` GlitchPass 故障格调通道

动画

缩放适配

双击全屏

`💡` Element.requestFullscreen

`💡` Document.exitFullscreen

总结

附录

站内搜索

关于javascript:使用Threejs实现神奇的3D文字悬浮效果

背景

成果

实现

资源引入

DOM 构造

设置状态

网格背景

场景初始化

创立材质

💡 MeshNormalMaterial 法向材质

创立文字模型

💡 FontLoader 字体加载器

💡 TextGeometry 文本几何体

创立几何体模型

💡 TorusBufferGeometry 圆环缓冲几何体

💡 ConeBufferGeometry 圆锥缓冲几何体

💡 OctahedronBufferGeometry 八面缓冲几何体

鼠标事件监听

背景色切换

前期渲染

💡 前期渲染

💡 GlitchPass 故障格调通道

动画

缩放适配

双击全屏

💡 Element.requestFullscreen

💡 Document.exitFullscreen

总结

附录

站内搜索

`💡` MeshNormalMaterial 法向材质

`💡` FontLoader 字体加载器

`💡` TextGeometry 文本几何体

`💡` TorusBufferGeometry 圆环缓冲几何体

`💡` ConeBufferGeometry 圆锥缓冲几何体

`💡` OctahedronBufferGeometry 八面缓冲几何体

`💡` 前期渲染

`💡` GlitchPass 故障格调通道

`💡` Element.requestFullscreen

`💡` Document.exitFullscreen