🔮 はじめに

React Three Fiberを使用して開発したポートフォリオの解説を掲載していきたいと思います．誰かの参考になれば幸いです．

🔮 自己紹介

初めまして．web開発を勉強している273*(ﾂﾅｻﾝﾄﾞ) / Kei.と申します．関西の大学生です．
Reactを勉強し始めて二ヶ月くらい経過しました．仕組みが少しずつ理解できるようになったので，私のポートフォリオを3D表現を用いて刷新してみることにしました．

初めての投稿となりますので，文章や表現に誤りがある可能性がございますがご了承ください．

🔮 完成品

以下のリンクからポートフォリオを閲覧することができます．PC版の方はブラウザのハードウェアアクセラレーションをONにしてくださいね．

テキストをクリックすることでデモを行なったりすることが可能です．

サイトと記事の画像が一部違いますが，技術的には同じです．

🔮 制作について

非常に綺麗なシェーダーでテキストを表示していますが，これは公式のExamplesを参考にしました．

以下から実装までの手順を掲載していきます．

1. ライブラリのインストール

実装するにあたって必要なライブラリをインストールしていきます．

npm install @pmndrs/branding
npm install @react-three/drei
npm install @react-three/fiber
npm install @react-three/postprocessing
npm install @types/three
npm install leva

参考元と同様です．

2. 動作確認

とりあえず参考元のコードをコピペして自身の環境で動作することを確認します．

コード

import { RGBELoader } from 'three-stdlib'
import { Canvas, useLoader } from '@react-three/fiber'
import {
  Center,
  Text3D,
  Instance,
  Instances,
  Environment,
  Lightformer,
  OrbitControls,
  RandomizedLight,
  AccumulativeShadows,
  MeshTransmissionMaterial
} from '@react-three/drei'
import { useControls, button } from 'leva'
import { EffectComposer, HueSaturation, BrightnessContrast } from '@react-three/postprocessing'

export function App() {
  const { autoRotate, text, shadow, ...config } = useControls({
    text: 'Inter',
    backside: true,
    backsideThickness: { value: 0.3, min: 0, max: 2 },
    samples: { value: 16, min: 1, max: 32, step: 1 },
    resolution: { value: 1024, min: 64, max: 2048, step: 64 },
    transmission: { value: 1, min: 0, max: 1 },
    clearcoat: { value: 0, min: 0.1, max: 1 },
    clearcoatRoughness: { value: 0.0, min: 0, max: 1 },
    thickness: { value: 0.3, min: 0, max: 5 },
    chromaticAberration: { value: 5, min: 0, max: 5 },
    anisotropy: { value: 0.3, min: 0, max: 1, step: 0.01 },
    roughness: { value: 0, min: 0, max: 1, step: 0.01 },
    distortion: { value: 0.5, min: 0, max: 4, step: 0.01 },
    distortionScale: { value: 0.1, min: 0.01, max: 1, step: 0.01 },
    temporalDistortion: { value: 0, min: 0, max: 1, step: 0.01 },
    ior: { value: 1.5, min: 0, max: 2, step: 0.01 },
    color: '#ff9cf5',
    gColor: '#ff7eb3',
    shadow: '#750d57',
    autoRotate: false,
    screenshot: button(() => {
      // Save the canvas as a *.png
      const link = document.createElement('a')
      link.setAttribute('download', 'canvas.png')
      link.setAttribute('href', document.querySelector('canvas').toDataURL('image/png').replace('image/png', 'image/octet-stream'))
      link.click()
    })
  })
  return (
    <Canvas shadows orthographic camera={{ position: [10, 20, 20], zoom: 80 }} gl={{ preserveDrawingBuffer: true }}>
      <color attach="background" args={['#f2f2f5']} />
      {/** The text and the grid */}
      <Text config={config} rotation={[-Math.PI / 2, 0, 0]} position={[0, -1, 2.25]}>
        {text}
      </Text>
      {/** Controls */}
      <OrbitControls
        autoRotate={autoRotate}
        autoRotateSpeed={-0.1}
        zoomSpeed={0.25}
        minZoom={40}
        maxZoom={140}
        enablePan={false}
        dampingFactor={0.05}
        minPolarAngle={Math.PI / 3}
        maxPolarAngle={Math.PI / 3}
      />
      {/** The environment is just a bunch of shapes emitting light. This is needed for the clear-coat */}
      <Environment resolution={32}>
        <group rotation={[-Math.PI / 4, -0.3, 0]}>
          <Lightformer intensity={20} rotation-x={Math.PI / 2} position={[0, 5, -9]} scale={[10, 10, 1]} />
          <Lightformer intensity={2} rotation-y={Math.PI / 2} position={[-5, 1, -1]} scale={[10, 2, 1]} />
          <Lightformer intensity={2} rotation-y={Math.PI / 2} position={[-5, -1, -1]} scale={[10, 2, 1]} />
          <Lightformer intensity={2} rotation-y={-Math.PI / 2} position={[10, 1, 0]} scale={[20, 2, 1]} />
          <Lightformer type="ring" intensity={2} rotation-y={Math.PI / 2} position={[-0.1, -1, -5]} scale={10} />
        </group>
      </Environment>
      {/** Soft shadows */}
      <AccumulativeShadows frames={100} color={shadow} colorBlend={5} toneMapped={true} alphaTest={0.9} opacity={1} scale={30} position={[0, -1.01, 0]}>
        <RandomizedLight amount={4} radius={10} ambient={0.5} intensity={1} position={[0, 10, -10]} size={15} mapSize={1024} bias={0.0001} />
      </AccumulativeShadows>
    </Canvas>
  )
}

