目標 Become a 3D Web FullStack Engineer

1. Blenderでオリジナルキャラクターを作成する
   1.VRM形式で出力する
   2. オリジナルキャラクターをUnity、VRChatで動かす
   3. オリジナルキャラクターをVTuver用に動かす
   4. フルスタックチャンネルのYouTubeにオリジナルキャラクターを登場させる
2. インタラクティブなWebサイトを作成する
   1. Blenderで作成したシーンを、Next.jsとThree.jsに取り込む
   2. @pixiv/three-vrmで動かす
   3. フルスタックチャンネルのQAサイトに3DでAIアバターとして登場させる
3. 3Dブラウザゲームを作成する
   1. シェーダーを自由に扱えるようになる
   2. Three.jsを使用して、ゲームを作成
   3. モデルはBlenderで作成

参考

https://next.junni.co.jp/

https://zenn.dev/junni/articles/bb71f44c89cb77

成果物

01 ショートケーキ

ゆきさんのモデリングチュートリアル
初めてのモデリング

02 白銀圭

mmCGチャンネルさんの「白銀圭」チュートリアル
初めてのキャラクターモデリング
モデリングからアニメーションまで一通り学習

03 リアルタイムCGキャラクター制作入門

書籍でVRChatで動かすとこまで学習

04 ととたん

ふさこさんの「ととたん」チュートリアル
VRMを動かすところまで完走できて、とてもわかりやすいチュートリアル
Substance Painterにも入門
何回も見直す

05 ととたんWeb

Three.jsを使用して、Webでととたんを表示
GLB形式でアニメーションと一緒にエクスポート

06 Fall Guys

wawa senseiチュートリアル
Three.jsで作成
オリジナルキャラクターでゲームが作れるようになると楽しい

07 シューターゲーム

wawa sebseiチュートリアル
マルチプレイヤーで対戦できる

08 ブック

wawa senseiチュートリアル
本の表現方法を学習

09 水槽

wawa senseiチュートリアル
魚の動きを学習
ポストプロセッシングの使い方も学習

10 言語学習アプリ

Next.jsを使用してThree.jsを扱えるようになった
ChatGPTとの組み合わせができるようになったので、幅が広がった

11 リゾルブシェーディング

シェーディングの学習
three-custom-shader-materialでオリジナルのシェーダーを作ることが可能
シェーディングを極めれば色々な表現が可能

12 カーゲーム

車を選択して、レースゲームの作り方を学習

13 モデルとアニメーション

Mixamoアニメーションとモデルの組み合わせてブラウザで表示
https://poly.pizza/u/Polygonal Mind

14 ゲームマネージャー

ゲームマネージャーでゲームのロジックを組んで、3Dゲームの作り方を学習

15 3Dテキスト

3Dにテキストを表示
ECサイトにも使用できる

16 トランジション

シェーダーを使用したトランジションの学習

17 Mesh Portal Material

MeshPortalMaterialで別の空間を表示させて、CameraControlsでカメラの移動を学習

18 Mesh Explosion Effect

useScrollを使用して、スクロールすると徐々にmeshのpositionを移動

19 モデルカスタマイズ

ブラウザからモデルのカスタマイズする方法を学習
これぐらいは簡単にできる

20 シェーダー

シェーダーで色々と実験、奥が深い

21 スモーク

シェーダーの学習
シェーダーでスモークが作れるようになった

22 アニメーション

react-springでアニメーションの学習
@react-spring/threeでuseSpringを使用すると、アニメーションが作れる
https://www.react-spring.dev/docs/guides/react-three-fiber

23 スクロール連動飛行機サイト

laminaライブラリでグラデーション、カーブとラインの生成、スクロール、カメラと飛行機の位置合わせ、テキストセクション / 雲の配置など、スクロールと連動して飛行機をカーブに沿って移動

24 かなゲーム

キャラクターコントロールとゲームの作り方、メニューなど学習

25 3Dポートフォリオ

Blenderでライトベイクしたものを表示して、スクロールによるアニメーションを学習
参考にオリジナルの3Dポートフォリオを作る

26 Sims

Socket.ioでマルチプレイヤーを実装
パスファインディングは、ゲームでも使える
https://github.com/qiao/PathFinding.js/
チャットも追加して、ポートフォリオに組み込みたい

27 3Dアバタービルダー

複数のモデルを用意して着せ替えすることができる
この仕組みは応用できるので、組み合わせていきたい

28 シューズビルダー

シューズの各パーツの色が変更できる

29 Tシャツビルダー

Tシャツの色を変更

30 スケートボードビルダー

3Dモデルを使用したECサイトの作り方を学習

Build a 3D Skateboard Website and Customizer App with Next.js 15, GSAP, Three.js and Prismic - 2025

31 ライトセイバービルダー

Udemyチュートリアル

Complete Blender Megacourse: Beginner to Expert

Blenderのチュートリアルでは1番人気
Blenderのバージョンは古いが、基礎は学べる

https://www.udemy.com/course/complete-blender-megacourse-beginner-to-expert/

YouTubeチュートリアル

mmCGチャンネル animetic

神神モデラー
まずは白銀圭チュートリアル

https://www.youtube.com/@mmcganimetic/videos

ふさこ / 3D自習室

初心者向けチュートリアル
ととたんチュートリアルはまずやるべき
VRMでキャラクターを動かすところまでできます

https://www.youtube.com/@fusako3d/videos

夏森轄（なつもり かつ）

初心者向きのわかりやすいチュートリアル

https://www.youtube.com/@user-sy9do4tr4h/videos

Blender Guru

神チュートリアル
まずはドーナッツから

https://www.youtube.com/@blenderguru

Shonzo

神モデラー

https://www.youtube.com/@Shonzo/videos

3D Bibi

初心者向きのわかりやすいチュートリアル

https://www.youtube.com/@3DBibi/videos

Yuki's blender school

初心者向きのわかりやすいチュートリアル

https://www.youtube.com/@yuki_blender/videos

Polygon Runway

色々なモデリングの学習ができる

https://www.youtube.com/@polygonrunway/videos
https://polygonrunway.com/

The Goose Tavern

2D x 3D アニメーション

https://www.youtube.com/@goosetavern/videos

むえん

初心者向けチュートリアル
顔をモデリングするときに参考

https://www.youtube.com/@むえん-t7z/videos

TomCAT - Characters, Art and Tutorials

キャラクターモデリング

https://www.youtube.com/@TomCAT_Character_Art/videos

M design

初心者向けチュートリアル

https://www.youtube.com/@Mdesign_blender/videos

Ksenia Starkova

リアルタイム動画
かわいいキャラクターを作りたいときに参考

https://www.youtube.com/@KseniaStarkova/videos

Benyamin Bayati

キャラクターモデリングタイムラプス

https://www.youtube.com/@3dbenart/videos

Fullsworld

かわいいキャラクターモデリング

https://www.youtube.com/@fullsworld/videos

Bakuan Guen

キャラクターモデリング

https://www.youtube.com/@bakuanguen/videos

ZTOONE 3D

キャラクターモデリング

https://www.youtube.com/@Ztoone3d/videos

Blender Default Cube

キャラクターモデリング

https://www.youtube.com/@blenderdefaultcube/videos

lacruzo

ローポリモデルの参考

https://www.youtube.com/@lacruzo/videos

書籍チュートリアル

キャラクターモデリングの書籍

Blender リアルタイムCGキャラクター制作入門

Colosoチュートリアル

Blenderの基礎が固まったら受けてみる

https://coloso.jp/category/120

Blenderプラグイン

Blenderのバージョンを変えるアプリ
Blender Lancher：https://github.com/Victor-IX/Blender-Launcher-V2

モデリング

AutoMirror：標準
LoopTools：標準
Copy Attributes Menu：標準
Edge Flow：https://github.com/BenjaminSauder/EdgeFlow
Hide Only Vertex：https://bookyakuno.gumroad.com/l/hide_only_vertex

リギング

VRM Import Export：https://vrm-addon-for-blender.info/en/

UV展開

TexTools：https://github.com/franMarz/TexTools-Blender
Magic UV：標準

テクスチャ

Auto Reload：https://github.com/samytichadou/Auto_Reload_Blender_addon

シェイプキー

SKkeeper：https://github.com/smokejohn/SKkeeper
Mio3 ShapeKey：https://github.com/mio3io/Mio3Shapekey
ShapeKeysUtil：https://booth.pm/ja/items/1224307

Unity

unity-overwriter：https://github.com/ina-amagami/unity-overwriter
VRMSpringBoneTool & VRMSkirtTool：https://nalulululuna.booth.pm/items/4649509
CopyComponentsByRegex：https://github.com/Taremin/CopyComponentsByRegex

Three.js

Three.js公式

https://threejs.org/

React Three Fiber

https://r3f.docs.pmnd.rs/getting-started/introduction

Three.js Jorney

https://threejs-journey.com/

wawa sensei

https://wawasensei.dev/ja

Dan Greenheck

https://www.youtube.com/@dangreenheck/videos

Prismic

3D高品質ウェブサイトチュートリアル
https://www.youtube.com/@Prismic/videos

three-vrm

Three.jsでVRMを表示させる
https://github.com/pixiv/three-vrm

Grabient

グラデーション生成
https://www.grabient.com/

Poly Haven

HDR画像ダウンロード
https://polyhaven.com/

Skybox AI

AIでHDR画像を生成
https://skybox.blockadelabs.com/

Squoosh

画像圧縮
https://squoosh.app/

Shadow Mapping In Three.js

https://mofu-dev.com/en/blog/threejs-shadow-map/

VRMモデル

3tene

表情を変えたり、モーションの確認が可能
背景を緑に設定できるので、OBSと組み合わせてVTuberになることも可能

https://3tene.com/free/

VMagicMirror

VRMをキーボードとマウスだけで動かせるWindows向けソフト
OBSと組み合わせてVTuberになることも可能

https://booth.pm/ja/items/1272298

ニコニ立体ちゃん

https://3d.nicovideo.jp/works/td32797

VRM Live Viewer

https://booth.pm/ja/items/1783082

3Dモデル

Poly Pizza

ロイヤリティフリーの低ポリゴン3Dモデルのコレクション
https://poly.pizza/

Pmndrs Market

ロイヤリティフリー3Dアセットのコレクション
https://market.pmnd.rs/

Sketchfab

3Dモデルを共有およびダウンロードするためのプラットフォーム
https://sketchfab.com/

Unity Asset Store

Unity用ですが、プロジェクトに使用できる多くの3Dモデルパックがある
https://assetstore.unity.com/ja-JP

Quaternius

無料の3Dモデルパックを共有
https://quaternius.com/

Kenney

多くの高品質な無料3Dモデルパックを共有

https://www.kenney.nl/assets/category:3D

ithappy studio

高品質なローポリモデル
https://ithappystudios.com/characters/

シェーダー

The Book of Shaders

https://thebookofshaders.com/

Inigo Quilez

https://iquilezles.org/articles/

An introduction to Shader Art Coding by Kishimisu

https://www.youtube.com/watch?v=f4s1h2YETNY

Learn OpenGL

https://learnopengl.com/Getting-started/Shaders

The Study of Shaders with React Three Fiber

https://blog.maximeheckel.com/posts/the-study-of-shaders-with-react-three-fiber/

ShaderToy

https://www.shadertoy.com/

Shadered

https://shadered.org/shaders

GraphToy

https://www.iquilezles.org/apps/graphtoy/

Lygia

https://lygia.xyz/

THREE-CustomShaderMaterial from Faraz Shaikh

