React Three Fiber 完全ガイド - Reactで3Dグラフィックスを宣言的に構築

npm install three @react-three/fiber @react-three/drei @types/three

import { Canvas } from '@react-three/fiber';
 
function App() {
  return (
    <Canvas camera={{ position: [3, 3, 3], fov: 50 }}>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="#667eea" />
      </mesh>
    </Canvas>
  );
}

// 立方体
<boxGeometry args={[幅, 高さ, 奥行き]} />
 
// 球体
<sphereGeometry args={[半径, 水平セグメント, 垂直セグメント]} />
 
// 円錐
<coneGeometry args={[半径, 高さ, セグメント]} />
 
// 円柱
<cylinderGeometry args={[上半径, 下半径, 高さ, セグメント]} />
 
// トーラス（ドーナツ）
<torusGeometry args={[半径, チューブ半径, セグメント, チューブセグメント]} />
 
// トーラスノット
<torusKnotGeometry args={[半径, チューブ半径, チューブセグメント, 放射セグメント]} />

import { useMemo } from 'react';
import * as THREE from 'three';
 
function CustomGeometry() {
  const geometry = useMemo(() => {
    const geo = new THREE.BufferGeometry();
    const vertices = new Float32Array([
      0, 1, 0,   // 頂点1
      -1, -1, 0, // 頂点2
      1, -1, 0   // 頂点3
    ]);
    geo.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
    return geo;
  }, []);
 
  return (
    <mesh geometry={geometry}>
      <meshBasicMaterial color="red" side={THREE.DoubleSide} />
    </mesh>
  );
}

<meshStandardMaterial
  color="#667eea"
  metalness={0.5}    // 金属度 (0-1)
  roughness={0.3}    // 粗さ (0-1)
  envMapIntensity={1} // 環境マップ強度
/>

<meshPhysicalMaterial
  color="#88ccff"
  metalness={0}
  roughness={0}
  transmission={0.9}     // 透過度（ガラス）
  thickness={0.5}        // 厚さ
  clearcoat={1}          // クリアコート
  clearcoatRoughness={0} // クリアコート粗さ
/>

// 環境光 - シーン全体を均一に照らす
<ambientLight intensity={0.5} color="#ffffff" />
 
// ポイントライト - 全方向に光を放射
<pointLight position={[10, 10, 10]} intensity={1} color="#ffffff" />
 
// スポットライト - 円錐形に光を放射
<spotLight
  position={[5, 5, 5]}
  intensity={1}
  angle={0.3}      // 光の角度
  penumbra={0.5}   // ぼかし
  castShadow       // 影を落とす
/>
 
// ディレクショナルライト - 平行光線（太陽光）
<directionalLight
  position={[5, 5, 5]}
  intensity={1}
  castShadow
/>
 
// ヘミスフィアライト - 空と地面からの光
<hemisphereLight
  skyColor="#87ceeb"
  groundColor="#362312"
  intensity={0.5}
/>

<Canvas shadows>
  <directionalLight castShadow />
  <mesh castShadow receiveShadow>
    <boxGeometry />
    <meshStandardMaterial />
  </mesh>
  <mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]}>
    <planeGeometry args={[10, 10]} />
    <meshStandardMaterial />
  </mesh>
</Canvas>

import { useFrame } from '@react-three/fiber';
import { useRef } from 'react';
import * as THREE from 'three';
 
function RotatingBox() {
  const meshRef = useRef<THREE.Mesh>(null!);
 
  useFrame((state, delta) => {
    // delta: 前フレームからの経過時間（秒）
    meshRef.current.rotation.x += delta;
    meshRef.current.rotation.y += delta * 0.5;
 
    // state.clock.elapsedTime: 開始からの経過時間
    meshRef.current.position.y = Math.sin(state.clock.elapsedTime) * 0.5;
  });
 
  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}

function Particles({ count = 1000 }) {
  const meshRef = useRef<THREE.InstancedMesh>(null!);
  const dummy = useMemo(() => new THREE.Object3D(), []);
 
  useFrame((state) => {
    for (let i = 0; i < count; i++) {
      const t = state.clock.elapsedTime + i * 0.1;
      dummy.position.set(
        Math.sin(t) * 2,
        Math.cos(t * 0.5) * 2,
        Math.sin(t * 0.3) * 2
      );
      dummy.updateMatrix();
      meshRef.current.setMatrixAt(i, dummy.matrix);
    }
    meshRef.current.instanceMatrix.needsUpdate = true;
  });
 
  return (
    <instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
      <sphereGeometry args={[0.05, 16, 16]} />
      <meshStandardMaterial color="cyan" />
    </instancedMesh>
  );
}

