React-Three-Fiber 入门：构建你的第一个3D场景

React-Three-Fiber 入门：构建你的第一个3D场景

react-three-fiber 项目地址: https://gitcode.com/gh_mirrors/rea/react-three-fiber

前言

React-Three-Fiber（简称R3F）是一个基于React的Three.js渲染器，它允许开发者使用React的声明式语法来创建和操作3D场景。本文将带你从零开始构建第一个3D场景，理解R3F的核心概念和工作原理。

环境准备

在开始之前，确保你已经具备基本的React知识。我们将使用React的函数组件和JSX语法来构建3D场景。

创建基础画布

首先，我们需要创建一个Canvas组件作为3D场景的容器：

import { createRoot } from 'react-dom/client'
import { Canvas } from '@react-three/fiber'

function App() {
  return (
    <div id="canvas-container">
      <Canvas />
    </div>
  )
}

createRoot(document.getElementById('root')).render(<App />)

Canvas组件在幕后完成了多项重要工作：

1. 自动创建了Scene（场景）和Camera（相机）这两个Three.js的基本组件
2. 自动处理了渲染循环，开发者无需手动编写传统的渲染循环代码

注意：Canvas组件会自动适应父容器的大小，因此你可以通过控制父元素的宽高来调整Canvas的尺寸。

添加3D物体（Mesh）

要在场景中显示物体，我们需要添加一个<mesh>元素。在R3F中，所有Three.js对象都可以直接作为JSX元素使用，就像在React中使用<div>一样简单。

<Canvas>
  <mesh />
</Canvas>

Mesh是Three.js中的基本场景对象，用于表示3D空间中的形状，它需要几何体(Geometry)和材质(Material)来定义外观。

让我们创建一个完整的立方体：

<Canvas>
  <mesh>
    <boxGeometry />
    <meshStandardMaterial />
  </mesh>
</Canvas>

这段代码等价于以下原生Three.js代码：

const mesh = new THREE.Mesh()
mesh.geometry = new THREE.BoxGeometry()
mesh.material = new THREE.MeshStandardMaterial()
scene.add(mesh)

构造函数参数

对于需要参数的几何体，比如BoxGeometry可以接受宽度、高度和深度参数：

<boxGeometry args={[2, 2, 2]} />

重要提示：每次修改args参数时，对象都会被重新创建，这可能会影响性能。

添加光照

没有光照的3D场景看起来会很平淡。让我们添加一些光源：

<Canvas>
  <ambientLight intensity={0.1} />
  <directionalLight color="red" position={[0, 0, 5]} />
  <mesh>
    <boxGeometry args={[2, 2, 2]} />
    <meshStandardMaterial />
  </mesh>
</Canvas>

属性设置

在R3F中，组件的props会直接映射到Three.js对象的属性上。例如：

<ambientLight intensity={0.1} />

等价于：

const light = new THREE.AmbientLight()
light.intensity = 0.1

对于具有.set()方法的属性（如颜色、向量等），R3F提供了简写语法：

<directionalLight position={[0, 0, 5]} color="red" />

等价于：

const light = new THREE.DirectionalLight()
light.position.set(0, 0, 5)
light.color.set('red')

完整示例代码

<Canvas>
  <ambientLight intensity={0.1} />
  <directionalLight color="red" position={[0, 0, 5]} />
  <mesh>
    <boxGeometry args={[2, 2, 2]} />
    <meshStandardMaterial />
  </mesh>
</Canvas>

练习建议

为了加深理解，建议尝试以下练习：

1. 材质实验：

   • 尝试不同的材质类型，如MeshNormalMaterial或MeshBasicMaterial
   • 为材质添加颜色属性

2. 几何体实验：

   • 尝试不同的几何体，如SphereGeometry或OctahedronGeometry
   • 调整几何体的参数

3. 位置调整：

   • 修改mesh的position属性，改变物体在场景中的位置

4. 组件化：

   • 将mesh提取为独立的React组件，提高代码复用性

总结

通过本文，你已经学会了使用React-Three-Fiber创建基本3D场景的核心概念。R3F的强大之处在于它将Three.js的功能与React的声明式编程模型相结合，使3D开发更加直观和高效。记住，所有Three.js对象都可以作为JSX元素使用，而props则直接对应到Three.js对象的属性上。

下一步，你可以探索更复杂的场景、动画和交互，R3F为这些高级功能提供了优雅的解决方案。

react-three-fiber 项目地址: https://gitcode.com/gh_mirrors/rea/react-three-fiber