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

国庆特别篇：使用 Three.js 绘制中国国旗

news 2025/10/2 10:58:04

国庆特别篇：使用 Three.js 绘制中国国旗

引言
项目目标
实现步骤
- 1. 初始化 Three.js 场景
- 2. 创建国旗背景
- 3. 创建五角星
- 4. 添加五角星
- 5. 添加文字
- 6. 添加动画和交互效果
优化建议
总结

引言

Three.js 是一个功能强大的 JavaScript 3D 库，广泛应用于 Web 三维开发领域。无论是创建简单的 3D 模型，还是实现复杂的交互式场景，Three.js 都能提供灵活且高效的解决方案。本文将以绘制中国国旗为例，详细讲解如何使用 Three.js 实现这一目标，并通过代码实现和优化，帮助开发者理解 Three.js 的基本用法和应用场景。

项目目标

我们的目标是通过 Three.js 创建一个动态的中国国旗模型，包含以下功能：

绘制红色国旗背景。
在左上角绘制一个大五角星。
在大星右侧绘制四个小五角星。
在国旗下方添加“国庆快乐！”的文字。
实现国旗和文字的旋转动画。
添加交互效果（鼠标悬停时国旗和文字放大）。

实现步骤

1. 初始化 Three.js 场景

首先，我们需要创建 Three.js 的基本场景结构，包括场景、相机和渲染器。

// 初始化场景、相机和渲染器
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);

THREE.Scene() 创建一个空场景。
THREE.PerspectiveCamera() 创建一个透视投影相机，设置视场角、宽高比、近裁剪面和远裁剪面。
THREE.WebGLRenderer() 创建一个 WebGL 渲染器，并设置渲染器的大小为窗口的宽高。

2. 创建国旗背景

国旗的背景是一个红色矩形，我们可以通过 THREE.PlaneGeometry 创建一个平面几何体，并使用 THREE.MeshBasicMaterial 设置红色材质。

// 创建国旗背景（红色矩形）
const flagGeometry = new THREE.PlaneGeometry(6, 4);
const flagMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const flag = new THREE.Mesh(flagGeometry, flagMaterial);
flag.rotation.x = -Math.PI / 2; // 使国旗垂直于屏幕
scene.add(flag);

PlaneGeometry(6, 4) 创建一个 6x4 的平面。
MeshBasicMaterial({ color: 0xff0000 }) 设置红色材质。
flag.rotation.x = -Math.PI / 2 使国旗垂直于屏幕。

3. 创建五角星

五角星是国旗的核心元素，我们需要创建一个函数来生成五角星模型。

// 创建五角星函数
function createStar(size) {const starGeometry = new THREE.BufferGeometry();const starMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });const points = [];const vertices = 5;for (let i = 0; i < vertices; i++) {const angle = (i * 2 * Math.PI) / vertices;const x = size * Math.cos(angle);const y = size * Math.sin(angle);points.push(new THREE.Vector3(x, y, 0));}starGeometry.setFromPoints(points);const star = new THREE.Mesh(starGeometry, starMaterial);star.rotation.x = -Math.PI / 2;return star;
}

createStar(size) 函数用于生成五角星模型。
使用 BufferGeometry 和 MeshBasicMaterial 创建五角星。
通过循环计算五角星的顶点坐标，并生成几何体。

4. 添加五角星

接下来，我们需要在场景中添加大星和小星。

// 创建大星
const bigStar = createStar(0.5);
bigStar.position.set(-1.5, 1.5, 0);
scene.add(bigStar);// 创建小星
const smallStar = createStar(0.2);// 小星的位置
const smallStarsPosition = [{ x: -1.3, y: 0.5, z: 0 },{ x: -1.3, y: 1.0, z: 0 },{ x: -1.3, y: 1.5, z: 0 },{ x: -1.3, y: 2.0, z: 0 }
];smallStarsPosition.forEach(pos => {const star = smallStar.clone();star.position.set(pos.x, pos.y, pos.z);scene.add(star);
});

createStar(0.5) 创建大星，并设置其位置。
createStar(0.2) 创建小星，并通过 smallStarsPosition 数组设置小星的位置。

5. 添加文字

为了在国旗下方添加“国庆快乐！”的文字，我们需要使用 THREE.TextGeometry 和 THREE.FontLoader。

// 创建文字
const loader = new THREE.FontLoader();
loader.load('https://cdn.jsdelivr.net/npm/three@0.128.0/examples/fonts/helvetiker_bold.typeface.json', function(font) {const textGeometry = new THREE.TextGeometry('国庆快乐！', {font: font,size: 0.5,height: 0.1,curveSegments: 12,bevelEnabled: true,bevelThickness: 0.02,bevelSize: 0.02,bevelOffset: 0,bevelSegments: 5});const textMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });const text = new THREE.Mesh(textGeometry, textMaterial);text.position.set(0, -1.5, 0);text.rotation.x = -Math.PI / 2;scene.add(text);
});

使用 FontLoader 加载字体文件。
使用 TextGeometry 创建文字几何体，并设置文字的大小、高度、斜面效果等。
使用 MeshPhongMaterial 设置文字材质。

6. 添加动画和交互效果

为了使国旗更具动态效果，我们可以添加旋转动画和交互效果。

// 设置相机位置
camera.position.z = 10;// 添加旋转动画
function animate() {requestAnimationFrame(animate);// 国旗和文字缓慢旋转flag.rotation.y += 0.01;text.rotation.y += 0.01;renderer.render(scene, camera);
}// 开始动画
animate();// 添加交互效果
flag.addEventListener('mouseover', function() {flag.scale.set(1.2, 1.2, 1);text.scale.set(1.2, 1.2, 1);
});flag.addEventListener('mouseout', function() {flag.scale.set(1, 1, 1);text.scale.set(1, 1, 1);
});

animate() 函数实现国旗和文字的旋转动画。
使用 requestAnimationFrame 实现流畅的动画效果。
通过 addEventListener 添加鼠标悬停和移出事件，实现国旗和文字的缩放效果。

优化建议

性能优化：
- 如果场景复杂度较高，可以考虑使用 THREE.BufferGeometry 替换 THREE.Geometry，以提高性能。
- 减少几何体的顶点数量，优化五角星的生成逻辑。
代码结构优化：
- 将国旗、五角星和文字的创建逻辑封装成独立的函数，提高代码的可维护性。
- 使用模块化开发，将不同功能的代码分离，便于扩展和维护。
视觉优化：
- 可以尝试使用不同的材质（如 THREE.MeshPhongMaterial）来增强视觉效果。
- 添加更多交互效果，如点击国旗时播放音效或显示更多信息。