Three.jsでglTFを読み込んでアニメーション再生するまで

はじめに

Three.jsでglTF形式の3Dモデルを読み込んでアニメーションさせる方法を紹介します。
Blenderでボーンを仕込んでGLBファイルを作成し、Three.jsでそれを表示・再生していきます。
開発方法の選定

Three.jsを使う方法は大きく分けて以下の3つあります。
1,Node.js で npm install three
2,CDN方式（jsDelivrやunpkgなど）**で依存関係を手動管理
3,ESM (esm.sh) を使ってモジュールとしてimport（推奨）

今回は3の esm.sh を使います。依存関係のエラーも少なく、シンプルに始められます。
特にgltfに関してはmoduleタイプしか対応していないようなので、、、

ただskymateだと依存関係でのエラーが出たのでesmを使うことにしました
node　もしくは　esmで開発するのが楽だと思います
esmのほうがプロジェクト自体は圧迫しません　ケースバイケースで

Three.jsでglTFを読み込む基本コード

import * as THREE from 'https://esm.sh/three@0.152.0';
import { GLTFLoader } from 'https://esm.sh/three@0.152.0/examples/jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 10, 80);

const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new GLTFLoader();
loader.load('path_to_your_model.glb', (gltf) => {
  const model = gltf.scene;
  model.rotation.y = Math.PI;
  scene.add(model);
});

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

これでgltf自体は呼び出せました

次はモデルにアクションを入れてみます
glft->glbにします
記事下記のモデルを使いました

すでにアニメーションが入ったモデルなら記事下部まで飛んで結構です
blenderはまた詳しくやりたいと思います　（まだまだ初心者ですが）
Blenderでボーンとアニメーションを作成する手順

Blenderでモデルを開く
Armature（ボーン）を追加
ミラー表示のため、画面右の蝶々マーク（X軸ミラー）をON
Shift + E で対称にボーンを伸ばす
モデルとボーンを結合
モデル→ボーンの順に選択し、Ctrl + P → 自動ウェイト
Weight Paintモードで重みを調整
Poseモードで動きを作り、Actionにキーフレームを登録
アニメーションをベイクして保存
.glbでエクスポート

Three.jsでアニメーション再生するコード

import * as THREE from 'https://esm.sh/three@0.152.0';
import { GLTFLoader } from 'https://esm.sh/three@0.152.0/examples/jsm/loaders/GLTFLoader.js';

let scene, camera, renderer, model, mixer, clock;

function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
  camera.position.set(0, 70, 85);
  camera.lookAt(0, -25, 0);

  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x000000, 0);
  document.body.appendChild(renderer.domElement);

  clock = new THREE.Clock();

  const loader = new GLTFLoader();
  loader.load('rozen/rozen_shink2.glb', (gltf) => {　//ここのパスを変える
    model = gltf.scene;
    model.rotation.y += (-Math.PI / 2);
    scene.add(model);
    
    if (gltf.animations && gltf.animations.length > 0) {
      mixer = new THREE.AnimationMixer(model);
      const action = mixer.clipAction(gltf.animations[0]);
      action.play();
    }
  });

  animate();
}

function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta();
  if (mixer) mixer.update(delta);
  renderer.render(scene, camera);
}

init();

使用したモデルとライセンス

このモデルは以下のライセンスの元、使用しています：

This work is based on "Rozen Maiden - Shinku"
https://sketchfab.com/3d-models/rozen-maiden-shinku-d73e367d8f0645bbab207143392efd8a
by victorberdugo1 licensed under CC-BY-4.0

動作はこちらから見れますー＞index:気ままに動かしてそのままです
planeで飛行機、rozenでモデルが動きます
近々見た目を直したいです

This work is based on "Rozen Maiden - Shinku"
(https://sketchfab.com/3d-models/rozen-maiden-shinku-d73e367d8f0645bbab207143392efd8a)
by victorberdugo1, licensed under CC-BY-4.0