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

React和Three.js结合-React Three Fiber

article 2024/12/21 10:47:30

简介

React Three Fiber（简称 R3F）是一个用于在 React 中渲染 3D 图形的库，它将 Three.js 与 React 的声明式编程模型结合起来。Three.js 是一个广泛使用的 JavaScript 库，用于在 Web 中创建 3D 场景、动画和互动效果，而 React 是一个流行的 JavaScript 库，专注于构建用户界面。React Three Fiber 使得开发者能够通过 React 的组件化和声明式方式来构建复杂的 3D 场景，简化了 Three.js 的使用，同时也让 React 开发者能够在熟悉的环境中快速构建 3D 应用。

为什么选择 React Three Fiber？

1. 声明式编程模型

React 的声明式编程模式使得构建用户界面变得更加直观和简便。在传统的 Three.js 中，你需要手动管理场景的更新、对象的变化以及渲染的控制。而在 React Three Fiber 中，开发者仅需关注组件的状态和属性，React 会自动处理所有底层的更新。这种方式降低了开发的复杂性，尤其是在处理大型项目时，React 的虚拟 DOM 可以帮助我们高效地更新和渲染 3D 场景。

2. 与 React 深度集成

React Three Fiber 通过将 Three.js 抽象成 React 组件，让 React 开发者可以在自己的应用中无缝地使用 3D 图形。你不需要理解 Three.js 的复杂 API，直接使用 React 组件化的方式，就能够创建场景、光源、相机、物体等 3D 元素。通过 props，你可以控制对象的各种属性，React 会根据这些属性自动更新底层的 Three.js 渲染。

3. 简化的 3D 操作

Three.js 提供了强大的功能，但也有一定的学习曲线。React Three Fiber 对这些功能进行了封装，使得你可以通过熟悉的 React API 来构建 3D 应用。你只需要通过 JSX 语法来描述 3D 场景中的各个元素，并且利用 React 的状态管理来更新它们。你不需要直接操作底层的 Three.js 对象，React Three Fiber 会自动处理这些细节。

4. 兼容 React 生态

React Three Fiber 完全兼容 React 的生态系统。这意味着你可以在 React 应用中使用所有的 React 特性，如 hooks、context、错误边界等。而且它与其他流行的 React 库（如 Redux、React Router 等）完全兼容，因此你可以轻松地将 3D 场景嵌入到现有的 React 应用中，享受 React 生态带来的种种便利。

5. 社区支持与丰富的工具集

React Three Fiber 有一个活跃的社区，许多开发者已经创建了大量有用的工具库，帮助你更加便捷地实现常见功能。例如，@react-three/drei 提供了一些常用的 3D 组件（如相机控制、光源控制、加载器等），让你在构建 3D 场景时更加轻松。

安装依赖

在 react 的项目中安装 react-three-fiber 依赖

npm install @react-three/fiber react-three-fiber

创建一个立方体案例

1. Canvas

Canvas 是 React Three Fiber 中的核心组件，作用是将 Three.js 渲染器嵌入到 React 应用中。它是 3D 渲染的容器，所有的 3D 内容都需要放置在 Canvas 组件内。

import { Canvas } from "@react-three/fiber";

function Scene() {
  return <Canvas>{/* 3D 元素会放在这里 */}</Canvas>;
}

2. Mesh 和 Material

在 Three.js 中，网格（mesh）是三维物体的基本单元，而材质（material）决定了物体的外观。在 React Three Fiber 中，mesh 和 material 是通过 React 组件的形式实现的。你可以像操作其他 React 组件一样操作 3D 对象，并通过 props 来控制它们的属性。

<mesh position={[0, 0, 0]}>
  <boxGeometry />
  <meshStandardMaterial color="orange" />
</mesh>

这里，boxGeometry 用来定义一个立方体，meshStandardMaterial 用来定义材质和颜色。position 属性决定了立方体的位置。

3. Light 和 Shadows

