初学ThreeJs 实战项目：有趣的 3D 文字世界随着 Web 技术的不断发展，用户对于网页交互性和视觉效果的要求也越

随着 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 开发中创造出更加精彩的作品。