随着 Web 技术的不断发展,用户对于网页交互性和视觉效果的要求也越来越高。3D 图形在网页中的应用能够为用户带来更加沉浸式的体验。本项目的目标是利用 Three.js 库创建一个包含有趣 3D 文字和随机分布的圆环物体的场景,展示 Three.js 在前端 3D 图形开发中的强大能力。
效果图:
一、技术选型
- Three.js:强大的 JavaScript 3D 图形库,提供了丰富的功能和工具,用于创建和渲染 3D 场景。
- React:流行的前端框架,用于构建用户界面和管理项目的状态。
- FontLoader 和 TextGeometry:Three.js 中的模块,用于加载字体和创建 3D 文字几何形状。
- OrbitControls:Three.js 的示例模块,提供了方便的轨道控制器,用于在 3D 场景中进行交互操作。
二、代码实现
1. 引入所需模块
import { useEffect, useRef, useState } from 'react';
import './index.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
import helvetikerText from 'three/examples/fonts/helvetiker_regular.typeface.json';
import mapcapImg from '@/assets/3Dtext/8.png';
2. 创建 Canvas
// Canvas
const canvas = document.querySelector("canvas.webgl");
3. 初始化 Three.js 场景
// 场景
const scene = new THREE.Scene();
// texture
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(mapcapImg);
4. 创建 3D 文字模型
// 文字模型
const fontLoader = new FontLoader();
const font = fontLoader.parse(helvetikerText);
const textGeometry = new TextGeometry('Hello World', {
font: font,
size: 3,
height: 1,
curveSegments: 10,
bevelEnabled: true,
bevelThickness: 0.5,
bevelSize: 0.1,
bevelSegments: 10
});
const textMaterial = new THREE.MeshMatcapMaterial({ matcap: texture });
const textMesh = new THREE.Mesh(textGeometry, textMaterial);
textGeometry.center();
scene.add(textMesh);
5. 创建随机分布的圆环物体
for (let i = 0; i < 200; i++) {
const tourgeomery = new THREE.TorusGeometry(1, 0.6, 16, 100);
const material = new THREE.MeshMatcapMaterial({ matcap: texture });
const cube = new THREE.Mesh(tourgeomery, material);
const random = Math.random() * 1.5;
cube.position.set(
(Math.random() - 0.5) * 50,
(Math.random() - 0.5) * 50,
(Math.random() - 0.5) * 50,
);
cube.rotation.set(
Math.random() * Math.PI,
Math.random() * Math.PI,
Math.random() * Math.PI
);
cube.scale.set(random, random, random);
scene.add(cube);
}
6. 设置相机和渲染器
// 相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 40);
camera.lookAt(0, 0, 0);
// 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
threeRef.current.appendChild(renderer.domElement);
renderer.render(scene, camera);
7. 添加轨道控制器并设置动画循环
// 控制器
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
//循环函数
const tick = () => {
const elapsedTime = clock.getElapsedTime();
// Update controls
controls.update();
// Render
renderer.render(scene, camera);
// Call tick again on the next frame
window.requestAnimationFrame(tick);
};
tick();
三、效果展示
当运行这个项目时,你将看到一个充满趣味的 3D 场景,其中有醒目的 “Hello World” 文字和随机分布的圆环物体。通过轨道控制器,你可以自由地旋转、缩放和移动视角,从不同角度欣赏这个 3D 世界。
四、总结
通过这个项目,我们展示了如何使用 Three.js 和 React 来创建一个有趣的 3D 文字场景。Three.js 提供了强大的功能和灵活性,使得我们能够在网页上创建出令人惊叹的 3D 图形效果。在未来,我们可以进一步扩展这个项目,添加更多的交互元素、动画效果或者与用户的互动功能,为用户带来更加丰富的体验。
希望这篇文章能够帮助你了解如何使用 Three.js 进行前端 3D 图形开发,激发你的创造力,让你在 Web 开发中创造出更加精彩的作品。