https://github.com/FarazzShaikh/THREE-CustomShaderMaterial

GLSL Shaders from Scratch from SimonDev

https://simondev.teachable.com/p/glsl-shaders-from-scratch

リファレンス

サイトに馴染んだアニメーション

こういったサイトに馴染んだ3Dアニメーションを作りたい

https://www.visme.co/

3Dアバタービルダー

アバタービルダーとマルチプレイヤーを組み合わせたい

https://peeps.ui8.net/?p=1-2-7-6-8-11-2-1

ポートフォリオ

https://bokoko33.me/

コードTips

remap

シェーダーでよく使う
指定した範囲に変更する

    float inverseLerp(float value, float minValue, float maxValue){
      return (value - minValue) / (maxValue - minValue);
    }

    float remap(float value, float inMin, float inMax, float outMin, float outMax){
      float t = inverseLerp(value, inMin, inMax);
      return mix(outMin, outMax, t);
    }

    float smoothenProgression = remap(uProgression, 0.0, 1.0, -uSmoothness / 2.0, 1.0 + uSmoothness / 2.0);

gltfjsx

Blenderで作成したモデルを、Three.jsで表示するときによく使う
-kはKeep original nameで名前を使用するときに設定

npx gltfjsx public/models/test.glb -o src/components/Test.jsx -r public -k

https://github.com/pmndrs/gltfjsx

テクスチャ

Simple Bake ライトベイク

事前にライトを計算して、テクスチャに書き込む

https://blendermarket.com/products/simplebake---simple-pbr-and-other-baking-in-blender-2

https://note.com/akiram_vr/n/n14f76c18dc0e

スクロールマネージャー

全体像

export const ScrollManager = (props) => {
  const { section, onSectionChange } = props

  // 1) useScroll()でスクロール情報を取得
  const data = useScroll()
  const lastScroll = useRef(0)
  const isAnimating = useRef(false)

  // 2) スタイル調整
  data.fill.classList.add("top-0")
  data.fill.classList.add("absolute")

  // 3) 受け取った section が変化したら、そのセクションへ GSAP で自動スクロール
  useEffect(() => {
    gsap.to(data.el, {
      duration: 1,
      scrollTop: section * data.el.clientHeight,
      onStart: () => {
        isAnimating.current = true
      },
      onComplete: () => {
        isAnimating.current = false
      },
    })
  }, [section])

  // 4) 毎フレームチェックし、スクロール方向でセクションを切り替える
  useFrame(() => {
    if (isAnimating.current) {
      lastScroll.current = data.scroll.current
      return
    }

    // 現在のスクロール位置を pages との関係でセクション計算
    const curSection = Math.floor(data.scroll.current * data.pages)

    // 下方向へスクロールしていて、まだセクション0なら sectionを1に変える
    if (data.scroll.current > lastScroll.current && curSection === 0) {
      onSectionChange(1)
    }
    // 上方向へスクロールしていて、スクロール位置が 1/(pages - 1) 未満なら sectionを0に戻す
    if (
      data.scroll.current < lastScroll.current &&
      data.scroll.current < 1 / (data.pages - 1)
    ) {
      onSectionChange(0)
    }

    lastScroll.current = data.scroll.current
  })

  return null
}

詳細解説

1. useScroll() によるスクロール管理

const data = useScroll()

• @react-three/drei の useScroll() は、WebGL コンテンツと HTML ページのスクロールを連動させる仕組みを提供します。
• data.el はスクロール要素（<div>）への参照、data.scroll.current は 0～1 の範囲で現在のスクロール割合、data.pages は総ページ数などの情報が入っています。
• data.fill はスクロールバー自体 (fill 要素) を指し、そこにクラスを追加してスタイル調整しています。

2. スタイル調整 (data.fill.classList.add("..."))

data.fill.classList.add("top-0")
data.fill.classList.add("absolute")

• スクロールバー（data.fill）が固定されるように、CSS クラスを追加。
• ここでは "top-0", "absolute" といったクラス名が使われています（Tailwind CSS などを想定？）
• これでスクロールバーの見た目・位置を微調整しているだけです。

3. section の変更時に自動スクロール (useEffect + GSAP)

useEffect(() => {
  gsap.to(data.el, {
    duration: 1,
    scrollTop: section * data.el.clientHeight,
    onStart: () => {
      isAnimating.current = true
    },
    onComplete: () => {
      isAnimating.current = false
    },
  })
}, [section])

• 親コンポーネントから section が渡される と、gsap.to(...) で data.el.scrollTop をアニメーションし、特定セクション までスクロールさせます。
• data.el.clientHeight は 1 ページ分の高さとみなし、section * clientHeight で “セクション番号 × 1 ページの高さ” に移動します。
• onStart / onComplete で isAnimating.current を切り替えて、アニメーション中は他のスクロール処理を無視 しています。

4. useFrame で毎フレーム監視 → スクロール量に応じてセクション切り替え

useFrame(() => {
  if (isAnimating.current) {
    lastScroll.current = data.scroll.current
    return
  }

  const curSection = Math.floor(data.scroll.current * data.pages)

  // 下方向にスクロールかつセクション0 => セクション1へ
  if (data.scroll.current > lastScroll.current && curSection === 0) {
    onSectionChange(1)
  }
  // 上方向へスクロール && スクロール位置が 1/(data.pages - 1) より小さい => セクション0へ
  if (
    data.scroll.current < lastScroll.current &&
    data.scroll.current < 1 / (data.pages - 1)
  ) {
    onSectionChange(0)
  }
  lastScroll.current = data.scroll.current
})

• isAnimating.current が true の場合は、GSAP アニメ中なので ユーザー操作を無視 し、lastScroll.current だけ更新して早期 return。
• そうでなければ、現在のスクロール量 (data.scroll.current) を見てセクションを判定。
• curSection = Math.floor(data.scroll.current * data.pages) で、今のページを整数でざっくり算出（例: pages = 2 なら 0～1ペ ージを想定）。
• 条件分岐で「下方向スクロールしている && curSection === 0 → onSectionChange(1)」といったシンプルなロジックを使っています。
• onSectionChange() は親から受け取ったコールバックで、**「現在セクションを X にして！」**という指示を行う → 結果、section の state が変わり、先ほどの useEffect によってスクロール位置が変わる……というループです。

動作イメージ

1. セクション 0 → 1

   • ユーザーが下方向へスクロールすると、data.scroll.current が上昇。
   • if (scroll.current > lastScroll.current && curSection === 0) { onSectionChange(1) } が発火。
   • 親は section を 1 に更新 → useEffect の GSAP scrollTop アニメ → 実際に 1 ページ分下へ移動。

2. セクション 1 → 0

   • ユーザーが上方向へスクロールし、 scroll.current < lastScroll.current となる。
   • さらに data.scroll.current < 1 / (data.pages - 1) ならまだ「上のセクションに戻りたい」状態とみなす。
   • onSectionChange(0) でセクションを戻し、再度 GSAP でスクロール位置を 0 に戻す。

3. アニメーション中は無視

   • GSAP がスクロールをアニメ中 (isAnimating.current = true) はユーザー操作を上書きしない。
   • アニメ完了後に isAnimating.current = false となって、次の操作を受け付ける。

まとめ

• useScroll() でスクロール要素と状態を取得し、gsap.to(..., {scrollTop: ...}) で セクション単位の自動スクロール を行う。
• isAnimating フラグを設けて、アニメ中はユーザー操作をキャンセルして競合を防ぐ。
• useFrame で毎フレームスクロール量を監視し、条件に応じて onSectionChange(...) コールバックを呼び出す。
• つまり 「セクション 0/1」 の 2ページ切り替え をシンプルに制御する仕組み となっています。

このように、JS 側でスクロール位置を完全管理したいときに便利な設計です。ユーザーがスクロールするたびに「セクションが変わったか？」を判定し、自動でスクロール位置を補正（スナップ） するという流れです。

PathFinding.js

https://github.com/qiao/PathFinding.js/

PathFinding.js を使ったパスファインディングの基礎的なサンプルコードを示しつつ、ポイントを解説していきます。

サンプル全体の流れ

1. サーバーのセットアップ (socket.io)

   • 接続/切断を監視し、接続してきたクライアントを管理します。
   • キャラクターの情報や、マップにあるアイテムなどをクライアントへ送信します。

2. マップとオブジェクトの定義

   • マップの大きさや区画数(gridDivision)、アイテム(オブジェクト)の配置情報を定義します。
   • アイテムの位置・回転・サイズから、通行可能かどうかを計算し、歩けるセル(タイル)を設定します。

3. パスファインディングの初期化

   • new pathfinding.Grid(...) でマップに対応するグリッドを生成します。
   • new pathfinding.AStarFinder(...) で A* アルゴリズムを使えるように準備します。

4. 歩行可能セルの更新 (updateGrid)

   • マップ全体を「歩行可(true)」で初期化し、家具や壁となるアイテムのセルは「歩行不可(false)」に書き換えます。
   • 回転によって幅(width)と高さ(height)が変わるアイテムは、その分のセルを歩行不可にします。

5. パスの探索 (findPath)

   • クライアントから「(from) から (to) へ移動したい」というリクエストを受け取ったら、 findPath(from, to) を使って最短ルートを計算します。
   • 返ってきた path (座標リスト)をキャラクターの経路としてクライアントに送信します。

6. キャラクターの更新やイベントの処理

   • キャラクターアバター、ダンスイベントなどをやり取りするために socket.io のイベントを定義しています。

コードのポイント解説

1. PathFinding.js のインポートと初期化

import pathfinding from "pathfinding"

const grid = new pathfinding.Grid(
  map.size[0] * map.gridDivision,
  map.size[1] * map.gridDivision
)

const finder = new pathfinding.AStarFinder({
  allowDiagonal: true,
  dontCrossCorners: true,
})

• pathfinding.Grid
  マップを「升目(Grid)」として管理します。ここで map.size[0] * map.gridDivision は横方向のセル数、 map.size[1] * map.gridDivision は縦方向のセル数を示します。

  • 例: map.size = [10, 10]、gridDivision = 2 の場合、横 20 マス、縦 20 マスのグリッドを生成します。

• pathfinding.AStarFinder
  A* アルゴリズムを使った最短経路探索ができる Finder を生成します。 allowDiagonal: true は斜め移動を許可する設定で、dontCrossCorners: true は「角を対角線でショートカットしない」ようにする設定です。

2. 歩行不可セルの設定 (updateGrid)

const updateGrid = () => {
  // RESET: いったん全部「歩行可(true)」に初期化
  for (let x = 0; x < map.size[0] * map.gridDivision; x++) {
    for (let y = 0; y < map.size[1] * map.gridDivision; y++) {
      grid.setWalkableAt(x, y, true)
    }
  }

  // アイテムごとに歩行不可を設定
  map.items.forEach((item) => {
    if (item.walkable || item.wall) {
      return
    }
    // 回転によって width, height をスワップ
    const width  = (item.rotation === 1 || item.rotation === 3) ? item.size[1] : item.size[0]
    const height = (item.rotation === 1 || item.rotation === 3) ? item.size[0] : item.size[1]

    for (let x = 0; x < width; x++) {
      for (let y = 0; y < height; y++) {
        grid.setWalkableAt(
          item.gridPosition[0] + x,
          item.gridPosition[1] + y,
          false
        )
      }
    }
  })
}

• 家具や壁などの位置(複数セル分)をまとめて歩行不可にする部分です。
• item.walkable が true ならカーペットなど、歩けるオブジェクトなのでスキップしています。

