Three.jsをはじめよう。これからの3D制作とまとめ【第8回】

2026.05.19

全8回にわたってお届けしてきた「Three.jsをはじめよう」の連載も、ついに今回が最終回です。
真っ暗な画面に立方体を出した第1回から、キラキラと輝く星を操った前回まで。

「3Dって、意外とやることが多くて大変だな」と感じたかもしれません。確かに、素のJavaScript（Vanilla JS）で書くThree.jsは、命令を一つひとつ積み上げていく記述が必要で、コードが長くなりがちです。

しかし、安心してください。この苦労を劇的に解消し、よりスマートに3Dを構築するツールが使われています。それが、今回ご紹介する「React Three Fiber (R3F)」です。

1. React Three Fiberとは？
- 1.1. 「命令」から「宣言」へ
2. 驚きの進化：コードを比較してみよう
- 2.1. これまでの書き方
- 2.2. React Three Fiberでの書き方
3. なぜ「基礎」を学んできたのか？
- 3.1. ツールが変わっても、概念は変わらない
4. 全8回のロードマップ：振り返り
5. 3D表現がビジネスにもたらす未来
- 5.1. Three.jsのアニメーションを効果的に使ったサイト
6. おわりに

React Three Fiberとは？

現在、WEB制作では、UIをパーツ（コンポーネント）単位で作る「React」というライブラリが広く普及しています。このReactの仕組みを使って、Three.jsをまるでHTMLを書くように扱えるようにしたのが、React Three Fiber（R3F）です。

「命令」から「宣言」へ

これまでは「Sceneを作って、Cameraを作って、それをRendererに渡して……」と順を追って命令していました。R3Fでは、「ここにMeshがあって、中身はBoxです」と宣言するだけで、複雑な初期設定を裏側で自動的に処理してくれます。

驚きの進化：コードを比較してみよう

第1回で作った「回転する立方体」を、R3Fで書くとどうなるでしょうか？

これまでの書き方

function animate() {
  // 次の描画タイミングでこの関数(animate)をまた呼ぶ（無限ループ）
  requestAnimationFrame(animate);

  // 物体を少し回転させる
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.005;

  // 描画を実行
  renderer.render(scene, camera);
}

// アニメーション開始
animate();

React Three Fiberでの書き方

import { useRef } from "react"
import { useFrame } from "@react-three/fiber"

function RotatingCube() {
  const meshRef = useRef()// useRef で mesh への参照を取得（Three.js の mesh 変数に相当）

  useFrame((state, delta) => {// useFrame = R3F が管理する rAF ループの中で毎フレーム呼ばれるフック
    meshRef.current.rotation.x += 0.01
    meshRef.current.rotation.y += 0.005
  })

  return (
    <mesh ref={meshRef}>
      <boxGeometry />
      <meshStandardMaterial color="orange" />
    </mesh>
  )
}

どうでしょうか？HTMLのタグを書くような感覚で3Dが記述できることに、驚かれたかもしれません。複雑なリサイズ処理やレンダリングループも、<Canvas>タグが裏側ですべて面倒を見てくれます。

useFrame / requestAnimationFrame

rotation.x += delta * 0.6 rotation.y += delta * 0.3

なぜ「基礎」を学んできたのか？

「最初からR3Fを使えばよかったのでは？」と思うかもしれません。しかし、それは大きな間違いです。

ツールが変わっても、概念は変わらない

R3Fで使う <mesh> も <perspectiveCamera> も、結局はThree.jsの Mesh クラスや PerspectiveCamera クラスを呼び出しているに過ぎません。

Scene, Camera, Rendererの関係性
GeometryとMaterialの組み合わせ
ライティングとシャドウの仕組み
Raycasterによる判定

これらを知らなければ、R3Fを使っても「なぜか影が出ない」「モデルが表示されない」といったトラブルに対処することはできません。私たちはこの8回で、ツールの流行り廃りに左右されない、3D開発の土台を手に入れたのです。

全8回のロードマップ：振り返り

ここで、私たちが一緒に歩んできた道のりを振り返ってみましょう。

	テーマ	得られたスキル
第1回	セットアップ	3大要素（Scene/Camera/Renderer）の理解
第2回	操作とリサイズ	OrbitControlsとレスポンシブ対応
第3回	質感	MaterialとTextureによる表現力の向上
第4回	光と影	ライトの種類とShadowの実装
第5回	モデル読み込み	GLTF/GLBによる本格アセットの活用
第6回	判定	Raycasterによるインタラクション
第7回	演出	パーティクルによる空間の空気感作り
第8回	次のステップ	モダンな開発手法への橋渡し

3D表現がビジネスにもたらす未来

WEBサイトは今、「読むもの」から「体験するもの」へと急速に姿を変えています。VRやAR（仮想/拡張現実）といった技術が一般的になる中で、ブラウザ上で3Dを自在に操れるスキルは、企業の価値を正しく伝えるための最良の手段となります。

高級ブランドのバーチャルショールーム、精密機器の動作シミュレーター、あるいは触れるだけでワクワクするポートフォリオサイト。私たちが学んだ技術の先には、そんな素晴らしい可能性が広がっています。

Three.jsのアニメーションを効果的に使ったサイト

MeMeMe Official Website

「髪も気分も弾む」キャッチコピーをサイト全体で表現したヘアケア製品サイト。
Three.jsを用いた奥行きのある3D空間でのナビゲーションが特徴です。マウス操作に追従するカメラワークや空間に浮遊するオブジェクトが、製品の軽やかさと独自の世界観を直感的に伝えており、探索するような没入感を生んでいます。

KAI Design – 貝印

貝印のデザインプロモーションサイト。各製品のデザインをアニメーションで表現しています。
Three.jsにより、カミソリや包丁の精巧な3Dモデルをリアルタイムに描写。金属の質感やエッジの鋭さが緻密に再現されており、スクロールに連動した滑らかな視点変更が、貝印の技術力と造形美を感じさせます。

おわりに

「Three.jsをはじめよう」全8回の連載にお付き合いいただき、本当にありがとうございました！
最初は「難しそう」と思っていた3Dの世界が、少しでも身近で楽しいものに感じていただけたなら、なによりです。

最後に架空のオーダーメイドディフューザーの紹介サイトをThree.jsで制作してみました。

また次のプロジェクトでお会いしましょう！