3D 场景中的光源和阴影是至关重要的。React Three Fiber 提供了不同类型的光源组件，如点光源（pointLight）、平行光（directionalLight）、聚光灯（spotLight）等。此外，mesh 组件还可以开启阴影效果，使得场景更加真实。

<directionalLight position={[10, 10, 5]} castShadow />
<mesh castShadow receiveShadow>
  <sphereGeometry />
  <meshStandardMaterial color="blue" />
</mesh>

4. 添加相机控制

为了让用户能够自由旋转和缩放场景中的 3D 对象，我们需要为场景添加相机控制。React Three Fiber 提供了 OrbitControls 来实现这一功能，它让用户可以通过鼠标或触摸屏控制视角。

import { OrbitControls } from "@react-three/drei";
<OrbitControls />;

4. 动画（旋转立方体）

React Three Fiber 完全支持 React 的 hooks API。这意味着你可以使用 useRef 来访问 3D 对象的引用，使用 useState 和 useEffect 管理场景的状态，甚至可以使用 useFrame 来在每一帧更新时执行代码。

import { useRef } from "react";
import { useFrame } from "@react-three/fiber";

function SpinningBox() {
  const meshRef = useRef();

  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.rotation.y += 0.01;
    }
  });

  return (
    <mesh ref={meshRef}>
      <boxGeometry />
      <meshStandardMaterial color="royalblue" />
    </mesh>
  );
}

在这里，我们使用 useRef 来获取立方体的引用，并使用 useFrame 来在每一帧更新时旋转它。rotation.y 控制着立方体绕 Y 轴的旋转。

5. 完整代码

import React from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { useRef } from "react";

function SpinningBox() {
  const meshRef = useRef();

  // 每一帧旋转立方体
  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.rotation.y += 0.01;
    }
  });

  return (
    <mesh ref={meshRef}>
      <boxGeometry />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}

function Scene() {
  return (
    <Canvas>
      {/* 添加光源 */}
      <directionalLight position={[10, 10, 5]} intensity={1} />
      {/* 添加一个旋转的立方体 */}
      <SpinningBox />
      {/* 添加相机控制 */}
      <OrbitControls />
    </Canvas>
  );
}

export default Scene;

到此为止我们就实现了一个会转动的立方体了，可以看到 React Three Fiber 的代码结构非常清晰,而且代码量特别少，通过组件化的方式，我们可以轻松地构建复杂的 3D 场景。

请添加图片描述

性能优化

React Three Fiber 在性能上也进行了优化，利用了 React 的虚拟 DOM 来减少不必要的渲染。它通过 requestAnimationFrame 动画帧请求和 useFrame hook 来保证场景的流畅更新。此外，React Three Fiber 还支持懒加载和按需加载资源，例如 3D 模型、纹理等，这使得大规模的 3D 应用变得更加高效。

优势

易于学习：如果你已经熟悉 React，那么学习 React Three Fiber 是一件轻松的事。通过 React 风格的组件和声明式语法，你可以更快速地上手 Three.js。
组件化设计：React 的组件化思想与 3D 渲染的理念相结合，带来了更高的代码复用性和可维护性。每个 3D 对象都可以作为一个独立的组件，便于管理和调试。
与 React 的紧密集成：React Three Fiber 完美融入了 React 的生态系统，可以方便地与 Redux、React Router、React Suspense 等库一起使用。

总结

React Three Fiber 是一个革命性的库，它通过将 React 和 Three.js 融合在一起，使得构建 3D 场景和应用变得更加简单和高效。如果你已经是一个 React 开发者，React Three Fiber 无疑是你进入 3D 图形开发的最佳选择。无论是构建交互式 3D 可视化、游戏、虚拟现实，还是增强现实应用，React Three Fiber 都能帮助你以更高效、更灵活的方式实现你的想法。

案例代码

github: https://github.com/calmound/threejs-demo/tree/main/react-three-fiber
gitee: https://gitee.com/calmound/threejs-demo/tree/main/react-three-fiber

查看全文

http://www.kler.cn/a/444956.html