3. パス検索関数 (findPath)

const findPath = (start, end) => {
  // clone しておかないと毎回の検索でグリッドの状態が書き換わってしまう
  const gridClone = grid.clone()

  // A* アルゴリズムでパスを探索
  const path = finder.findPath(
    start[0], start[1],
    end[0], end[1],
    gridClone
  )
  return path
}

• grid.clone() でグリッドをコピーし、 finder.findPath(...) で (startX, startY) から (endX, endY) までの最短パスを取得しています。
• 戻り値 path は「 [x, y] 」の配列になっており、移動するための座標一覧が並びます。

4. socket.io イベント

socket.on("move", (from, to) => {
  const character = characters.find((character) => character.id === socket.id)
  const path = findPath(from, to)
  if (!path) {
    return
  }
  character.position = from
  character.path = path
  io.emit("playerMove", character)
})

• クライアントから「(from) → (to) へ移動してほしい」というリクエストを受けたら findPath(...) を呼び出します。
• 見つかった path をキャラクターに登録して、全クライアントに playerMove イベントを送っています。
• character.position = from は「移動元を記録し直してから、クライアント側が path のとおり移動アニメーションをする」ような使い方ができます。

最小構成のシンプルサンプル

PathFinding.js の学習用に、サーバー機能を省いた単純なサンプルを示します。

// 1. pathfinding の読み込み (ブラウザなら <script src="pathfinding.min.js"> など)
import PF from 'pathfinding'

// 2. Grid を作成 (5 x 5 の例)
const gridWidth  = 5
const gridHeight = 5
const grid = new PF.Grid(gridWidth, gridHeight)

// 3. 一部を歩行不可に (2,2) のセルを壁にする
grid.setWalkableAt(2, 2, false)

// 4. AStarFinder でパス検索
const finder = new PF.AStarFinder()

// 5. スタート(0,0) から ゴール(4,4) までの経路を検索
//   - clone() しない場合は同じ grid を再利用できなくなる可能性がある点に注意
const path = finder.findPath(
  0, 0,
  4, 4,
  grid.clone()
)

// 6. 結果を出力
console.log('Path:', path)
// 例: Path: [ [0,0], [1,0], [2,0], [3,0], [4,0], ... [4,4] ]

このように Grid 上で壁を setWalkableAt(x, y, false) として設定し、 AStarFinder によって最短経路が得られる仕組みになっています。
より複雑なマップでは、今回の例のように壁セルや障害物をたくさん配置したり、対角移動を有効にしたりといった設定で使います。

まとめ

• PathFinding.js は最短経路探索のライブラリとして有名で、Grid と Finder(AStarFinder など) を使ってパスの計算を行います。
• 壁(または歩行不可セル)の設定 がパスファインディングでは最も重要な部分です。家具や障害物のサイズ、回転を考慮して正しくグリッドに書き込む必要があります。
• socket.io と組み合わせると、リアルタイムでのマルチプレイヤー移動システムを容易に実装できます。

PocketBase

オープンソースのSQLiteデータベース

https://pocketbase.io/

個人開発ならこれで十分である

https://qiita.com/bear_montblanc/items/2fe0da8a8452e12d926d

React Three Fiber

1. カメラ

1.1 PerspectiveCamera

• 遠近感（パースペクティブ）を表現できるカメラです。近くのオブジェクトは大きく、遠くのオブジェクトは小さく見えます。
• three.js でいう new THREE.PerspectiveCamera() を React Three Fiber では <PerspectiveCamera /> や <canvas camera={{...}}> のプロパティで指定する場合があります。

1.2 OrthographicCamera

• 平行投影をするカメラです。奥行きによるサイズの変化が起こらないのが特徴で、UI 的なシーンや 2D の表現を行う際によく使われます。

1.3 drei の PerspectiveCamera

• @react-three/drei には、ラッパーとして <PerspectiveCamera /> が用意されています。R3F の <Canvas> 配下で扱いやすくするためのものです。makeDefault を指定すると自動で Canvas のカメラ設定を上書きしてくれます。

2. Canvas (React Three Fiber)

React Three Fiber の <Canvas> コンポーネントは、three.js のエントリーポイントとなる場所を React コンポーネントとして扱えるようにするものです。

• 公式ドキュメント
• <Canvas> の中にカメラやライト、メッシュなどを配置します。
• Suspense や ErrorBoundary との併用ができ、非同期ローディングやエラーを扱いやすいのが特徴です。

3. デバッグのためのヘルパー

3.1 AxesHelper, GridHelper

• three.js での座標軸やグリッドを表示するためのヘルパー。
• R3F で使うなら <primitive object={new THREE.AxesHelper(10)} /> のように指定したり、drei の <Grid /> などを使用する方法もあります。

3.2 leva の useControls

• leva は、UI 上でパラメータを調整できるライブラリです。
• useControls() フックを使って、カメラやマテリアルのパラメーターをリアルタイムに変更してデバッグできます。

3.3 r3f-perf

• FPS やメモリ使用量、draw call 数などのパフォーマンスを簡単にモニタリングできるツールです。

4. カスタムジオメトリ (BufferGeometry)

• three.js の BufferGeometry を R3F で扱うには <bufferGeometry> と <bufferAttribute> を組み合わせて記述します。
• <bufferAttribute attach="attributes-position" count="" itemSize={3} array={positionArray} />
• positionArray は、JavaScript の Float32Array や数値配列で頂点座標を指定します。
• これによって自由度の高いジオメトリを作ることができます。

5. GLTF / GLB モデルの読み込み

5.1 useLoader(GLTFLoader, "パス")

• three.js でいう GLTFLoader を React Hooks で包んだフック。model = useLoader(GLTFLoader, "./model/dog.glb") などと書くと、モデルデータを非同期で読み込めます。

5.2 <primitive object={model.scene}>

• 読み込んだ GLTF (GLB) のシーンをそのまま Three.js のオブジェクトとして配置する方法です。
• モデルによってはライトが含まれていないため、シーンに別途ライトを設置する必要があります。

5.3 drei の useGLTF / gltfjsx

• @react-three/drei の useGLTF を使うと、モデルの nodes, materials が分解されて取得できるので、部分的にマテリアルを差し替えるなどカスタマイズが簡単になります。
• gltfjsx という CLI ツールを使うと、GLB/GLTF ファイルから自動的に JSX コンポーネントを生成してくれます。

5.4 useAnimation(animations, scene)

• GLTF ファイルに含まれるアニメーションを再生するときに使用します。複数のアニメーションを制御できる場合もあります。

5.5 Suspense でローディング表示

• GLTF モデルの読み込みには時間がかかるので、React の <Suspense fallback={<Loading />}> を活用することで、モデルが準備完了するまでローダーやスピナーを表示することができます。

6. パーティクル

• <mesh> の代わりに <points> 要素を使うと、頂点ごとに点を描画するパーティクルシステムが作れます。
• drei の Sparkles や Stars を使うと、星空やキラキラしたエフェクトなどを簡単に実装できます。

7. ライト

7.1 環境光・平行光

• ambientLight は全体を均一に照らす環境光。
• directionalLight は一方向からの光を表現。position で向きを変更できます。

7.2 useHelper

• drei の useHelper(ref, THREE.DirectionalLightHelper, 1) などで、ライトの向きや位置を可視化できます。

7.3 影の設定

• 影を使いたい場合、castShadow (影を落とす側) と receiveShadow (影を受ける側) の両方を設定し、renderer.shadowMap.enabled = true などの設定も必要になります。

7.4 drei の Enviroment, Sky, Cloud など

• HDRI を読み込みたい場合は <Environment files="....hdr" /> で簡単に設定できます。
• <Sky /> や <Cloud />、<Lightformer /> を使ってリアルな空や雲、演出用のライティングを行うことも可能です。

8. イベント

<mesh
  onClick={(e) => console.log('click')}
  onContextMenu={(e) => console.log('context menu')}
  onDoubleClick={(e) => console.log('double click')}
  onWheel={(e) => console.log('wheel spins')}
  onPointerUp={(e) => console.log('up')}
  onPointerDown={(e) => console.log('down')}
  onPointerOver={(e) => console.log('over')}
  onPointerOut={(e) => console.log('out')}
  onPointerEnter={(e) => console.log('enter')}
  onPointerLeave={(e) => console.log('leave')}
  onPointerMove={(e) => console.log('move')}
  onPointerMissed={() => console.log('missed')}
  onUpdate={(self) => console.log('props have been updated')}
/>

• 上記のように R3F では、マウス・ポインタ・クリックイベントなどを mesh に対して付与できます。
• e.stopPropagation() を呼べば、レイキャスト（クリック判定）がその要素や子要素で止まります。

9. カメラ操作

9.1 OrbitControls

• @react-three/drei の <OrbitControls /> を使うと、ユーザーがマウスでドラッグやズームなどを自由に行えるカメラが簡単に作れます。
• たとえば、maxAzimuthAngle={Math.PI / 2} など角度を制限し、maxPolarAngle={Math.PI / 4} でカメラの上下可動域を制限することも可能です。

<OrbitControls
  enablePan={false}
  maxPolarAngle={Math.PI / 2}
  minAzimuthAngle={-Math.PI / 2}
  maxAzimuthAngle={Math.PI / 2}
  minDistance={3}
  maxDistance={10}
/>

9.2 CameraControls

• @react-three/drei に含まれない、別途インストールが必要な場合のあるコントロール（camera-controls というライブラリがベース）。
• 角度回転 (rotate)、左右上下移動 (truck)、ズーム (zoom)、そして setLookAt メソッドなどが用意されており、プログラム的にカメラの動きを制御できます。
• smoothTime プロパティや easing を組み合わせると、ゆるやかなカメラの動きを実現できます。

9.3 PresentationControls

• ユーザーがドラッグすると少しカメラが回転し、ドラッグを離すともとの位置へスナップバックするような演出が可能。
• @react-three/drei の <PresentationControls /> を使います。

9.4 ScrollControls / useScroll

• ページのスクロールに応じて、カメラの位置やオブジェクトの配置をアニメーションさせることができます。
• ScrollControls コンポーネントを使って包み、Scroll コンポーネント内に <Image> や <primitive> を置くと、スクロールするごとに配置した要素がスライド表示されるなど、インタラクティブなページを作れます。

10. テキスト

10.1 <Text>, <Text3D>

• @react-three/drei の <Text> は、2D 的なテキストを 3D 上に配置できます。
• <Text3D> は 3D モデルとしてテキストを表示するため、フォントの JSON データ（typeface.json など）が必要です。

10.2 <Html>

• R3F の <Html> は、3D 空間内に DOM を埋め込む仕組みです。
• wrapperClass や distanceFactor, occlude などを使って、モデルに隠れた場合に DOM も隠す、といった演出が可能になります。

11. 音声

• @react-three/drei の <PositionalAudio> で、オブジェクトから距離が離れるほど音量が下がる 3D サウンドを実装できます。

12. マテリアルいろいろ

12.1 meshReflectorMaterial

• @react-three/drei のリフレクション表現用マテリアル。
• 水面や鏡面などを手軽に演出できます。

12.2 useTexture

• テクスチャを簡単に読み込むフックです。
• const texture = useTexture("/path/to/image.png") のように書くと、自動的に THREE.Texture オブジェクトを取得できます。

12.3 MeshPortalMaterial

• drei に含まれる、ポータル状の効果を作るためのマテリアル。
• たとえば、枠の中だけ異世界が広がるような演出を作ることができます。

13. アニメーション

13.1 useFrame

