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

背景

在 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构造

页面 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