🌍

【React Three Fiber】 3D表現ができるライブラリを触ってみました！

2024/09/15に公開

React

Three.js

fiber

tech

 はじめに🐥記事の目的
Reactの機能を学習したアウトプットとして。
ReactとThree.jsを統合するためのライブラリを知っていただきたいため。

筆者の背景（React Three Fiberを学び始めた動機）
3Dモデルに興味があったので、学習中のReactで使えると知って触ってみました！


 1. React Three FiberとはThree.jsとは？

　・3Dグラフィックスをブラウザ上で描画するためのJavaScriptライブラリで、

　　アニメーションや複雑な3Dモデルを簡単に作成できます。

　・しかし、Reactのコンポーネントベースの構造とは違って少し扱いづらいです。
React Three Fiberの特徴と利点

・React Three Fiberの特徴は、

　　Reactのように記述して3Dモデルやアニメーションを作成することができるという点です。

　・<mesh> や <boxGeometry> とコンポーネントを記述して、

　　useState, useEffectなどを使い3Dモデルを動かせます！

 2. React Three Fiberでできること基本的な3Dオブジェクトの作成と操作
リアルタイムアニメーションの実装
インタラクティブな3D要素の作成
テクスチャやライティングの適用
高度なレンダリング効果（シャドウ、リフレクションなど）
パフォーマンス最適化
VR/AR体験の構築
3Dデータビジュアライゼーション

これらができるそうです。(cloudeに聞きました。)

 3. チュートリアルとハンズオン動画で学んだこと使用したリソースの紹介
公式ドキュメント

Shinさんの入門動画

※Shinさん、いつもありがとうございます！
作成したもの(画面中央の球体が回っています)

作成したコード
Sphere.js
import React, { useRef, useState } from "react";
import { useFrame, useLoader } from "@react-three/fiber";
import { config, useSpring, animated } from "@react-spring/three";
import { TextureLoader } from 'three/src/loaders/TextureLoader'

function Sphere(props) {
  const ref = useRef();
  const [clicked, setClicked] = useState(false);
  const [hovered, setHovered] = useState(false);
  const texture = useLoader(TextureLoader, 'copyimage.jpg')

  useFrame(() => (ref.current.rotation.x += 0.01));

  const { scale } = useSpring({
    scale: clicked ? 2 : 1,
    config: config.wobbly,
  })

  return (
    <animated.mesh  
      {...props}
      ref={ref}
      onClick={() => setClicked(!clicked)}
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
      scale={scale}
    >
      <sphereGeometry args={[1, 32, 32]} />
      <meshStandardMaterial map={texture} />
    </animated.mesh>
  )
}

export default Sphere;
App.js
import './App.css';
import { Canvas } from "@react-three/fiber";
import Sphere from './components/Sphere';

function App() {
  return (
    <>
      <div id="canvas-container">
        <Canvas>
          <Sphere position={[0, 0, 0]} />
          <ambientLight intensity={3} />
          <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
          <pointLight position={[-10, -10, -10]} />
        </Canvas>
      </div>
      <h1>Threejs Fiber</h1>
      <a href="">もっと見る</a>
    </>
  );
}

export default App;

 4. 学んだこと📕公式ドキュメントとShinさんの動画で学んだこと
Three Fiberは、<mesh />コンポーネントを作成して、そこに3Dモデルの設定やアニメーションの設定を記述することでweb画面上に表示させることができます。
それぞれの関数？に設定ができ、設定する値によって様々な表現ができます。

例)表示する3Dモデルのポジション指定

　 <Sphere position={[0, 0, 0]} /> 　
Reactのフックを使った表現

<useState>const [clicked, setClicked] = useState(false);
const [hovered, setHovered] = useState(false);

→　クリックとホバーの状態を管理して、インタラクティブな動作させました。
<useLoader>

　　const texture = useLoader(TextureLoader, 'copyimage.jpg')

　　→ テクスチャを非同期でロードして、3D オブジェクトに適用するために使用しました。
<useFrame>

　　useFrame(() => (ref.current.rotation.x += 0.01));

　　→　毎フレーム実行される処理を定義するために使い、球体を回転させていました。
<useSpring>(@react-spring/three というライブラリをインストールして作成)

js      const { scale } = useSpring({        scale: clicked ? 2 : 1,        config: config.wobbly,      })      

　　→ 簡単にクリックした時のスケール変更アニメーションを設定するために使用しました。
これらのフックを組み合わせることで、状態管理、アニメーション、テクスチャ適用、そしてユーザーインタラクションを備えた動的な 3D オブジェクトが作成できました。

 5. 今後のやりたいことGoogle MapのAPIを使った、モデル作成
APIを使って、地球の画像を貼り付けます。
クリックした部分の天気やその他情報を出力できるようにしたいです！

Three Fiberについてもう少し触って高度な3Dモデルを表示できるようにしたいです！

 まとめThree Fiberを触ることでReactの機能の使い方や応用方法を学ぶことができました。
今後の目を惹くwebサイトを作るときの引き出しが1つ増えました。

はじめに🐥

1. React Three Fiberとは

2. React Three Fiberでできること

3. チュートリアルとハンズオン動画で学んだこと

4. 学んだこと📕

5. 今後のやりたいこと

まとめ

Discussion