function InteractiveBox() {
  const [hovered, setHovered] = useState(false);
  const [clicked, setClicked] = useState(false);
 
  return (
    <mesh
      onClick={() => setClicked(!clicked)}
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
      scale={clicked ? 1.5 : 1}
    >
      <boxGeometry />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  );
}

import { OrbitControls } from '@react-three/drei';
 
<Canvas>
  <OrbitControls
    enableDamping      // 慣性
    dampingFactor={0.05}
    minDistance={2}    // 最小ズーム距離
    maxDistance={20}   // 最大ズーム距離
    enablePan={false}  // パン無効
    autoRotate         // 自動回転
    autoRotateSpeed={0.5}
  />
</Canvas>

import { Environment } from '@react-three/drei';
 
<Canvas>
  <Environment
    preset="sunset"      // プリセット: city, sunset, studio, forest, etc.
    background           // 背景として表示
    backgroundBlurriness={0.3}
  />
</Canvas>

import { ContactShadows } from '@react-three/drei';
 
<ContactShadows
  position={[0, -0.5, 0]}
  opacity={0.5}
  scale={10}
  blur={1}
  far={10}
/>

import { Float } from '@react-three/drei';
 
<Float
  speed={2}              // アニメーション速度
  rotationIntensity={0.5} // 回転の強さ
  floatIntensity={0.5}   // 浮遊の強さ
>
  <mesh>
    <sphereGeometry />
    <meshStandardMaterial />
  </mesh>
</Float>

import { Text3D, Center } from '@react-three/drei';
 
<Center>
  <Text3D
    font="/fonts/helvetiker_bold.typeface.json"
    size={1}
    height={0.2}
    bevelEnabled
    bevelThickness={0.02}
    bevelSize={0.02}
  >
    Hello 3D
    <meshStandardMaterial color="#667eea" />
  </Text3D>
</Center>

// ❌ Bad: useFrame内でオブジェクト生成
useFrame(() => {
  mesh.position.set(new THREE.Vector3(x, y, z)); // 毎フレームnew
});
 
// ✅ Good: 事前に作成したオブジェクトを再利用
const tempVec = useMemo(() => new THREE.Vector3(), []);
useFrame(() => {
  tempVec.set(x, y, z);
  mesh.position.copy(tempVec);
});

// ❌ Bad: 各インスタンスが個別のジオメトリ
{items.map((item) => (
  <mesh key={item.id}>
    <boxGeometry args={[1, 1, 1]} /> {/* 毎回新規作成 */}
  </mesh>
))}
 
// ✅ Good: ジオメトリを共有
const sharedGeometry = useMemo(() => new THREE.BoxGeometry(1, 1, 1), []);
{items.map((item) => (
  <mesh key={item.id} geometry={sharedGeometry}>
    <meshStandardMaterial />
  </mesh>
))}

// 1000個のオブジェクトを1回のドローコールで描画
<instancedMesh args={[geometry, material, count]}>
  {/* setMatrixAtで各インスタンスの位置・回転・スケールを設定 */}
</instancedMesh>

import { Detailed } from '@react-three/drei';
 
<Detailed distances={[0, 50, 100]}>
  <HighDetailModel />   {/* 0〜50: 高詳細（10,000ポリゴン） */}
  <MediumDetailModel /> {/* 50〜100: 中詳細（1,000ポリゴン） */}
  <LowDetailModel />    {/* 100以上: 低詳細（100ポリゴン） */}
</Detailed>

import { Suspense } from 'react';
import { Html } from '@react-three/drei';
 
function Loader() {
  return (
    <Html center>
      <div>Loading...</div>
    </Html>
  );
}
 
<Canvas>
  <Suspense fallback={<Loader />}>
    <HeavyModel />
  </Suspense>
</Canvas>

<Canvas
  style={{ width: '100%', height: '100vh' }}
  camera={{ position: [5, 5, 5] }}
  onCreated={({ gl }) => {
    gl.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  }}
>

<Canvas>
  <color attach="background" args={['#1a1a2e']} />
  {/* ... */}
</Canvas>