const Grid = ({ number = 23, lineWidth = 0.026, height = 0.5 }) => (
  // Renders a grid and crosses as instances
  <Instances position={[0, -1.02, 0]}>
    <planeGeometry args={[lineWidth, height]} />
    <meshBasicMaterial color="#999" />
    {Array.from({ length: number }, (_, y) =>
      Array.from({ length: number }, (_, x) => (
        <group key={x + ':' + y} position={[x * 2 - Math.floor(number / 2) * 2, -0.01, y * 2 - Math.floor(number / 2) * 2]}>
          <Instance rotation={[-Math.PI / 2, 0, 0]} />
          <Instance rotation={[-Math.PI / 2, 0, Math.PI / 2]} />
        </group>
      ))
    )}
    <gridHelper args={[100, 100, '#bbb', '#bbb']} position={[0, -0.01, 0]} />
  </Instances>
)

function Text({ children, config, font = '/Inter_Medium_Regular.json', ...props }) {
  const texture = useLoader(RGBELoader, 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/aerodynamics_workshop_1k.hdr')
  return (
    <>
      <group>
        <Center scale={[0.8, 1, 1]} front top {...props}>
          <Text3D
            castShadow
            bevelEnabled
            font={font}
            scale={5}
            letterSpacing={-0.03}
            height={0.25}
            bevelSize={0.01}
            bevelSegments={10}
            curveSegments={128}
            bevelThickness={0.01}>
            {children}
            <MeshTransmissionMaterial {...config} background={texture} />
          </Text3D>
        </Center>
        <Grid />
      </group>
    </>
  )
}

3. 書き換え

背景色や文字をツールごとに変更させる

動作が確認できたらコードを書き換えていきます．

完成ページを見ていただけると，ツールアイコンを選択した時やテーマを切り替えるたびに文字や色，背景色が変わっていると思います．参考元のコードでは下記のようにプロパティが設定されており，こちらを変更することによってマテリアルの編集が可能です．

コード

export function App() {
  const { autoRotate, text, shadow, ...config } = useControls({
    text: 'Inter',
    backside: true,
    backsideThickness: { value: 0.3, min: 0, max: 2 },
    samples: { value: 16, min: 1, max: 32, step: 1 },
    resolution: { value: 1024, min: 64, max: 2048, step: 64 },
    transmission: { value: 1, min: 0, max: 1 },
    clearcoat: { value: 0, min: 0.1, max: 1 },
    clearcoatRoughness: { value: 0.0, min: 0, max: 1 },
    thickness: { value: 0.3, min: 0, max: 5 },
    chromaticAberration: { value: 5, min: 0, max: 5 },
    anisotropy: { value: 0.3, min: 0, max: 1, step: 0.01 },
    roughness: { value: 0, min: 0, max: 1, step: 0.01 },
    distortion: { value: 0.5, min: 0, max: 4, step: 0.01 },
    distortionScale: { value: 0.1, min: 0.01, max: 1, step: 0.01 },
    temporalDistortion: { value: 0, min: 0, max: 1, step: 0.01 },
    ior: { value: 1.5, min: 0, max: 2, step: 0.01 },
    color: '#ff9cf5',
    gColor: '#ff7eb3',
    shadow: '#750d57',
    autoRotate: false,
    screenshot: button(() => {
      // Save the canvas as a *.png
      const link = document.createElement('a')
      link.setAttribute('download', 'canvas.png')
      link.setAttribute('href', document.querySelector('canvas').toDataURL('image/png').replace('image/png', 'image/octet-stream'))
      link.click()
    })
  })

直接プロパティを変数で変更するようにしたら画面上でマテリアル変更されるだろうと考え，変数を書き換えるボタンを設置し試したところ全く変化ありませんでした．当初困惑してましたが，以下のようにプロパティの値をuseEffectを用いて更新してあげる必要がありました．併せて必要な変数も関数に追加していきます．

export function Three({ mainText, mainColor, mainFunc, imgURL, BGtheme }) {
  
  const { autoRotate, text, shadow, ...config } = useControls({
    //省略
  });

  useEffect(() => {
      config.text = mainText;
      config.color = mainColor[0];
      config.gColor = mainColor[1];
      config.shadow = mainColor[2];
      BGColor = BGtheme;
   }, [mainText, mainColor, BGColor]);

  return(
    //省略
  );
}

背景色や文字に関しては以下のように直接入れてあげても動作します．

//変更前
//背景：50行目
 <color attach="background" args={['#f2f2f5']} />

//変更後
//背景18行目下に追加
var BGColor = BGtheme ? "#222" : "#f4ede4";
//背景：50行目
<color attach="background" args={[BGColor]} />

//変更前
//文字：20行目
text: 'Inter',
//文字70行目
{text}

//変更後
//文字：20行目
text: mainText,
//文字70行目
{mainText}

文字にクリック判定を設定する

こちらはreturnの中の ＜Text3D＞ に onClick を追記することでクリック判定を設定できます．

 <Text3D
    castShadow
    bevelEnabled
    font={font}
    scale={5}
    letterSpacing={-0.03}
    lineHeight={0.6}
    height={0.25}
    bevelSize={0.01}
    bevelSegments={10}
    curveSegments={128}
    bevelThickness={0.01}
    onClick={() => demo(func, img)} //<-コレ
   >

私はデモ画面を表示するようにしています．これで文字の部分をクリックすることで任意の関数を実行することが可能になります．

4. コンポーネントの設定

上記で変更を加えたコンポーネントを使うための記述をしていきます．私は Three というコンポーネントとして記述しました．変数は mainText, mainColor, mainFunc, imgURL, BGtheme です．役割は以下の通りです．

変数名	役割
mainText	立体の文字を設定する文字列
mainColor	立体文字用の3つのカラーコードが格納されている配列
mainFunc	ツールを識別してデモ画面を表示するためのid
imgURL	ツールロゴのパス
BGtheme	ライトテーマとダークテーマの状態が格納されている

ツールページコンポーネント(Tool)でThreeコンポーネントを

 <Three
   cmainText={text}
   mainColor={color}
   mainFunc={func}
   imgURL={img}
   BGtheme={theme}
 />

といったように呼び出しており，App.jsxの方で他の変数と一緒に以下のように呼び出しています．


 <Tool
   text={"Credit_\nChecker"}
   desc={
   "ユニパからダウンロードした 成績表 PDFファイルを読み込むと，自動で不足単位数や修得進捗，GPA表示してくれます．現在は情報と経済学部に対応しています．"}
   PTime={"2週間"}
   color={["#79a4d3", "#4e6292", "#0a2d53"]}
   func={0}
   img={Cc}
 />
          
 <Tool
   text={"My_\nPortfolio"}
   desc={"私のポートフォリオを作成しました．"}
   PTime={"2週間"}
   color={["#d5b6f8", "#b8cce8", "#3d1b65"]}
   func={5}
   img={Mp}
 />

text，color，func，img が該当する部分です．この辺りは配列データにしてmap関数などで呼び出したりするとより綺麗に記述できるかと思います．今回はやりませんでしたが．

5. 動作確認

動いた！

これでToolページの完成です．新たなツールができても先述のようにApp.jsxに追記するだけでOK．楽チンだね．

🔮 コード全体

ポートフォリオ自体のソースはGitHubにて公開しておりますが，念の為今回解説したコードを下記に掲載しておきます．

コード

import { RGBELoader } from "three-stdlib";
import { Canvas, useLoader } from "@react-three/fiber";
import {
  Center,
  Text3D,
  Instance,
  Instances,
  Environment,
  Lightformer,
  OrbitControls,
  RandomizedLight,
  AccumulativeShadows,
  MeshTransmissionMaterial,
} from "@react-three/drei";
import { useControls, button } from "leva";
import { useEffect, useState } from "react";
import { demo } from "./components/Preview";

export function Three({ mainText, mainColor, mainFunc, imgURL, BGtheme }) {
  var BGColor = BGtheme ? "#222" : "#f4ede4";

  const { autoRotate, text, shadow, ...config } = useControls({
    text: mainText,
    backside: true,
    backsideThickness: { value: 0.3, min: 0, max: 2 },
    samples: { value: 16, min: 1, max: 32, step: 1 },
    resolution: { value: 512, min: 64, max: 2048, step: 64 },
    transmission: { value: 1, min: 0, max: 1 },
    clearcoat: { value: 0, min: 0.1, max: 1 },
    clearcoatRoughness: { value: 0.0, min: 0, max: 1 },
    thickness: { value: 0.3, min: 0, max: 5 },
    chromaticAberration: { value: 5, min: 0, max: 5 },
    anisotropy: { value: 0.3, min: 0, max: 1, step: 0.01 },
    roughness: { value: 0, min: 0, max: 1, step: 0.01 },
    distortion: { value: 0.5, min: 0, max: 4, step: 0.01 },
    distortionScale: { value: 0.1, min: 0.01, max: 1, step: 0.01 },
    temporalDistortion: { value: 0.08, min: 0, max: 1, step: 0.01 },
    ior: { value: 1.5, min: 0, max: 2, step: 0.01 },
    color: mainColor[0],
    gColor: mainColor[1],
    shadow: mainColor[2],
    autoRotate: true,
  });

  // mainTextやmainColorが変更されたときにconfigの値を更新する
  useEffect(() => {
    config.text = mainText;
    config.color = mainColor[0];
    config.gColor = mainColor[1];
    config.shadow = mainColor[2];
    BGColor = BGtheme;
  }, [mainText, mainColor, BGColor]);

  return (
    <Canvas
      shadows
      orthographic
      camera={{ position: [10, 20, 20], zoom: 80 }}
      gl={{ preserveDrawingBuffer: true }}
    >
      <color attach="background" args={[BGColor]} />
      {/** The text and the grid */}
      <Text
        func={mainFunc}
        img={imgURL}
        config={config}
        rotation={[-Math.PI / 2, 0, 0]}
        position={[0, -1, 5]}
      >
        {mainText}
      </Text>
      {/** Controls */}
      <OrbitControls
        autoRotate={autoRotate}
        autoRotateSpeed={-0.3}
        zoomSpeed={0.25}
        minZoom={40}
        maxZoom={140}
        enablePan={false}
        dampingFactor={0.05}
        minPolarAngle={Math.PI / 3}
        maxPolarAngle={Math.PI / 3}
      />
      {/** The environment is just a bunch of shapes emitting light. This is needed for the clear-coat */}
      <Environment resolution={32}>
        <group rotation={[-Math.PI / 4, -0.3, 0]}>
          <Lightformer
            intensity={20}
            rotation-x={Math.PI / 2}
            position={[0, 5, -9]}
            scale={[10, 10, 1]}
          />
          <Lightformer
            intensity={2}
            rotation-y={Math.PI / 2}
            position={[-5, 1, -1]}
            scale={[10, 2, 1]}
          />
          <Lightformer
            intensity={2}
            rotation-y={Math.PI / 2}
            position={[-5, -1, -1]}
            scale={[10, 2, 1]}
          />
          <Lightformer
            intensity={2}
            rotation-y={-Math.PI / 2}
            position={[10, 1, 0]}
            scale={[20, 2, 1]}
          />
          <Lightformer
            type="ring"
            intensity={2}
            rotation-y={Math.PI / 2}
            position={[-0.1, -1, -5]}
            scale={10}
          />
        </group>
      </Environment>
      {/** Soft shadows */}
      <AccumulativeShadows
        frames={100}
        color={mainColor[2]}
        colorBlend={5}
        toneMapped={true}
        alphaTest={0.9}
        opacity={1}
        scale={30}
        position={[0, -1.01, 0]}
      >
        <RandomizedLight
          amount={4}
          radius={10}
          ambient={0.5}
          intensity={1}
          position={[0, 10, -10]}
          size={15}
          mapSize={1024}
          bias={0.0001}
        />
      </AccumulativeShadows>
    </Canvas>
  );
}

const Grid = ({ number = 23, lineWidth = 0.026, height = 0.5 }) => (
  // Renders a grid and crosses as instances
  <Instances position={[0, -1.02, 0]}>
    <planeGeometry args={[lineWidth, height]} />
    <meshBasicMaterial color="#666" />
    {Array.from({ length: number }, (_, y) =>
      Array.from({ length: number }, (_, x) => (
        <group
          key={x + ":" + y}
          position={[
            x * 2 - Math.floor(number / 2) * 2,
            -0.01,
            y * 2 - Math.floor(number / 2) * 2,
          ]}
        >
          <Instance rotation={[-Math.PI / 2, 0, 0]} />
          <Instance rotation={[-Math.PI / 2, 0, Math.PI / 2]} />
        </group>
      ))
    )}
    {/* <gridHelper args={[100, 100, "#bbb", "#bbb"]} position={[0, -0.01, 0]} /> */}
  </Instances>
);

function Text({
  func,
  img,
  children,
  config,
  font = "/Inter_Medium_Regular.json",
  ...props
}) {
  const texture = useLoader(
    RGBELoader,
    "https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/aerodynamics_workshop_1k.hdr"
  );

  return (
    <>
      <group>
        <Center scale={[0.8, 1, 1]} front top {...props}>
          <Text3D
            castShadow
            bevelEnabled
            font={font}
            scale={5}
            letterSpacing={-0.03}
            lineHeight={0.6}
            height={0.25}
            bevelSize={0.01}
            bevelSegments={10}
            curveSegments={128}
            bevelThickness={0.01}
            onClick={() => demo(func, img)}
          >
            {children}
            <MeshTransmissionMaterial {...config} background={texture} />
          </Text3D>
        </Center>
        <Grid />
      </group>
    </>
  );
}

🔮 使用言語，ライブラリ，フレームワーク

ポートフォリオ開発で使用したものです．

OS：macOS Ventura
デザイン：Figma，Blender
開発ツール：Visual Studio Code，Git，GitHub，Docker，~~FileZila~~ AWS
サイト系：HTML，CSS，JavaScript，React，react-router-dom
3D：three.js，pmndrs/branding，react-three(drei，fiber，postprocessing)，leva
ポップアップ：Sweetalert2
アイコン：DEVICON，ionicons

🔮 最後に

いかがでしたでしょうか．他のページはよくあるReactを用いたwebページと同じです．自力で React Three Fiber を用いて制作を行うのはかなりの知識と労力がかかると思います．マスターしたいところですが私には少し早かったかもしれません(笑)．公式のExamplesには更に面白い例が沢山掲載されているので覗くだけでも楽しいですよ．長文となりましたがここまで読んでいただきありがとうございました．