React と VRM

npx create-next-app@latest . --ts --eslint
yarn add three @react-three/fiber @react-three/drei @pixiv/three-vrm
yarn add -D @types/three

import { Canvas, useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

const SampleModel = () => {
  const gltf = useLoader(GLTFLoader, "/vrms/model.vrm");
  return <primitive object={gltf.scene} />;
};

export default function DemoPage() {
  return (
    <div className="h-screen">
      <Canvas>
        <SampleModel />
      </Canvas>
    </div>
  );
}

specification/
├── 0.0
├── VRMC_materials_hdr_emissiveMultiplier-1.0
├── VRMC_materials_mtoon-1.0
├── VRMC_node_constraint-1.0
├── VRMC_springBone-1.0
├── VRMC_vrm-1.0
└── VRMC_vrm_animation-1.0

{
  "extensionsUsed": [
    "VRMC_vrm"
  ],
  "extensions": {
    "VRMC_vrm": {
      // VRM extension
      "specVersion": "1.0",
      "humanoid": {},
      "meta": {},
      "firstPerson": {},
      "expression": {},
      "lookAt": {},
    },
    "VRMC_springBone": {},
    "VRMC_node_constraint": {}
  },
  // glTF-2.0
  "materials": [
    "extensions": {
      "VMRC_materials_mtoon": {}
    }
  ],
}

extensions.VRMC_vrm.humanoid = {
  "humanBones": {
    "hips": {
      "node": 1 // index of glTF.Node
    },
    "spine": {
      "node": 2
    },
    // 省略
  }
}

import { VRM, VRMLoaderPlugin } from "@pixiv/three-vrm";
import { useFrame } from "@react-three/fiber";
import { useEffect, useState } from "react";
import { Object3D } from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

type AgentProps = {};

type BonesState = {
  neck: Object3D | undefined | null;
};

const loader = new GLTFLoader();
loader.register((parser) => new VRMLoaderPlugin(parser));

function Agent(props: AgentProps) {
  // const { scene, camera } = useThree();

  const [bonesState, setBones] = useState<BonesState>();
  const [vrmState, setVrm] = useState<VRM>();

  useEffect(() => {
    loader.load("VRM1_Constraint_Twist_Sample.vrm", (gltf) => {
      const vrm = gltf.userData.vrm as VRM;
      setVrm(vrm);

      const bones = {
        neck: vrm.humanoid.getNormalizedBoneNode("neck"),
      };
      setBones(bones);
    });
  }, []);

  useFrame(({ clock }, delta) => {
    if (vrmState) vrmState.update(delta);

    const t = clock.getElapsedTime();
    if (bonesState?.neck) {
      bonesState.neck.rotation.x = (Math.PI / 4) * Math.sin(t * Math.PI);
    }
  });

  return vrmState && <primitive object={vrmState.scene} />;
}

export default Agent;