【タイトル】

URLをコピーしました！

【導入コメント1】

【導入コメント2】

TypeScript x React Three Fiberのレッスンや作品は、今後もどんどん作成していきます！
YouTubeで告知致しますので、ぜひYouTubeのチャンネル登録をして通知をお待ちください！

📺 YouTubeを見る:こちらのリンクから視聴できます。

YouTube

Hack Lab. 256 作成した動画を友だち、家族、世界中の人たちと共有

TypeScript x React Three Fiber

React Three Fiberで何ができるのか知りたい方は、下記を参考にしてみてください！
簡単にできる作品を用意しております！

React Three Fiberを利用した作品はこちら

デモ：【説明】

【でも説明1】

【でも説明2】

【デモ説明3】

技術要素の紹介：このプロジェクトで使うツールとライブラリ

【技術要素の紹介説明1】

【技術要素の紹介説明2】

VSCode：【説明】
Node.js：【説明】
Vite：【説明】
React：【説明】
Three.js：【説明】
React Three Fiber：【説明】
React Three Drei：【説明】

【ブログのみ要素】

実装説明：AxesHelperで3D空間の基準軸を可視化しよう

2Dとは違い3D空間には、x,y,zの3つの軸があるというのが重要なポイントになります。

x：右方向
y：上方向
z：前方向（自分に向かう方向）

3Dオブジェクトを配置・移動・回転させる際、座標の基準が分からなくなることはよくあります。
そのようなときに便利なのが AxesHelper です。

【タイトル1】

AxesHelper は、3Dシーン内の座標軸を視覚的に表示するヘルパーオブジェクト です。
3D空間における X軸（赤）, Y軸（緑）, Z軸（青） を色分けして描画し、オブジェクトの向きを直感的に把握できます。

「オブジェクトの向きを確認したいとき」や「回転させる方法を把握したいとき」などに役に立ちます！

【タイトル2】

React Three Fiber では、axesHelper コンポーネントを Canvas 内に直接配置するだけで簡単に使用できます。
meshの中にaxesHelper コンポーネントを入れることもできて、その場合はmeshの向きなどがわかるようになります。

import { OrbitControls } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";

// === メインアプリコンポーネント ===
const App = () => {
  return (
    <>
      <Canvas>
        <ambientLight intensity={1} />
        <directionalLight position={[10, 10, 10]} intensity={0.5} />
        <OrbitControls />
        {/* ヘルパー */}
        <axesHelper />
      </Canvas>
    </>
  );
};

export default App;

このコードを実行すると、以下のように ワールド座標の基準軸 が表示されます：

X軸（赤） → 水平方向（左右）
Y軸（緑） → 垂直方向（上下）
Z軸（青） → 奥行き方向（前後）

🎯 React Three Fiberでの利用方法!!

x軸で移動させる

例えば、下記のようにpositionを設定すると、オブジェクトが横並びになります。
「X軸 (赤) → 左 (-) / 右 (+)」なので、左に赤、右に緑が表示されていると思います。

import { OrbitControls } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";

// === メインアプリコンポーネント ===
const App = () => {
  return (
    <>
      <Canvas>
        <ambientLight intensity={1} />
        <directionalLight position={[10, 10, 10]} intensity={0.5} />
        {/* ヘルパー */}
        <axesHelper />
        <OrbitControls />

        <mesh position={[0, 0, 0]}>
          <boxGeometry />
          <meshStandardMaterial color="blue" />
        </mesh>

        <mesh position={[-3, 0, 0]}>
          <boxGeometry />
          <meshStandardMaterial color="red" />
        </mesh>

        <mesh position={[3, 0, 0]}>
          <boxGeometry />
          <meshStandardMaterial color="green" />
        </mesh>
      </Canvas>
    </>
  );
};

export default App;