当前位置：首页 > news >正文

学习threejs，使用three-spritetext实现黑客帝国数字雨效果

news 来源：原创 2025/6/26 6:40:10

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️three-spritetext 文本渲染组件
- - 1.1.1 ☘️代码示例
  - 1.1.2 ☘️构造函数
  - 1.1.3 ☘️属性
  - 1.1.4 ☘️安装和引入
二、🍀使用three-spritetext实现黑客帝国数字雨效果
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用three-spritetext实现黑客帝国数字雨效果，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️three-spritetext 文本渲染组件

three-spritetext 是一个基于 Three.js 的轻量级文本渲染组件，核心功能是将文本绘制到Canvas画布，转换为纹理后应用到Three.js的Sprite对象上。由于使用Sprite，文本会始终面向相机，适合在3D场景中显示动态文字。

1.1.1 ☘️代码示例

import * as THREE from 'three';
import SpriteText from 'three-spritetext';// 初始化场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 创建SpriteText实例
const text = new SpriteText('Hello Three.js!\n多行文本示例', 20, 'blue');
text.position.set(0, 0, 0); // 设置位置
text.fontFace = 'Arial';     // 设置字体
text.padding = [10, 5];     // 设置内边距
text.borderWidth = 2;        // 设置边框宽度
text.borderColor = 'red';    // 设置边框颜色
scene.add(text);// 调整相机位置
camera.position.z = 50;// 动画循环
function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);
}
animate();

1.1.2 ☘️构造函数

new SpriteText(text, textHeight, color)

text: 要显示的文本，支持多行（用 \n 换行）。
textHeight: 文本高度（默认值：10）。
color: 文本颜色（默认值：white，支持CSS颜色值如 #ff0000）。

1.1.3 ☘️属性

属性名	说明	默认值
text	修改显示的文本内容	-
color	文本颜色（支持CSS颜色值）	white
fontSize	字体大小（影响渲染清晰度，值越大越清晰，但性能消耗越高）	90
fontFace	字体类型（如 Arial, “Microsoft YaHei”）	Arial
padding	文本与画布边缘的间距（支持单值或 [水平, 垂直] 数组）	0
borderWidth	边框宽度（支持单值或 [水平, 垂直] 数组）	0
borderColor	边框颜色	white
borderRadius	边框圆角（支持单值或 [左上, 右上, 右下, 左下] 数组）	0
backgroundColor	画布背景色（设为 false 表示透明））	false

1.1.4 ☘️安装和引入

// npm 安装
npm install three-spritetext
// 浏览器直接引入
<script src="//unpkg.com/three-spritetext"></script>

github地址
在线演示

二、🍀使用three-spritetext实现黑客帝国数字雨效果

1. ☘️实现思路

1、初始化Scene三维场景scene。
2、初始化OrthographicCamera正交相机camera，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
3、初始化renderer渲染器renderer，设置renderer的背景色和大小，document绑定renderer。
4、window绑定resize事件，更新renderer大小，更新camera相机投影信息。
5、加载文字雨：按照40列，3个屏幕高度加载文本SpriteText对象。创建animate动画循环方法，循环更新文字雨SpriteText对象的位置，renderer调用render方法进行场景渲染。调用animate方法。具体代码参考下面代码样例。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用three-spritetext实现黑客帝国数字雨效果</title><style>body {margin: 0;}canvas {display: block;}</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three-spritetext@1.8.2/dist/three-spritetext.min.js"></script>
<script type="text/javascript">// 获取窗口尺寸let width = window.innerWidth;let height = window.innerHeight;// 创建场景、相机和渲染器const scene = new THREE.Scene();const camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0.1, 1000);camera.position.z = 100;camera.lookAt(0, 0, 0);const renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(width, height);renderer.setClearColor(0x111111); // 深色背景document.body.appendChild(renderer.domElement);// 处理窗口调整window.addEventListener('resize', () => {width = window.innerWidth;height = window.innerHeight;renderer.setSize(width, height);camera.left = -width / 2;camera.right = width / 2;camera.top = height / 2;camera.bottom = -height / 2;camera.updateProjectionMatrix();});// 定义Matrix特效参数const columnWidth = 40;const numColumns = Math.floor(width / columnWidth);const characterHeight = 20;const verticalSpacing = characterHeight * 1.2;const numCharactersPerColumn = Math.ceil((height * 3) / verticalSpacing); // 覆盖三倍屏幕高度const speed = 3.5; // 平衡速度// 创建列数组const columns = [];for (let i = 0; i < numColumns; i++) {const column = [];const columnOffset = Math.random() * 100; // 每列随机偏移for (let j = 0; j < numCharactersPerColumn; j++) {const text = Math.random() < 0.5 ? '0' : '1';const spriteText = new SpriteText(text);spriteText.color = '#00ff00';spriteText.textHeight = 15;spriteText.material.opacity = 1.0;const x = (i * columnWidth) - ((numColumns - 1) * columnWidth / 2);const y = (height / 2) - (j * verticalSpacing) - columnOffset; // 初始分布覆盖更大范围spriteText.position.set(x, y, 0);scene.add(spriteText);column.push(spriteText);}columns.push(column);}// 动画循环function animate() {requestAnimationFrame(animate);columns.forEach((column, colIndex) => {const columnOffset = Math.random() * 100; // 动态偏移column.forEach((sprite) => {sprite.position.y -= speed;// 计算透明度，越低越透明const opacity = Math.max(0.5, 1.0 - (height / 2 - sprite.position.y) / height);sprite.material.opacity = opacity;if (sprite.position.y < -height / 2) {// 重置到屏幕顶部，保持列内偏移sprite.position.y = height / 2 + columnOffset;sprite.text = Math.random() < 0.5 ? '0' : '1';sprite.material.opacity = 1.0;}});});renderer.render(scene, camera);}animate();
</script>
</body>
</html>