使用 React-three-fiber 创建 3D 文本

react jsjavascript libraryfront end technology更新于 2025/11/17 6:04:17

在本文中，我们将了解如何使用 react-threefiber 创建 3D 文本。首先，我们将下载 JSON 格式的字体，然后将其添加到我们的文本几何对象中。我们将为其添加轨道控制，以便文本在屏幕上移动并正常显示 3D 文本。那么，让我们开始吧。

示例

首先，下载重要的库 −

npm i --save @react-three/fiber three

此库 react-three/fiber 将用于向网站添加 WebGL 渲染器，并连接 threejs 和 React。

现在安装一个字体 JSON 文件并将其放入 “src” 文件夹中。您可以从 Google Fonts 下载字体，然后前往 https://gero3.github.io/facetype.js/ 将其转换为 JSON。

在 App.js 中添加以下代码行 −

import React, { useEffect, useRef } from "react";
import { Canvas, useThree ,useLoader } from "@reactthree/fiber";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as THREE from "three";
import Roboto from "./Roboto_Regular.json"
import "./App.css";

const CameraController = () => {
   const { camera, gl } = useThree();
   useEffect(
      () => {
         const controls = new OrbitControls(camera, gl.domElement);
         controls.minDistance = 3;
         controls.maxDistance = 20;
         return () => {
            controls.dispose();
         };
      },
      [camera, gl]
   );
   return null;
};
function Text3d(){
   const font = new THREE.FontLoader().parse(Roboto);
   const textOptions = {
      font,
      size: 5,
      height: 1
   };
   return (
      <mesh>
         <textGeometry attach='geometry' args={['three.js', text Options]} />
         <meshStandardMaterial attach='material' color="hotpink" />
       </mesh>
    )
}
export default function App(){
   return (
      <Canvas>
         <CameraController/>
         <ambientLight />
         <Text3d/>
      </Canvas>
   );
};