使用【React】react-three-fiber可以轻松地将自制的3D模型显示在网站上

2 年 ago

清, 扬

3 minutes

背景：

中文翻译：我们经常看到背景不断变化的丰富Web网站。
由于Three.js可以在网页上显示3D模型，因此可以在Web网站中实现无法用2D表示的丰富背景。
在调查React时，我们发现了类似Three.js的库，即react-three-fiber作为Three.js的React渲染器。
在本文中，我们将使用react-three-fiber来在网页上显示由Blender制作的3D模型。

◆完成的绘图

react-three-fiber

drei

前提 – prerequisite, condition, premise

本文将使用React×TypeScript环境。
此外，需要准备使用Blender创建的3D模型。
本文仅关注在网站上显示3D模型，不涉及Blender中设置的泛光效果。

环境

React-three-fiber：8.15.9

准备3D模型

我們現在將展示以下以櫻花為靈感的3D模型。

在Blender中，我们使用gltf格式进行了导出。
设置如下。

1. 创建项目

创建一个带有 TypeScript 的项目模板，使用 –template typescript 命令。

npx create-react-app プロジェクト名 --template typescript

参考：https://create-react-app.dev/docs/adding-typescript/

2. 安装库

用以下的命令来安装 react-three-fiber 和 drei。

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

使用以下命令安装three的类型定义模块。

npm i -D @types/three

参考：https://www.npmjs.com/package/@types/three?activeTab=versions

3. 文件夹结构

只有一部分，但文件夹结构如下：
在assets文件夹中添加了由Blender导出的3D模型（sakura_tree.glb）。

┬public
│ └assets
│　└sakura_tree.glb
└ src
 　├css
 　│ └index.css
 　├App.tsx
 　└index.tsx

加载GLTF格式的3D模型

在以下代码段中，我们使用useGLTF钩子来加载GLTF格式的3D模型，并创建该模型的场景。
使用组件来绘制创建的场景。

function Model() {
  const { scene } = useGLTF("assets/sakura_tree.glb")
  return <primitive object={scene} />
}

5. 用画布绘画

在下面的代码部分中，使用

export default function App() {
  return (
    <>
      <Canvas camera={{ position: [2, 1, 2], near: 0.05 }}
       style={{ background: "#001122" }>
        {/* ～ */}
      </Canvas>
    </>
  )
}

6. 3D模型的绘制

通过组件，可以使用鼠标操作来控制相机的旋转和缩放。
由于设置了autoRotate属性，相机会自动水平旋转。
此外，在组件内放置了Model组件，用于绘制3D模型。

export default function App() {
  return (
    <>
      <Canvas camera={{ position: [2, 1, 2], near: 0.05 }}
       style={{ background: "#001122" }>
        {/* 3Dモデルの表示 */}
        <group>
          <Model />
        </group>
        {/* 自動横回転 */}
        <OrbitControls autoRotate />
        {/* フレームレート情報 */}
        <Stats />
      </Canvas>
    </>
  )
}

使用Stats组件可以在屏幕上显示帧率信息。
如果不需要，请删除。参考链接：https://sbcode.net/react-three-fiber/stats/

整个 App.tsx 文件的代码

根据以上的考虑，以下是整个App.tsx的代码。

import { Canvas } from '@react-three/fiber'
import { Stats, OrbitControls, useGLTF } from '@react-three/drei'


function Model() {
  const { scene } = useGLTF("assets/sakura_tree.glb")
  return <primitive object={scene} />
}

export default function App() {

  return (
    <>
      <Canvas camera={{ position: [2, 1, 2], near: 0.05 }}>
        <group>
          <Model />
        </group>
        <OrbitControls autoRotate />
        <Stats />
      </Canvas>
    </>
  )
}

・整个index.tsx文件

使用root.render方法将id为root的DOM元素渲染出来。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import "./css/index.css";

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

·整个index.css代码

在整个页面上绘制组件。

body {
  margin: 0;
  overflow: hidden;
}

#root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

7. 画出的结果 (Huà chū de

如果完成到这一步，请使用以下命令来启动下一个命令。

npm start

当运行后，可以在网站上像下图一样显示3D模型。
然而，与Blender内的外观不同，3D模型没有阴影，花瓣部分变得扁平，像一个球状物体。

8. 改进：安装照明灯

由于未安装照明灯，可能导致没有投射出阴影。
请在App.tsx文件的Canvas部分添加以下代码，以添加平行光源。

castShadowプロパティ：影の投影

{/* ライト */}
<directionalLight position={[5, 5, 5]} castShadow />

以下是已添加了灯光的 App.tsx 文件。

  <Canvas camera={{ position: [2, 1, 2], near: 0.05 }} style={{ background: "#001122" }}>
    {/* 3Dモデルの表示 */}
    <group>
      <Model />
    </group>
    {/* 自動横回転 */}
    <OrbitControls autoRotate />
    {/* 統計情報 */}
    <Stats />
    {/* ライト */}
    <directionalLight position={[5, 5, 5]} castShadow />
  </Canvas>

通过添加平行光源，使得每片花瓣相比添加之前更加清晰可见。

尽管从以上的改进中有所改善，
但是在Blender中设置的3D模型的浓烈光晕效果尚未体现出来。
由于本文的目的是使用react-three-fiber在网站上展示3D模型，
所以在此暂时告一段落。
关于如何产生浓烈光晕效果的方法，将在下一篇文章中继续介绍。

次の記事：react-three-fiberで表示した3Dモデルに発光感(ブルーム)を付ける

可以采用以下参考材料

https://sbcode.net/react-three-fiber/stats/