React Three Fiberで動く3Dアバター

// 😫 Three.jsの場合：準備が大変！
import * as THREE from 'three'

// 1. シーン、カメラ、レンダラーを作る（場所作り）
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
const renderer = new THREE.WebGLRenderer()
document.body.appendChild(renderer.domElement) // DOMに手動で追加

// 2. 箱を作る（メッシュ作成）
const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshStandardMaterial({ color: 'orange' })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh) // シーンに追加命令

// 3. 光を足す
const light = new THREE.AmbientLight()
scene.add(light) // これも追加命令

// 4. アニメーションループ（毎フレームの指示）
function animate() {
  requestAnimationFrame(animate)
  mesh.rotation.x += 0.01 // 回転命令
  mesh.rotation.y += 0.01
  renderer.render(scene, camera) // 描画命令
}
animate() // 実行！

// R3Fの場合：コンポーネントを置くだけ！
import { Canvas } from '@react-three/fiber'

export default function App() {
  return (
    // 1. Canvasを置けば、シーン・カメラ・レンダラーが自動完成
    <Canvas>
      {/* 2. 光を置く */}
      <ambientLight />
      
      {/* 3. 箱を置く（Meshの中にGeometryとMaterialを入れるだけ） */}
      <mesh rotation-x={0.01} rotation-y={0.01}>
        <boxGeometry />
        <meshStandardMaterial color="orange" />
      </mesh>
    </Canvas>
  )
}

//ベースを作る (Vite)
npm create vite@latest プロジェクト名 -- --template react

cd プロジェクト名

npm install

//R3Fの「三種の神器」をインストール
npm install three @types/three @react-three/fiber @react-three/drei

/* src/index.css */
* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* スクロールバーを出さない*/
}

<Canvas camera={{ position: [0, 0, 5], fov: 50 }}>

<Canvas dpr={[1, 2]}>

<Canvas
   shadows // 影を有効化
   gl={{ antialias: true, toneMapping: THREE.ACESFilmicToneMapping }}
>

// 1. args: 生まれる瞬間 (new する時のカッコの中身！)
const geometry = new THREE.BoxGeometry(1, 2, 3); 
// ↑ 幅1, 高さ2, 奥行3 で生まれる

// 2. props: 生まれた後の設定 (ドットで繋いで代入)
const mesh = new THREE.Mesh(geometry, material);
mesh.position.x = 5; // 右へ移動
mesh.rotation.y = 1.5; // 回転
mesh.visible = true; // 表示する

// 全部タグの中に書くけど、裏側の役割が違う！
<mesh 
  position={[5, 0, 0]} // props: 後から設定できるもの
  rotation={[0, 1.5, 0]} // props: 後から設定できるもの
>
  <boxGeometry 
    args={[1, 2, 3]} // args: new BoxGeometry(1, 2, 3) になる！
  />
</mesh>

<group position={[5, 0, 5]}> {/* ① 親：ワールド上の「配置場所」を決める */}
  
  <mesh position-y={1.5}>    {/* ② 子：地面からの「高さ（オフセット）」を調整する */}
    <boxGeometry />
    <meshStandardMaterial color="red" />
  </mesh>

</group>

//(環境光):全体をぼんやり明るくする。これがないと影の部分が真っ黒になる。
<ambientLight intensity={0.5} />

//(平行光源):太陽光のような強い光。これがないと影（Shadow）が落ちない。
<directionalLight position={[10, 10, 5]} intensity={1} />

<Canvas
      shadows // ← Canvas全体で影を有効にする
      camera={{ position: [3, 3, 6], fov: 45 }} // 適当な視点
    >
      {/* 全体をほんのり明るくする補助光 */}
      <ambientLight intensity={0.3} />

      {/* ★ ② 影を落とすライト（directionalLight の例） */}
      <directionalLight
        position={[5, 5, 5]} // 右上後ろくらいから当てる
        intensity={1.2}      // 明るさ
        castShadow           // ← このライトで影を計算する
        shadow-mapSize-width={1024}  // 影テクスチャの解像度（横）
        shadow-mapSize-height={1024} // 影テクスチャの解像度（縦）
        shadow-camera-near={1}       // 影に使うカメラの手前
        shadow-camera-far={20}       // 影に使うカメラの奥
      />

      {/* ★ ③ 影を「落とす」オブジェクト */}
      <mesh
        position={[0, 1, 0]} // 台から少し浮かせる
        castShadow           // ← このメッシュが影を落とす
      >
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="hotpink" />
      </mesh>

      {/* ★ ④ 影を「受ける」床 */}
      <mesh
        rotation-x={-Math.PI / 2} // 平面を横倒し（床にする）
        position={[0, 0, 0]}      // 原点に床
        receiveShadow             // ← ここに影が落ちる
      >
        <planeGeometry args={[10, 10]} />
        <meshStandardMaterial color="#555555" />
      </mesh>
    </Canvas>

