数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 React-three-fiber 创建 3D 文字
在本文中，我们将了解如何使用 **react-threefiber** 创建 3D 文字。我们首先会下载 JSON 格式的字体文件，然后将其添加到我们的 Text Geometry 对象中。我们会添加轨道控制，这将允许在屏幕上移动文字并正确查看 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>
);
};解释
我们首先使用 **“Roboto”** 变量加载了 JSON 字体，然后在我们的函数内部，将其解析为字体并将其存储在 “font” 常量中。
然后，我们在 **“textOptions”** 中设置其样式和其他方面。接下来，我们简单地创建了 **textGeometry** 并传递了 **args**，并且 **material** 对象用于应用样式。
输出
它将产生以下输出：
更新于： 2021-09-28
2K+ 阅读量
广告