• R3F でアニメーションを行うときの基本フック。useFrame((state, delta) => { ... }) の中に、フレームごとに更新したい処理を記述します。
• 例えば、物体の回転や移動をリアルタイムで更新したい場合に使います。

13.2 maath の easing.damp

• [maath](https://github.com/pmndrs/maath) ライブラリには、イージング計算を簡単にするための関数が多数用意されています。
• easing.damp(対象, プロパティ, 目標値, ダンピング係数, delta) のように書くと、スムーズなトランジションが実現できます。

13.3 @react-spring/three

• React Spring の three.js / R3F 向け拡張。
• animated.mesh や useSpring, useSprings などを使用して物体やカメラ、マテリアルのアニメーションを “宣言的” に書けます。
• 例: useSpring({ from: { x: 0 }, to: { x: 5 }, ... }) のように書き、<a.mesh position-x={spring.x}>...</a.mesh> と連動させる。

import { a, useSpring, useSpringRef } from "@react-spring/three";

const Scene = () => {
  const springRef = useSpringRef();

  const spring = useSpring({
    ref: springRef,
    from: { x: -2 },
  });

  const clickHandler = () => {
    springRef.start({
      to: { x: 2 },
      config: { duration: 5000 },
    });
  };

  const pointerOverHandler = () => {
    springRef.pause();
  };

  const pointerOutHandler = () => {
    springRef.resume();
  };

  return (
    <a.mesh
      position-x={spring.x}
      onClick={clickHandler}
      onPointerOver={pointerOverHandler}
      onPointerOut={pointerOutHandler}
    >
      <boxGeometry />
      <meshBasicMaterial color="orange" />
    </a.mesh>
  );
};

export default Scene;

• さらに useSprings を使えば、複数オブジェクトを同時に動かすことなども簡単に実装できます。

1. React Three Rapier とは

• Rapier は Rust で書かれた物理シミュレーションエンジンで、WebAssembly を通じて JavaScript/TypeScript から高速に利用できます。
• @react-three/rapier は、その Rapier を React Three Fiber (R3F) 上で手軽に使えるようにしたラッパーです。
• たとえば 重力 や 剛体（RigidBody） の設定、衝突判定（colliders） などが簡単に扱えます。

import { Physics, RigidBody } from "@react-three/rapier";

const PhysicsScene = () => {
  return (
    <Physics gravity={[0, -9.81, 0]}>
      {/* 動く物体 */}
      <RigidBody>
        <mesh castShadow position={[0, 1.5, 0]}>
          <boxGeometry />
          <meshStandardMaterial color="#CC3941" />
        </mesh>
      </RigidBody>

      {/* 固定された床（type="fixed"） */}
      <RigidBody type="fixed">
        <mesh position-y={-1} rotation-x={-Math.PI * 0.5} receiveShadow>
          <boxGeometry args={[8, 8, 0.35]} />
          <meshStandardMaterial color="#C7CAC7" />
        </mesh>
      </RigidBody>
    </Physics>
  );
};

export default PhysicsScene;

• <Physics> コンポーネントでシーン全体に物理演算を適用します。
• 各オブジェクトを <RigidBody> で包むことで、Rapier に管理される剛体オブジェクトになります。
• type="fixed" にすることで、その剛体は重力などを受けずに固定されます（床や壁などに適しています）。

2. コリジョン（衝突判定）と Debug 表示

2.1 Debug

• @react-three/rapier の <Debug> を使うと、Collider（コリジョン形状）が線で可視化され、どのように物理判定がなされているかを視覚的に把握できます。

import { Physics, RigidBody, Debug } from "@react-three/rapier";

const PhysicsScene = () => {
  return (
    <Physics gravity={[0, -9.81, 0]}>
      <Debug />
      {/* ここに RigidBody などを配置 */}
    </Physics>
  );
};

2.2 colliders

• RigidBody の colliders プロパティで、どのような形状を衝突判定に使うか指定できます。
• ball（球）, hull（凸包）, trimesh（ポリゴンメッシュそのもの）などがあります。
  • trimesh は形状を忠実にトレースする分、計算負荷が大きめ。
  • ball, cuboid, capsule などのプリミティブ形状のほうが計算コストが軽い。
• colliders={false} を指定して Collider を自分でカスタムするときは、<CuboidCollider>, <CapsuleCollider> などを使用します。

<RigidBody colliders="trimesh">
  <mesh>
    <torusKnotGeometry args={[0.5, 0.15, 100, 100]} />
    <meshStandardMaterial color="orange" />
  </mesh>
</RigidBody>

<RigidBody colliders={false}>
  <CuboidCollider args={[0.5, 0.5, 0.5]} />
  <mesh>
    <boxGeometry />
    <meshStandardMaterial color="#CC3941" />
  </mesh>
</RigidBody>

3. 剛体への力の加え方

import { Physics, RigidBody } from "@react-three/rapier";

const PhysicsScene = () => {
  const cubeRef = useRef();

  const cubeClickHandler = () => {
    // applyImpulse は一瞬の力
    cubeRef.current.applyImpulse({ x: 1, y: 0, z: 0 });
    
    // addForce はフレームごとに作用し続ける力（使い分け可）
    // cubeRef.current.addForce({ x: 10, y: 0, z: 0 });
  };

  return (
    <Physics>
      <RigidBody ref={cubeRef}>
        <mesh onClick={cubeClickHandler}>
          <boxGeometry />
          <meshStandardMaterial color="#CC3941" />
        </mesh>
      </RigidBody>
    </Physics>
  );
};

• applyImpulse({x, y, z}) は一瞬の衝撃を与えます。
• addForce({x, y, z}) は継続的に力が働き続けます。
• addTorque, applyTorqueImpulse を使うと回転力を与えることも可能です。

4. コリジョンイベント

RigidBody の onCollisionEnter / onCollisionExit / onSleep / onWake を使用すれば、他の剛体との衝突やスリープ状態に入ったことなどのコールバックを受け取れます。

<RigidBody
  onCollisionEnter={() => console.log("Collision Enter")}
  onCollisionExit={() => console.log("Collision Exit")}
  onSleep={() => console.log("Sleeping")}
  onWake={() => console.log("Wake")}
  restitution={0.5} // 反発係数
  friction={0.5}    // 摩擦係数
>
  <mesh>
    <boxGeometry />
    <meshStandardMaterial color="#CC3941" />
  </mesh>
</RigidBody>

• restitution（反発力）: バウンドするかどうかを調整。
• friction（摩擦力）: 表面の滑りやすさを調整。

5. RigidBody の種類 (type)

• dynamic: 重力や衝突の影響を受ける一般的な剛体。
• fixed: 位置や角度が固定された剛体。床や壁、動かないオブジェクトに使用。
• kinematicPosition: 自身には物理的反応はないが、プログラムで position を動かせる（衝突相手には影響を与える）。
  • 例: “回転する床” とか “移動する壁” など。
  • setNextKinematicTranslation(), setNextKinematicRotation() で動かします。
• kinematicVelocity: 速度ベースで動かせる kinematicBody。

<RigidBody ref={spinner} type="kinematicPosition">
  <mesh>
    <boxGeometry args={[2, 0.5, 10]} />
    <meshStandardMaterial color="orange" />
  </mesh>
</RigidBody>

useFrame で経過時間に応じて setNextKinematicTranslation などを更新してやれば、周期的に動くオブジェクトを実現できます。

6. センサー (sensor)

• コリジョン検知はするが、衝突反応（弾かれるなど）をしない“センサー”モードが利用できます。
• sensor プロパティを true にした Collider では、onIntersectionEnter, onIntersectionExit が呼ばれ、衝突したオブジェクトを検知できます。

<RigidBody type="fixed" position={[0, 0, -5]}>
  <CuboidCollider
    args={[1, 1, 1]}
    sensor
    onIntersectionEnter={() => console.log("Enter Sensor")}
    onIntersectionExit={() => console.log("Exit Sensor")}
  />
</RigidBody>

• 例えば、“ゴールエリアに入ったらスコア加算” などの判定に使えます。

7. Instanced Mesh (大量配置)

• 大量のオブジェクト（数百～数千）を配置したい場合、通常の <RigidBody> で 1 つずつ作るとパフォーマンス上の問題が出やすいです。
• <InstancedRigidBodies> と <instancedMesh> を組み合わせると、一度の描画呼び出し（draw call）で多数のオブジェクトを描画できます。

import { Physics, InstancedRigidBodies } from "@react-three/rapier";

const PhysicsScene = () => {
  const count = 300;
  // positions, rotations, scales を useMemo で配列生成

  return (
    <Physics>
      <InstancedRigidBodies
        positions={cubesTransformations.positions}
        rotations={cubesTransformations.rotations}
        scales={cubesTransformations.scales}
      >
        <instancedMesh args={[null, null, count]}>
          <boxGeometry />
          <meshStandardMaterial color="#CC3941" />
        </instancedMesh>
      </InstancedRigidBodies>
    </Physics>
  );
};

• これにより、物理計算もインスタンス単位でまとめて扱われ、描画やシミュレーションの負荷を大きく下げられます。

8. キーボード操作との連動

• @react-three/drei の <KeyboardControls> と組み合わせて、簡単に “WASD” や “スペースキーでジャンプ” などの操作を実装できます。
• useKeyboardControls() フックで押されているキーを取得し、剛体に applyImpulse で移動力を加えます。
• onCollisionEnter で地面に設置したらジャンプフラグ ON、ジャンプキーが押されたら上方向に力を加える… といった流れ。

const allKeys = useKeyboardControls((keys) => keys);
useFrame(() => {
  if (allKeys.forward) {
    cubeRef.current.applyImpulse({ x: 0, y: 0, z: -0.3 });
  }
  // ...
});

1. Post Processing とは

• 3D 描画の最終段階で画像を加工する技術。
• 例: ピクセル化 (Pixelation) や ビネット効果 (Vignette)、ゴッドレイ (God Rays)、コントラスト調整 (BrightnessContrast) など。
• @react-three/postprocessing は postprocessing ライブラリを React Three Fiber 環境で簡単に使えるようにしたラッパーです。

2. 基本的な使い方

import { EffectComposer, Vignette, Pixelation } from "@react-three/postprocessing";

const Effects = () => {
  return (
    <EffectComposer>
      <Pixelation granularity={10} />
      <Vignette eskil={false} offset={0.2} darkness={1.2} />
      {/* 他のエフェクトを続けて追加可能 */}
    </EffectComposer>
  );
};

export default Effects;

• ポストプロセッシングを行うためには、通常、R3F の <Canvas> 内に <EffectComposer> を配置します。
• <EffectComposer> の中に各種エフェクトコンポーネントを並べていくことで、複数の効果を連携させることができます。

3. 主なエフェクト例

@react-three/postprocessing には多種多様なエフェクトが用意されています。ここではよく使われるものをいくつかピックアップします。

1. Pixelation
   • ピクセルアート風の見た目にする効果。
   • granularity プロパティでピクセルのサイズを調整。
2. Vignette
   • 画面の周辺を暗くするビネット効果。
   • offset や darkness を調整することで効果範囲や暗さを変えられる。
3. BrightnessContrast
   • 画面全体の明るさ (brightness) やコントラスト (contrast) を調整。
4. ChromaticAberration
   • いわゆる色収差をシミュレート。画面端に赤・青のずれが生じる。
5. Scanline
   • 古いテレビの走査線を再現。density などを指定。
6. Grid, DotScreen
   • 複数の点・線のパターンによるレトロ表示や特殊エフェクト。
7. Noise
   • 粒状感（フィルムグレイン）の演出。
8. Glitch
   • 一時的に画面が乱れるような表現。delay, duration, strength などを設定。
9. GodRays
   • オブジェクトから光が差し込むような表現。
   • sun プロパティで参照先の ref を指定し、そこから光が広がるイメージを作る。 samples, density などで調整。

4. GodRays の使い方

import { EffectComposer, GodRays } from "@react-three/postprocessing";
import { useRef, forwardRef } from "react";

const Effect = forwardRef((props, ref) => {
  return (
    <EffectComposer>
      {/* ref.current に指定したオブジェクトから God Rays (後光) を生成 */}
      {ref.current && <GodRays sun={ref.current} samples={60} density={0.45} />}
    </EffectComposer>
  );
});

export default Effect;

• GodRays は “光源” に見立てるオブジェクトを指定する必要があります (例えば太陽や光を放つエンティティ)。
• samples (サンプリング回数) や density (密度) を調整して見え方を変化できます。
• ref.current が存在するかどうかで、GodRays の描画可否を判定する実装もよく行われます。

5. Leva と組み合わせる

ポストプロセス効果のパラメータは、実際に値をいじって試行錯誤することが多いです。
そこで Leva の useControls を使うと便利です。

import { useControls } from "leva";
import { BrightnessContrast } from "@react-three/postprocessing";

const Effects = () => {
  const { brightness, contrast } = useControls({
    brightness: { value: 0, min: -1, max: 1, step: 0.01 },
    contrast: { value: 0, min: -1, max: 1, step: 0.01 },
  });

  return (
    <EffectComposer>
      <BrightnessContrast brightness={brightness} contrast={contrast} />
    </EffectComposer>
  );
};

• Leva パネル上でリアルタイムにパラメータを操作できるので、どの数値が最適かを素早く探せます。

6. forwardRef で親コンポーネントの参照を受け取る

// Effect.js
import { EffectComposer, GodRays } from "@react-three/postprocessing";
import { forwardRef } from "react";

const Effect = forwardRef((props, ref) => {
  return (
    <EffectComposer>
      {ref.current && <GodRays sun={ref.current} samples={60} density={0.45} />}
    </EffectComposer>
  );
});

export default Effect;

// Scene.js
import { useRef } from "react";
import Effect from "./Effect";

const Scene = () => {
  const circleRef = useRef();

  return (
    <>
      {/* エフェクトのコンポーネントに ref を渡し、  */}
      {/* circleRef の指すオブジェクトを GodRays の光源とする */}
      <Effect ref={circleRef} />

      {/* 光源として扱う対象に同じ ref を指定 */}
      <mesh ref={circleRef} position-z={-12}>
        <circleGeometry args={[7, 64]} />
        <meshBasicMaterial color="orange" />
      </mesh>
    </>
  );
};

export default Scene;

• forwardRef を使うことで、呼び出し元コンポーネント (Scene) から渡された ref を受け取れます。
• ここでは <mesh> を GodRays の “光源” として使用しています。つまり ref.current が <mesh> オブジェクトを指し、そこから光線が伸びる演出が生まれます。

pmnd.rs で紹介されているライブラリの特徴と主な使いどころをまとめています。3D 表示やアニメーション、状態管理など、React を用いた開発を充実させる便利なツールが揃っています。

1. React Three Fiber

React Three Fiber は React のレンダラーとして three.js を扱うためのライブラリです。

• 概要: three.js の API を直接扱うよりも、React のコンポーネントとして 3D シーンを記述できるので、宣言的かつ可読性の高いコードが書けます。
• 特徴:
  • React のライフサイクルや Hooks と親和性が高い
  • ステートやコンポーネントの仕組みで 3D シーンを管理できる
  • 非同期ローディングやイベントなど React 的な書き方で簡単に実装
• 公式ドキュメント
• GitHub

2. React Spring

React Spring は React 向けのスプリングベースのアニメーションライブラリです。

• 概要: 要素の動きを物理演算に基づくスプリング（バネ）挙動で実現できるため、自然で滑らかなアニメーションが作りやすいのが特徴です。
• 特徴:
  • 数値や色、SVG、三次元など、さまざまなプロパティをアニメーション
  • 宣言的にアニメーションを定義するため理解しやすく、保守しやすい
  • @react-spring/three で Three.js/R3F 上のメッシュやカメラもアニメーション可能
• 公式ドキュメント
• GitHub

3. Drei

Drei は React Three Fiber のための便利なヘルパーコンポーネント集です。

• 概要: R3F でよく使われるパターンをまとめた拡張パッケージ。カメラコントロール、テキスト表示、環境光設定、スタープリミティブなど、多岐にわたるコンポーネントが用意されています。
• 特徴:
  • <OrbitControls>, <Environment>, <Text> など「よく使う機能」を簡単に導入
  • 三次元空間内で UI, 物理、キャラクターコントロールなどを扱うときの時短になる
  • R3F の周辺ツールとも互換性が高い
• 公式ドキュメント
• GitHub

4. Zustand

Zustand はフックベースのシンプルでスケーラブルな状態管理ライブラリです。

• 概要: Redux のような概念をシンプルにしたフック形式の API でありながら、軽量・高速。
• 特徴:
  • “Bearbones” な実装で、わずかなコード量でグローバルステートを管理可能
  • Immer や middleware との連携で柔軟に拡張できる
  • R3F と組み合わせて、カメラやオブジェクトの状態を Store で一元管理するケースが多い
• 公式ドキュメント
• GitHub

5. Jotai

Jotai はシンプルかつ柔軟な React 用状態管理ライブラリです。

• 概要: “原子 (Atom)” の概念を用い、最小単位のステートを組み合わせることでグローバルステートを構築します。
• 特徴:
  • アトミックデザインのような「小さな単位」のステート管理を重視
  • Redux, Context API, Recoil などと似た感覚で使えるが、シンプルで拡張性が高い
  • 非同期データや派生ステートも簡単に管理
• 公式ドキュメント
• GitHub

6. Valtio

Valtio は proxy ベースの状態管理ライブラリです。

• 概要: JavaScript の Proxy を使い、オブジェクトをそのまま状態として扱い、変更が生じると自動でレンダリングをトリガーします。
• 特徴:
  • “mutable なオブジェクトを直接扱える” というシンプルさ
  • Immer のようにイミュータブル変換をしなくても良い
  • 複雑なネスト構造のステートでも簡単に変更追跡
• 公式ドキュメント
• GitHub

7. A11y

@react-three/a11y は WebGL シーンへのアクセシビリティを提供するライブラリです。

• 概要: React Three Fiber 上で 3D オブジェクトにフォーカスやスクリーンリーダーによる読み上げ対応など、アクセシビリティ機能を付与できる。
• 特徴:
  • <A11y> コンポーネントを使い、フォーカスやタブ操作をサポート
  • 3D コンテンツでもアクセシブルなエクスペリエンスを実現
  • WebGL とアクセシビリティの相性を良くするための必須ツール
• 公式ドキュメント
• GitHub

8. React Postprocessing

React Postprocessing は、React Three Fiber でポストプロセス効果を扱うためのラッパーです。

• 概要: postprocessing ライブラリを R3F 環境で簡単に導入可能。
• 特徴:
  • ブルーム効果やゴッドレイ、グリッチなどの視覚効果を手軽に適用
  • <EffectComposer> を利用して複数のエフェクトをチェーンさせられる
  • Drei との相性も良く、見た目を華やかにしたい場合に重宝
• 公式ドキュメント
• GitHub

9. uikit

uikit は React Three Fiber 上で使える UI コンポーネント集です。

• 概要: 3D シーンや WebGL のコンテキストの中で、手軽に UI 要素を配置できるようにするライブラリ。
• 特徴:
  • 3D 上にボタンやスライダーを直接置くなど、UI の実装を手助け
  • 背景との一貫性を保ちつつ、エンドユーザーが操作しやすい UI を提供
  • WebGL と DOM UI との橋渡しをシンプルにする
• 公式ドキュメント
• GitHub

10. xr

@react-three/xr は R3F で VR/AR を扱うためのライブラリです。

• 概要: WebXR API を React Three Fiber に統合し、VR/AR デバイスでの描画・操作を簡単に実装できる。
• 特徴:
  • <VRCanvas> や <ARCanvas> を使ったり、コントローラーイベントをフックできる
  • Oculus などのヘッドセットで動く 3D アプリを React で構築
  • Hand tracking や gesture などの拡張機能も活用可能
• 公式ドキュメント
• GitHub

カードアニメーション

タロットカードの画像をドラッグ操作でスワイプし、スワイプ速度が一定を超えると画面外に飛ばすアニメーションを @react-spring/web と react-use-gesture を用いて実装しています。

App.js (メインのコンポーネント)

import React, { useState } from 'react'
import { useSprings, animated, to as interpolate } from '@react-spring/web'
import { useDrag } from 'react-use-gesture'

import styles from './styles.module.css'

/**
 * 表示するタロットカードの画像 URL リスト。
 * 実際には6枚分のURLが配列に含まれている。
 */
const cards = [
  'https://upload.wikimedia.org/wikipedia/commons/f/f5/RWS_Tarot_08_Strength.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/5/53/RWS_Tarot_16_Tower.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/9/9b/RWS_Tarot_07_Chariot.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/d/db/RWS_Tarot_06_Lovers.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/RWS_Tarot_02_High_Priestess.jpg/690px-RWS_Tarot_02_High_Priestess.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/d/de/RWS_Tarot_01_Magician.jpg',
]

/**
 * カードを配置する際の最終状態(to)を決める関数
 * @param i カードのインデックス
 */
const to = (i) => ({
  x: 0,
  y: i * -4,        // カードが少しずつズレて重なるように設定
  scale: 1,
  rot: -10 + Math.random() * 20, // -10〜+10度の間でランダムな回転
  delay: i * 100,                // 各カードが少しずつ遅れてアニメーション開始
})

/**
 * カードの初期位置(from)を決める関数
 * @param _i インデックス (ここでは使っていない)
 */
const from = (_i) => ({
  x: 0,
  rot: 0,
  scale: 1.5,
  y: -1000, // 画面上部よりかなり上から飛んでくる
})

/**
 * カードの回転角度(rot)と拡大率(scale)からCSS用 transform文字列を生成する関数
 * r: 回転角度, s: スケール(拡大率)
 */
const trans = (r, s) =>
  `perspective(1500px) rotateX(30deg) rotateY(${r / 10}deg) rotateZ(${r}deg) scale(${s})`

/**
 * Deckコンポーネント: カードの束(デッキ)を表示し、ドラッグ操作に連動したアニメーションを実装
 */
function Deck() {
  // 飛んでいったカードのインデックスを格納するSet
  const [gone] = useState(() => new Set())

  // useSprings: 複数カードのアニメーション状態をまとめて管理
  // props: カードごとのアニメーション値
  // api: 値を後から更新するためのAPI
  const [props, api] = useSprings(cards.length, (i) => ({
    ...to(i),
    from: from(i),
  }))

  /**
   * useDrag:
   * args: [index] -> バインドする際にカードのインデックスを渡す
   * down: マウス・タッチが押下中かどうか
   * movement: [mx, my] -> ドラッグ量(ここではmxのみ使う)
   * direction: [xDir, yDir] -> ドラッグ方向(ここではxDirのみ使う)
   * velocity -> ドラッグの速度
   */
  const bind = useDrag(({ args: [index], down, movement: [mx], direction: [xDir], velocity }) => {
    const trigger = velocity > 0.2        // スワイプ速度が0.2を超えるならカードを飛ばす
    const dir = xDir < 0 ? -1 : 1         // ドラッグが左なら-1, 右なら+1
    if (!down && trigger) gone.add(index) // ボタン離した＆速度しきい値を超えたらgoneに登録

    api.start((i) => {
      // ドラッグしているカード以外は変更しない
      if (index !== i) return

      const isGone = gone.has(index)
      // カードが飛んでいったら画面外まで移動、そうでなければドラッグ量に応じて追従
      const x = isGone
        ? (200 + window.innerWidth) * dir
        : down
        ? mx
        : 0

      // 回転量: ドラッグ量を割り算、さらに飛んでいくカードは速度に応じた追加回転
      const rot = mx / 100 + (isGone ? dir * 10 * velocity : 0)

      // ドラッグ中は少し拡大(1.1)して持ち上げたように見せる
      const scale = down ? 1.1 : 1

      return {
        x,
        rot,
        scale,
        delay: undefined,
        config: {
          friction: 50,
          tension: down ? 800 : isGone ? 200 : 500,
        },
      }
    })

    // もしすべてのカードが飛んだら、0.6秒後にリセットして再度カードを元に戻す
    if (!down && gone.size === cards.length) {
      setTimeout(() => {
        gone.clear()
        api.start((i) => to(i))
      }, 600)
    }
  })

  // 実際の描画: 各カードに対してアニメーション値を割り当てる
  return (
    <>
      {props.map(({ x, y, rot, scale }, i) => (
        // スタイルの x, y でカード位置を決定
        <animated.div className={styles.deck} key={i} style={{ x, y }}>
          {/*
            カード本体。bind(i)を渡し、ドラッグ可能に。
            transformにはrotとscaleを組み合わせた3D変換を指定し、背景画像をcards[i]に設定
          */}
          <animated.div
            {...bind(i)}
            style={{
              transform: interpolate([rot, scale], trans),
              backgroundImage: `url(${cards[i]})`,
            }}
          />
        </animated.div>
      ))}
    </>
  )
}

/**
 * Appコンポーネント: 画面中央にDeckコンポーネントを配置
 */
export default function App() {
  return (
    <div className={styles.container}>
      <Deck />
    </div>
  )
}

JavaScript コードのポイント

1. カードリスト: cards 配列に 6 つの画像 URL を格納しています。
2. アニメーションパラメータ: to(i) で “最終状態”、from(i) で “初期位置” を定義。
3. useSprings: 複数要素 (カード) の座標や回転などを一括で管理し、配列で props (各カードごとの状態) を取得します。
4. useDrag: ドラッグ操作を取得し、速度(velocity) や方向(direction) に応じてカードの行き先を決定。
   • 一定速度を超えると gone に追加し、カードを画面外に飛ばす。
   • 全カードが飛んだら少し時間を置いて元の位置に戻すロジックを実装しています。
5. interpolate + trans 関数: 角度 (rot) とスケール (scale) をまとめて CSS の transform プロパティに変換。3D パースを付けることで奥行きを演出しています。

styles.module.css

.container {
  background: lightblue; /* 背景色を淡い水色に設定 */
  cursor: url('https://uploads.codesandbox.io/uploads/user/b3e56831-8b98-4fee-b941-0e27f39883ab/Ad1_-cursor.png') 39 39,
    auto; /* カーソル画像を独自に設定 */
  display: flex;
  align-items: center; /* 子要素を縦方向に中央寄せ */
  height: 100%;        /* 画面全体の高さを占める */
  justify-content: center; /* 子要素を横方向に中央寄せ */
}

.deck {
  position: absolute; /* カードを重ねるために絶対配置 */
  width: 300px;       /* カードを配置する領域の横幅 */
  height: 200px;      /* カードを配置する領域の縦幅 */
  will-change: transform;  /* CSS最適化のための指定 */
  display: flex;       /* 子要素(実際のカード)を中央寄せにする */
  align-items: center;
  justify-content: center;
  touch-action: none;  /* タッチイベントを通常の画面スクロールなどに取られないようにする */
}

.deck > div {
  background-color: white;
  background-size: auto 85%;
  background-repeat: no-repeat;
  background-position: center center;
  width: 45vh; /* 高さに連動して横幅を可変にした例 (最大150px) */
  max-width: 150px;
  height: 85vh; /* 画面の縦方向に合わせて高さを可変に */
  max-height: 285px;
  will-change: transform;
  border-radius: 10px; /* 角を少し丸める */
  box-shadow: 0 12.5px 100px -10px rgba(50, 50, 73, 0.4),
              0 10px 10px -10px rgba(50, 50, 73, 0.3); /* カードに影を付けて浮いているように見せる */
}

スタイルのポイント

• .container で画面全体を中央寄せにし、カーソル画像を独自設定して遊び心を出しています。
• .deck は、絶対配置にしてカードを重ねられるようにしつつ、サイズを指定し、カード本体を中央に配置しています。
• .deck > div は、実際にカード画像を表示する要素。
  • background-size: auto 85% で画像を縦方向優先で 85% まで拡大・表示しています。
  • will-change: transform を指定し、GPU によるハードウェアアクセラレーションが効きやすくしています。
  • box-shadow でカードに陰影を付け、フラットになり過ぎないよう調整。

動作

• ページを開くと 6 枚のタロットカードが重なって表示されます。
• カードをドラッグすると、ドラッグ量に応じて少し持ち上がったように回転 (rot) & 拡大 (scale) しながら動きます。
• スワイプ速度が一定以上の場合はカードが画面の左右どちらかへ勢いよく飛んでいき、速度が遅ければ元の位置に戻ります。
• すべて飛ばすと一旦カードが消え、0.6 秒後にまた元のスタック位置から復活します。

同期アニメーション

@react-spring/three を使用して Three.js (React Three Fiber) 上のメッシュをスプリングアニメーションさせています。
また、onChange イベントを使ってスプリング値（ここでは position）を外部へ同期 (sync) する仕組みを解説しています。

1. 概要

• 問題背景
  通常、useSpring 等で管理しているアニメーションの値は、React Hooks 内で閉じているため「アニメーション中の値」を外部から取得するのが難しくなりがちです。
  しかし、ほかのコンポーネントや外部の store が「現在の座標（あるいはスプリングの値）を参照したい」といったケースでは、その値を随時取得したくなることがあります。

• 解決方法
  @react-spring/core (あるいは @react-spring/three) には、onChange というコールバックが用意されています。これを使うことで、「スプリング値が更新されるたびに外部へ通知する」仕組みを実装可能です。

• 今回の例

  1. Blob（球体メッシュ） があり、その位置やスケール、カラーを useSpring でアニメーション管理。
  2. onChange のなかで position のスプリング値が変わるたびに THREE.Vector2 を更新。
  3. 親コンポーネント は forwardRef + useImperativeHandle を介して、子コンポーネント (MyScene) から現在の座標を取得する。
  4. サンプルでは 2 秒おきにコンソールに position を出力して “同期が取れている” ことを示しています。

2. コード全体の流れ

2.1 MyScene コンポーネント

const MyScene = forwardRef(({}, ref) => {
  // -- 1) 各種RefsやStateの宣言 --
  const isOver = useRef(false)                 // ポインタがcanvas領域上にあるかどうかを示す
  const [vector2] = useState(() => new Vector2())  // onChangeで常に最新の座標を格納するためのVector2

  const { width, height } = useThree(state => state.size) // Canvasの幅・高さ

  // -- 2) useSpringの宣言 --
  const [springs, api] = useSpring(() => ({
    scale: 1,
    position: [0, 0],
    color: '#ff6d6d',
    // スプリング値が更新されるたびに呼ばれるコールバック
    onChange: ({ value }) => {
      // value.position[0], value.position[1] を vector2 に代入
      vector2.set(value.position[0], value.position[1])
    },
    // keyごとのconfig設定
    config: key => {
      switch (key) {
        case 'scale':
          return { mass: 4, friction: 10 }
        case 'position':
          return { mass: 4, friction: 220 }
        default:
          return {}
      }
    },
  }))

  // -- 3) 親コンポーネントから呼び出されるハンドル (useImperativeHandle) --
  useImperativeHandle(ref, () => ({
    getCurrentPosition: () => vector2,
  }))

  // 以下、各イベントハンドラを定義:

  // (A) クリックで color を切り替え
  const handleClick = useCallback(() => {
    let clicked = false
    return () => {
      clicked = !clicked
      api.start({ color: clicked ? '#569AFF' : '#ff6d6d' })
    }
  }, [])

  // (B) マウスオーバー/アウトで scale を変更
  const handlePointerEnter = () => {
    api.start({ scale: 1.5 })
  }
  const handlePointerLeave = () => {
    api.start({ scale: 1 })
  }

  // (C) Window上のpointerイベントで Blob を移動
  const handleWindowPointerOver = useCallback(() => {
    isOver.current = true
  }, [])
  const handleWindowPointerOut = useCallback(() => {
    isOver.current = false
    api.start({ position: [0, 0] })
  }, [])
  const handlePointerMove = useCallback(
    e => {
      if (isOver.current) {
        const x = (e.offsetX / width) * 2 - 1
        const y = (e.offsetY / height) * -2 + 1
        api.start({ position: [x * 5, y * 2] })
      }
    },
    [api, width, height]
  )

  // -- 4) Windowのポインタイベントを登録/解除
  useEffect(() => {
    window.addEventListener('pointerover', handleWindowPointerOver)
    window.addEventListener('pointerout', handleWindowPointerOut)
    window.addEventListener('pointermove', handlePointerMove)
    return () => {
      window.removeEventListener('pointerover', handleWindowPointerOver)
      window.removeEventListener('pointerout', handleWindowPointerOut)
      window.removeEventListener('pointermove', handlePointerMove)
    }
  }, [handleWindowPointerOver, handleWindowPointerOut, handlePointerMove])

  // -- 5) レンダリング --
  return (
    <animated.mesh
      onPointerEnter={handlePointerEnter}
      onPointerLeave={handlePointerLeave}
      onClick={handleClick()}
      scale={springs.scale}
      position={springs.position.to((x, y) => [x, y, 0])} // Vector3([x, y, 0])に変換
    >
      <sphereGeometry args={[1.5, 64, 32]} />
      <AnimatedMeshDistortMaterial
        speed={5}
        distort={0.5}
        color={springs.color}
      />
    </animated.mesh>
  )
})

ポイント解説

1. onChange の利用

   onChange: ({ value }) => {
     vector2.set(value.position[0], value.position[1])
   }
   

   • スプリングが更新されるたびに呼ばれるコールバックです。value.position に現在の (x, y) が入ります。
   • ここで THREE.Vector2 (vector2) を書き換えておけば、常に「最新の座標」を保持できます。

2. useImperativeHandle と forwardRef

   useImperativeHandle(ref, () => ({
     getCurrentPosition: () => vector2,
   }))
   

   • 親コンポーネントが ref.current.getCurrentPosition() で、この vector2 を取得可能。
   • これにより「スプリング値を親が随時読み取れる」仕組みになっています。

3. Window 上のポインタイベント

   • pointerover / pointerout / pointermove をグローバルに監視し、Canvas から外れても座標を追いかけられるようにしています。
   • isOver.current = true/false のフラグを用いて、Canvas 内にいる間だけ座標を更新。

4. マウス・ポインタでメッシュを操作

   • handlePointerEnter/Leave ではスケールを変更して大きさを変える演出を行い、
   • handleClick では色 (color) を切り替えるなどのアニメーションを api.start で制御。

2.2 親コンポーネント (MyComponent)

export default function MyComponent() {
  const blobApi = useRef(null)

  useEffect(() => {
    const interval = setInterval(() => {
      if (blobApi.current) {
        // useImperativeHandle で定義した getCurrentPosition() を呼び出す
        const { x, y } = blobApi.current.getCurrentPosition()
        console.log('the blob is at position', { x, y })
      }
    }, 2000)

    return () => clearInterval(interval)
  }, [])

  return (
    <Canvas>
      <ambientLight intensity={0.8} />
      <pointLight intensity={1} position={[0, 6, 0]} />
      <MyScene ref={blobApi} />
    </Canvas>
  )
}

• blobApi.current は MyScene コンポーネントで forwardRef により受け取った ref。
• 2 秒おきに getCurrentPosition() を呼び出し、コンソールに座標を表示しています。
• これにより、“スプリングで動いている値” を外部で随時取得できていることが確認できます。

3. なぜ「onChange」で同期を取る必要があるのか？

• スプリングの値 (springs.position など) は、SpringValue と呼ばれるクラスインスタンスで管理されており、単に外部 store に入れるだけだと “値” ではなく “オブジェクト” を入れてしまうことになります。
• さらに、アニメーション中は値が連続で変化するため、必要なタイミングで「実際の数値」を取り出す仕組みがないと外部と同期が取りにくい。
• onChange コールバックを活用すれば、「スプリング値が更新された瞬間」に「数値だけ」を受け取り、外部の変数へ反映できます。

4. まとめ

1. React Spring の onChange

   • スプリング内部の値変化をフックし、最新の数値を取り出して必要な場所に転送できる。
   • 今回のように Three.js の Vector2 / Vector3 にセットし、外部のコンポーネントやロジックに受け渡す用途で使える。

2. forwardRef + useImperativeHandle

   • 「子コンポーネントの内部状態（ここでは Blob の座標）を親が取り出す」構造が簡単に作れる。
   • Redux や Zustand などのグローバルストアを介するよりも、単純かつ直接的に値を取得できる手段となる。

3. 外部ストアとの連携

   • 本例では単に Vector2 に値を保存しているだけですが、同様の手法で「外部の状態管理ストア (e.g. Redux, Zustand) に値を反映する」「サーバーに送信する」といったことも可能。
   • onChange で得た値を dispatch や setState でミドルウェアに渡すことで、UI アニメーションと外部ロジックの整合を保てる。

@react-three/rapier

React Three Fiber (R3F) 上で Rapier という物理エンジンを扱うためのライブラリ @react-three/rapier（略称: r3/rapier）の基本的な使い方と主要な機能を、チュートリアル形式でわかりやすくまとめています。

1. イントロダクション

@react-three/rapier は、Rust 製の高速・高性能な物理エンジン Rapier を WebAssembly (WASM) を通じて JavaScript/TypeScript から利用できるようにし、さらに React Three Fiber とシームレスに連携するためのラッパーライブラリです。

• 主な特長
  1. 最小限のコードで物理挙動を導入
  2. React Hooks で直感的に剛体（RigidBody）やコライダー（Collider）を定義
  3. 衝突・イベント・ジョイント（関節）など豊富な物理演算機能をサポート
  4. デバッグ描画 でコライダーの形状をリアルタイム可視化

2. 基本の使い方

2.1 セットアップ

npm install @react-three/rapier

react-three-fiber と合わせてインストールしておきます。
続いて、シーン (<Canvas>) の中に <Physics> コンポーネントを配置します。

import { Canvas } from "@react-three/fiber"
import { Physics } from "@react-three/rapier"
import { Suspense } from "react"

function App() {
  return (
    <Canvas>
      <Suspense fallback={null}>
        <Physics>
          {/* ここに剛体 (RigidBody) やコライダー (Collider) を配置 */}
        </Physics>
      </Suspense>
    </Canvas>
  )
}

2.2 RigidBody (剛体)

R3F の <mesh> を <RigidBody> でラップすると、自動的に物理演算の対象となります。

import { Physics, RigidBody } from "@react-three/rapier";
import { Box } from "@react-three/drei";

const Scene = () => {
  return (
    <Physics>
      {/* RigidBodyで包んだBox。自動的にコライダーも生成される */}
      <RigidBody>
        <Box />
      </RigidBody>
    </Physics>
  )
}

• colliders
  <RigidBody> を包んだメッシュの形状から、コライダー（衝突判定形状）を自動的に生成します。
  • "cuboid", "ball", "trimesh", "hull", false などの指定が可能。
  • 何も指定しない場合のデフォルトは "hull" になる場合が多い（バージョンにより異なります）。

<RigidBody colliders="ball">
  <Sphere />
</RigidBody>

3. コライダーの設定

3.1 自動コライダー (Automatic Colliders)

• globally: <Physics> の colliders プロパティで全体デフォルトを設定
• locally: <RigidBody> の colliders プロパティで個別に上書き

<Physics colliders="hull">
  {/* global default = "hull" */}
  <RigidBody>
    <Box />
  </RigidBody>
  <RigidBody>
    <Sphere />
  </RigidBody>
</Physics>

<Physics colliders={false}>
  {/* 自動生成を無効化しつつ、個別には "cuboid" などを指定 */}
  <RigidBody colliders="cuboid">
    <Box />
  </RigidBody>
  <RigidBody colliders="ball">
    <Sphere />
  </RigidBody>
</Physics>

3.2 手動コライダー (Collider Components)

• <BallCollider>, <CuboidCollider>, <CapsuleCollider>, <MeshCollider>, etc…
• 同じ <RigidBody> の中に複数配置すれば複合コライダーが作れます。

<RigidBody>
  <Box />
  {/* Box用のカスタム collider */}
  <CuboidCollider args={[0.5, 0.5, 0.5]} />
</RigidBody>

ポイント: 目に見えないコライダーだけを置きたい場合でも、ダミーの <mesh> を置くか、<RigidBody> の中に <BoxCollider> などを挿入するだけでOKです。

4. デバッグ表示

物理エンジン上のコライダー形状を可視化するには、<Physics> に debug プロパティを付けるだけ。

<Physics debug>
  <RigidBody>
    <Box />
  </RigidBody>
</Physics>

これでワイヤーフレーム状にコライダーが描画され、どのように衝突判定が生成されているかが確認できます。

5. 剛体の動かし方・力の加え方

5.1 剛体へのアクセス

<RigidBody> の ref を取得すると、実際の物理剛体 (RapierRigidBody) を操作できます。

import { RigidBody, RapierRigidBody } from "@react-three/rapier";
const MyBox = () => {
  const boxRef = useRef<RapierRigidBody>(null);

  useEffect(() => {
    // 例えばフレーム開始時に力を加える
    if (boxRef.current) {
      boxRef.current.applyImpulse({ x: 0, y: 5, z: 0 }, true);
    }
  }, []);

  return (
    <RigidBody ref={boxRef}>
      <mesh>
        <boxGeometry />
        <meshStandardMaterial />
      </mesh>
    </RigidBody>
  );
};

5.2 力とトルク

• applyImpulse({ x, y, z }, wake = true): 一瞬の衝撃
• addForce({ x, y, z }, wake = true): 継続的な力
• applyTorqueImpulse({ x, y, z }, wake = true): 一瞬の回転衝撃
• addTorque({ x, y, z }, wake = true): 継続的な回転力

rigidBody.current.applyImpulse({ x: 0, y: 10, z: 0 }, true)

6. 衝突イベント / Collision

6.1 衝突コールバック

• onCollisionEnter, onCollisionExit, onSleep, onWake, onContactForce などを <RigidBody> や個別 Collider に記述。
• イベントハンドラの引数には衝突相手の情報や接触点のマニフォールドが含まれます。

<RigidBody
  onCollisionEnter={({ manifold, target, other }) => {
    console.log("衝突した", target.rigidBodyObject.name, "と", other.rigidBodyObject?.name);
  }}
  onSleep={() => console.log("Zzzz...")}
/>

6.2 センサー

コライダーを sensor にすると衝突判定はするが実際の物理干渉（反発）はしなくなります。
onIntersectionEnter, onIntersectionExit を使って “通過” を検知し、トリガーゾーンに利用可能です。

<RigidBody>
  <CuboidCollider
    args={[5, 5, 1]}
    sensor
    onIntersectionEnter={() => console.log("Goal!")}
  />
</RigidBody>

7. インスタンシング (Instanced Meshes)

多数のオブジェクトを同じジオメトリで描画する場合、<InstancedRigidBodies> を使うとパフォーマンスを向上できます。

import { InstancedRigidBodies, RapierRigidBody } from "@react-three/rapier";

const COUNT = 1000;
function MyScene() {
  // 剛体を保存しておく配列参照
  const rigidBodies = useRef<RapierRigidBody[]>(null);

  const instances = useMemo(() => {
    const arr = [];
    for (let i = 0; i < COUNT; i++) {
      arr.push({
        key: `instance_${i}`,
        position: [Math.random()*10, Math.random()*10, Math.random()*10],
        rotation: [Math.random(), Math.random(), Math.random()],
      });
    }
    return arr;
  }, []);

  useEffect(() => {
    // 例) 特定のインスタンスに衝撃を与える
    rigidBodies.current?.[40].applyImpulse({ x: 0, y: 10, z: 0 }, true);
  }, []);

  return (
    <InstancedRigidBodies ref={rigidBodies} instances={instances} colliders="ball">
      {/* 1つのInstancedMeshを描画。count=COUNT */}
      <instancedMesh args={[null, null, COUNT]} />
    </InstancedRigidBodies>
  );
}

8. 時間の進み方（timeStep）

物理シミュレーションの時間刻みを変更できます。

<Physics timeStep={1 / 30}> {/* 1フレームにつき1/30秒刻みで進める */}
  ...
</Physics>

// あるいは可変フレームレートを追従させる
<Physics timeStep="vary">
  ...
</Physics>

ただし、可変フレーム ("vary") は再現性（デターミニスム）が失われがちなので注意が必要です。

9. ジョイント (Joints)

2つの剛体を “接合” する機能。固定・回転・スライドなどさまざまな種類があり、useXxxJoint フックを通じて定義します。

• FixedJoint：2つの剛体を完全に固定 (相対変位なし)
• SphericalJoint：ボールジョイント (任意角度に回転、位置は固定)
• RevoluteJoint：回転軸を1つに限定 (扉や車輪など)
• PrismaticJoint：スライド(直線移動)のみ許可
• RopeJoint：2つの剛体の最大距離を制限 (紐のような振る舞い)
• SpringJoint：ばねによる弾性を付与 (質点バネ系)

const [bodyARef, bodyBRef] = [useRef<RapierRigidBody>(null), useRef<RapierRigidBody>(null)];
const joint = useRevoluteJoint(bodyARef, bodyBRef, [
  [0, 0, 0], // bodyAのローカル空間におけるジョイント位置
  [0, 0, 0], // bodyBのローカル空間におけるジョイント位置
  [0, 1, 0], // 回転軸
]);

10. 高度な使い方

• useRapier: 物理ワールドやラッパーのインスタンスに直接アクセスできるフック。
• useBeforePhysicsStep, useAfterPhysicsStep: 物理ステップ前後に特定の処理を差し込むことが可能。
• Manual stepping: 自分で world.step() を呼び出して制御する方法。
• On-demand rendering: updateLoop="independent" を設定し、フレームレンダリングと物理ステップを分離するなどの最適化が可能。
• Snapshots: 物理ワールドをシリアライズ・デシリアライズして、セーブ/ロードのような仕組みを実現。

まとめ

1. <Physics> コンポーネント
   • 物理ワールドを生成するルート。gravity などのグローバル設定が可能。
2. <RigidBody>
   • メッシュを包むだけで自動的に物理オブジェクトにできる。
   • colliders プロパティで自動生成されるコライダータイプを切り替え可能。
3. Collider Components
   • <BoxCollider>, <BallCollider> などを手動で付与し、複雑な衝突形状を構築できる。
4. 衝突イベント
   • onCollisionEnter / onCollisionExit, onSleep, onIntersectionEnter（センサー）など、多彩なフックで反応を取得。
5. ジョイント
   • useFixedJoint, useRevoluteJoint などで剛体同士を結びつけ、多様な物理表現 (ドア、車輪、チェーンなど) が実現。

影

React Three Fiber でシーンにリアルな影を付ける方法はいくつかありますが、それぞれメリット・デメリットや目的が異なります。ここでは AccumulativeShadows や RandomizedLight を使ったアプローチ、そして ContactShadows との違い・使い分けを中心に解説します。

1. 影の全体像と基本的な手法

1.1 デフォルトのリアルタイムシャドウ

• Canvas に shadows を付与

  <Canvas shadows>
    ...
  </Canvas>
  

• ライトに castShadow

  <directionalLight castShadow ... />
  

• 影を落とすオブジェクトに castShadow、影を受けるオブジェクトに receiveShadow

  <mesh castShadow receiveShadow />
  

この方法は「リアルタイムシャドウマップ」と呼ばれ、動的にオブジェクトが移動したりライトの角度が変わっても影が追従します。

メリット:

• すべてが動的に変化するので、オブジェクトを動かしたりしても自然に影が変化
• Three.js に標準で実装されているシャドウマップ機能をそのまま利用

デメリット:

• シャドウマップを高解像度にするとパフォーマンスに影響
• 大きなシーンだと、カメラの調整（shadow-camera-far/left/right など）も必要
• 影のエッジが硬くなりやすく、ソフトにしようとすると設定が少し複雑

1.2 Drei の ContactShadows

• ContactShadows は、ライトを使わず オブジェクト形状 + 仮想平面 から“接地面の影”を計算し、そこにだけ影を表示するものです。
• ContactShadows コンポーネントを一つ置くだけでシーンの地面上に簡易的な影を表示できます。

<ContactShadows
  position={[0, -0.5, 0]} // 影を落とす平面の位置
  scale={10}              // シャドウが投影される範囲
  blur={2}                // ぼかし具合
  opacity={0.5}           // 影の不透明度
/>

メリット:

• セットアップがとてもシンプル
• ライトの castShadow 設定が不要
• 軽量かつ、接地面の影をさっと付けたい場合に便利

デメリット:

• 接地面以外への影は作れない（壁や他のオブジェクトへの投影は不可）
• オブジェクトの高さや姿勢によっては「不自然な影」になりやすい
• シンプルな演出向きで、高度な影には不向き

2. AccumulativeShadows と RandomizedLight

2.1 AccumulativeShadows とは

• AccumulativeShadows は “累積” という名前のとおり、「複数フレームにわたって影を合成」しながらソフトシャドウを実現する仕組みです。
• 1 フレームごとに少しずつ影を計算し、だんだんと滑らかな影にしていくイメージ。

<AccumulativeShadows
  temporal                 // 時間（フレーム）をかけて影を累積させる
  frames={35}             // 何フレームで累積を完了するか
  alphaTest={0.85}
  scale={5}
  position={[0, -0.49, 0]}
  color="#EFBD4E"
>
  {/* ここにライトを指定 */}
</AccumulativeShadows>

• temporal を true にすると、レンダリング開始後しばらく影が徐々に濃く・滑らかになっていきます（蓄積型）。
• frames は何フレームかけて累積計算を終えるかの指定。累積が完了すると性能負荷が下がり、静止画のように非常に綺麗な影が得られます。

2.2 RandomizedLight とは

• RandomizedLight は、内部的に複数のライトをランダムに配置し、いろいろな角度 からの影を AccumulativeShadows 内で合成する手法。
• これによって「アンビエントオクルージョンのような複数方向から差し込む柔らかい影」をつくることができます。

<AccumulativeShadows ...>
  <RandomizedLight
    amount={4}          // ライトの数
    radius={9}          // ライトが散らばる半径
    intensity={0.55}
    ambient={0.25}
    position={[5, 5, -10]}
  />
  <RandomizedLight
    amount={4}
    radius={5}
    intensity={0.25}
    ambient={0.55}
    position={[-5, 5, -9]}
  />
</AccumulativeShadows>

• amount：何本の光源をランダムに配置するか（増やすほどソフトかつリッチになるが計算量が上がる）
• radius：光源がばらける範囲
• intensity, ambient：それぞれのライトの強度や環境光成分

2.3 組み合わせのメリット

• 超ソフトな影
  AccumulativeShadows + RandomizedLight の組み合わせで、様々な角度から影を重ね合わせるため、非常に柔らかい陰影が得られます。
• 静的オブジェクト向け
  基本的に何フレームかけて影を蓄積するため、「動くオブジェクトがあるシーン」だと、影がすぐにリアルタイムで追従しない（残像のような影が溜まってしまう）という問題があります。ただし軽微な動きなら対応可能な設定もできます。
• パフォーマンス
  初期累積が終われば、動きのない部分の影は大きく負荷がかからず、高品質と高速描画のバランスが良いです。

3. ContactShadows vs. AccumulativeShadows

両者は似たように「地面の上に柔らかい影を落とす」機能を持ちますが、主に以下の違いがあります。

1. ライトを意識するか

   • ContactShadows は「ライト不要」でオブジェクトとの接地形状を元に地面に影を描画。ほぼ 2D 的なアプローチ。
   • AccumulativeShadows は「実際のライトを元に影を投影」するので、光源配置を調整でき、より現実的な光の当たり方が再現できる。

2. 投影範囲

   • ContactShadows は主に接触面を中心とした影で、地面の“すぐ下”に限定。オブジェクトが浮いたりすると影が伸びるわけではなく、あくまで 2D 的にぼかした接地影。
   • AccumulativeShadows はオブジェクト全体の形状を使い、光源からの投影を計算する。高さや角度に応じて影がしっかり伸びる。

3. 動的対応

   • ContactShadows はオブジェクトが動いても「接地部分」だけがスクリーン上で計算されるため、比較的軽量かつ動的に対応しやすい。
   • AccumulativeShadows（+ RandomizedLight）はフレームをかけて影を蓄積する仕組みなので、オブジェクトが激しく動くと影が追いつかず、意図しない残像やノイズが出る可能性がある。

4. 見た目のリアリティ

   • 単に床へ落ちる接地影だけなら ContactShadows がシンプルで高速。
   • 床だけでなく、もう少し本格的なライティング効果やアンビエントオクルージョン風の演出がほしいなら AccumulativeShadows + RandomizedLight が強力。

4. 使い分けのポイント

• 静的なシーン（オブジェクトやライトがほぼ動かない）
  • AccumulativeShadows + RandomizedLight … リッチでソフトな影を実現。フレーム経過後は高品質。
• 軽量＆単純な床影だけ使いたい
  • ContactShadows … 設定が簡単でパフォーマンスも良好。
• 完全なリアルタイムかつすべてのオブジェクトに影が落ちる必要がある
  • 従来の castShadow + receiveShadow + (SoftShadows or standard shadowMap) … いわゆる通常の three.js シャドウ。
• 動くオブジェクトだけリアルタイムに影を落としたいが、背景の大部分は静的
  • 静止部分に AccumulativeShadows かベイクした影を使い、動くオブジェクトには本来のリアルタイムシャドウか ContactShadows を組み合わせる。

5. まとめ

1. リアルタイムシャドウ
   • <Canvas shadows> + ライトに castShadow + オブジェクトに castShadow/receiveShadow
   • 汎用的だが、調整やパフォーマンス面で苦労することも。
2. ContactShadows
   • 設定がとても簡単。地面への接地影だけを軽量に表現したいときに最適。
   • 光源に依存しないので簡易的かつ高速。
3. AccumulativeShadows + RandomizedLight
   • フレームをかけてソフトシャドウを累積し、多方向から当たる柔らかい影を再現する手法。
   • 静的なシーンや、動きが少ない状況に向いており、非常に美しい影が得られる。
4. ベイク (Baking)
   • モデリングツール（Blender など）で影をテクスチャとして事前に焼き付ける方法。軽くて見た目が良いが、動的シーンには不向き。

どれか一つが万能というわけではなく、シーンの動的要素の有無・表現したい影の柔らかさ・パフォーマンス要件などを踏まえて選択すると良いでしょう。シンプルに床だけ影を落としたいなら ContactShadows、オブジェクトが静的でフォトリアリスティックな雰囲気を出したいなら AccumulativeShadows + RandomizedLight、といった使い分けが典型例です。

以上が AccumulativeShadows & RandomizedLight と ContactShadows の違いや使い分けの目安です。

アニメーション

React で Three.js を使った 3D アニメーションを実装するとき、選択肢として GSAP, Framer Motion, React Spring などのライブラリがあります。それぞれに長所・短所や使い勝手の違いがあるため、本記事では React Three Fiber (以下 R3F) を前提にした概要とサンプルコードを交えて解説します。

1. GSAP

概要

• JS アニメーションライブラリの老舗 で、アニメーション制御に強力な API とタイムライン機能がある
• Three.js / React Three Fiber 向けに最適化されているわけではなく、DOM や任意の JS オブジェクトのプロパティを「数値やカラー値」として操作する
• タイムライン (gsap.timeline()) で複数のアニメーションを順序付けたり、シーケンス制御が得意

メリット

• 豊富な機能・柔軟性: 連続的なアニメーション、トリガー、タイムライン、イージングなどが強力
• Web業界の定番 でリファレンス・サンプルが多い
• スクロール連動 や ScrollTrigger 等を組み合わせれば、スクロールアニメもやりやすい

デメリット

• R3F のオブジェクト (mesh.position, mesh.rotation など) を直接補間できない場合、プロパティをラップ して自分で数値を同期する必要がある
• DOM アニメーションと一緒に使うのは簡単だが、Three.js の THREE.Color のような独自クラスを扱うには注意点が必要

サンプルコード

import { useRef, useEffect } from "react"
import { useFrame } from "@react-three/fiber"
import { gsap } from "gsap"
import * as THREE from "three"

export default function GsapExample() {
  const boxRef = useRef()
  const timelineRef = useRef(null)

  // “背景色” などをアニメーションしたい時に用いるラッパー (例)
  const colorState = useRef({ color: "#ff0000" })

  useEffect(() => {
    // タイムライン作成
    timelineRef.current = gsap.timeline({ paused: true })
      .to(colorState.current, {
        duration: 1,
        color: "#00ff00", // 1秒かけて緑へ
      })
      .to(colorState.current, {
        duration: 1,
        color: "#0000ff", // さらに青へ
      })
  }, [])

  useFrame(() => {
    // timeline の進捗を 0~1 で制御する例:
    // timelineRef.current.progress(someScrollOffset)
    
    // colorState.current.color が "#112233" の形式で変化している → Three.Color に反映
    if (boxRef.current) {
      boxRef.current.material.color.set(colorState.current.color)
    }
  })

  return (
    <mesh ref={boxRef}>
      <boxGeometry />
      <meshStandardMaterial />
    </mesh>
  )
}