const { scene } = useGLTF('/model.glb')
return <primitive object={scene} />

import { OrbitControls} from '@react-three/drei'

<OrbitControls />

import { Environment } from '@react-three/drei'

<Environment preset="sunset" />

//背景を Environment にする（スカイボックス的）
<Environment preset="sunset" background />

//カスタム HDRI を使う
<Environment files="/textures/studio.hdr" background />

//明るさを変える
<Environment preset="sunset" environmentIntensity={0.8} />

//Canvas に shadows は不要
<Canvas camera={{ position: [0, 2, 5] }}>
  
  {/* ① 光：これだけでリアルな環境光 */}
  <Environment preset="city" />

  {/* ② 影：これだけで足元にふんわり影が出る（設定不要！） */}
  <ContactShadows 
    opacity={0.5}   // 影の濃さ
    scale={10}      // 影の範囲
    blur={2}        // ぼかし具合
    far={10}        // どのくらいの高さまで影を計算するか
    resolution={256} // 解像度（軽くするなら下げる）
    color="#000000" // 影の色
  />

  {/* モデル（castShadowとか書かなくていい！） */}
  <Model />
  
</Canvas>

import { Html } from "@react-three/drei";

<Html position={[0, 2, 0]} center>
  <div className="tooltip">Happy Birthday!</div>
</Html>

// MyModel.jsx
import { useGLTF } from "@react-three/drei";

export function MyModel(props) {
  const gltf = useGLTF("/models/my-model.glb"); // モデルを非同期で読み込む
  return <primitive object={gltf.scene} {...props} />;
}

// モデルを事前読み込み（任意）
useGLTF.preload("/models/my-model.glb");

import { Canvas } from "@react-three/fiber";
import { Suspense } from "react";
import { Stage, OrbitControls } from "@react-three/drei";
import { MyModel } from "./MyModel";

export default function App() {
  return (
    <Canvas camera={{ position: [0, 1.5, 4], fov: 45 }}>
      {/* モデル読み込み待ち */}
      <Suspense fallback={null}>
        {/* ライト・影・環境光は Stageで */}
        <Stage
          environment="city"   // 環境マップ（"studio" "sunset" なども）
          intensity={0.7}      // 全体の明るさ
          adjustCamera         // モデルに合わせてカメラをいい感じにする
          shadows="contact"    // 足元の影（"contact" or true など）
        >
          <MyModel scale={[1, 1, 1]} position={[0, 0, 0]} />
        </Stage>
      </Suspense>

      {/* カメラ操作はモデルロードと関係ないので外に出してOK */}
      <OrbitControls makeDefault />
    </Canvas>
  );
}

<primitive object={gltf.scene} {...props} />

{/*
<MyModel position={[0,0,0]} scale={[1,1,1]} /> と呼び出したら、
その値がそのまま <primitive> に渡る。
props は
{
  "position": [0, 0, 0],
  "scale": [1, 1, 1]
}
*/}

// --transform: データを圧縮して軽量化します（Draco圧縮）。Webで表示するなら必須！
// --shadows: 「影を落とす・受ける」設定（cast/receive）を最初からコードに書いてくれます。

npx gltfjsx public/model.glb --transform --shadows

// -o（どこに出力するか）指定しない場合はコンソールに出力
npx gltfjsx ./public/pc.glb -o src/components/PcModel.jsx

import { useGLTF } from "@react-three/drei";

export function Model(props) {
  const { nodes, materials } = useGLTF("/models/pc.glb");

  return (
    <group {...props}>
      <mesh geometry={nodes.Screen.geometry} material={materials.ScreenMat} />
      <mesh geometry={nodes.Keyboard.geometry} material={materials.KeysMat} />
      <mesh geometry={nodes.Body.geometry} material={materials.BodyMat} />
    </group>
  );
}

useGLTF.preload("/models/pc.glb");

import { useRef } from 'react'

// 1. ハンドル（Ref）を作成
// 最初は空っぽなので null を入れておくのがお作法
const groupRef = useRef(null)

return (
  // 2. 3Dモデル（group）にハンドルを取り付ける
  <group ref={groupRef}>
    
    {/* ここにモデルの中身（メッシュなど）が入る 
      これで、groupRef.current を通じて
      Three.jsの実体（位置、回転、サイズなど）を
      直接いじれるようになります！
    */}
    
  </group>
)

const { actions } = useAnimations(animations, group)
// actions['Idle'].play() で再生できる！

export function Avatar({ animation }) {
  const { actions } = useAnimations(animations, group)

  // ④ propsの中身が変わるたびに、useEffectが発動して動きが切り替わる
  useEffect(() => {
    // さっきのクロスフェードのロジックがここで動く！
    actions[animation]?.reset().fadeIn(0.5).play()
    // ...
  }, [animation]) // ← ここで監視している！

  return <primitive object={scene} />
}

import React, { useEffect, useRef } from 'react'
import { useGLTF, useAnimations } from '@react-three/drei'

// 親コンポーネントから props で "Run" や "Idle" などの文字列を受け取る
export function Avatar({ animation }) {
  const group = useRef()
  // 1. モデルとアニメーションをロード（パスは自分のファイルに合わせて）
  const { scene, animations } = useGLTF('/avatar.glb')
  // 2. アニメーションを取り出す（actions辞書を作る）
  const { actions } = useAnimations(animations, group)

  // 3. アニメーション切り替えのロジック（ここが心臓部！）
  useEffect(() => {
    // 次に再生したいアクションを取得
    const nextAction = actions[animation]
    
    // 安全策：アクションが見つからなければ何もしない
    if (!nextAction) return

    // --- クロスフェード処理 ---
    
    // A. 「現在動いている他のアクション」をじわっと消す
    Object.values(actions).forEach((action) => {
      if (action !== nextAction && action.isRunning()) {
        action.fadeOut(0.5)
      }
    })

    // B. 「次のアクション」をじわっと開始
    // reset()で頭出しして、fadeInで滑らかに再生
    nextAction.reset().fadeIn(0.5).play()

    // C. クリーンアップ（コンポーネントが消える時などにフェードアウト）
    return () => {
      nextAction.fadeOut(0.5)
    }

  }, [animation, actions]) // ← propsのanimationが変わるたびに発動！

  return (
    <group ref={group} dispose={null}>
      <primitive object={scene} />
    </group>
  )
}

useFrame((state, delta) => {

})

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

export function FloatingText() {
  const groupRef = useRef()

  // 毎フレーム（1/60秒ごと）実行されるループ処理
  useFrame((state, delta) => {
    // 1. 回転（deltaを使う）
    // PCの性能差が出ないように、経過時間（delta）を掛けて一定速度にする
    groupRef.current.rotation.y += delta * 0.3

    // 2. 上下運動（elapsedTimeを使う）
    // 時間（t）経過に合わせて sin波 でゆらゆらさせる
    // state.clock.elapsedTime = アプリ起動からの総秒数
    groupRef.current.position.y = Math.sin(state.clock.elapsedTime * 0.8) * 0.2
  })

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

import { Float } from '@react-three/drei'
<Float 
  speed={2} // アニメーションの速さ 
  rotationIntensity={1} // 回転のふわふわ具合 
  floatIntensity={2} // 上下のふわふわ具合
>
   <mesh>
       <boxGeometry />
       <meshStandardMaterial color="orange" />
   </mesh>
<Float/>

import { useRef } from 'react'
import { CameraControls } from '@react-three/drei'

export default function App() {
  // 1. カメラのハンドル（Ref）を作る
  const cameraRef = useRef()

  // 2. 演出用の関数
  const zoomToFace = () => {
    // cameraRef.current?.setLookAt(
    //   カメラの位置X, Y, Z,
    //   見る対象の位置X, Y, Z,
    //   true // ← これをtrueにするとアニメーションする！(重要)
    // )
    cameraRef.current?.setLookAt(0, 1.5, 2, 0, 1.5, 0, true)
  }

  const resetCamera = () => {
    // 引いて全体を見る
    cameraRef.current?.setLookAt(0, 2, 5, 0, 1, 0, true)
  }

  return (
    <>
      <Canvas>
        {/* OrbitControlsの代わりにこれを置く！ */}
        <CameraControls ref={cameraRef} />
        
        {/* ...モデルやライト... */}
      </Canvas>

      {/* 操作ボタン */}
      <div style={{ position: 'absolute', top: '10px', left: '10px' }}>
        <button onClick={zoomToFace}>顔を見る</button>
        <button onClick={resetCamera}>全体を見る</button>
      </div>
    </>
  )
}