three-vrm で VRM を表示する ! (threevrm: '1.0.0')

こんにちは、びしょうじょです

軽量な VRM のレンダラーがほしいなと思って探していたところ、three-vrm というのを発見

https://note.com/npaka/n/n477c15fedaef

明らかに神記事っぽいなな ↑ のコードは古いのかエラー吐いて泣いちゃった、(そしてわたし nodejs も TypeScript も全く触ったことないど素人) で詰まったので美貌録でござまます


とどのつまり、↑ 記事の index.ts の loader 周りを、three-vrm の README ↓ をマネして変えたら動いた (動いたのでヨシ！)

https://github.com/pixiv/three-vrm

ビフォーアフター

index.ts (ビフォー)

  // VRMの読み込み
  const loader = new GLTFLoader()
  loader.load('./alicia.vrm',
    (gltf) => {
      VRM.from(gltf).then( (vrm) => {
        // シーンへの追加
        scene.add(vrm.scene)
      })
    }
  )

index.ts (アフター)

  // VRMの読み込み
  const loader = new GLTFLoader();
  
  // Install GLTFLoader plugin
  loader.register((parser) => {
    return new VRMLoaderPlugin(parser);
  });
  
  loader.load(
    // URL of the VRM you want to load
    './alicia.vrm',
  
    // called when the resource is loaded
    (gltf) => {
      // retrieve a VRM instance from gltf
      const vrm = gltf.userData.vrm;
  
      // add the loaded vrm to the scene
      scene.add(vrm.scene);
  
      // deal with vrm features
      console.log(vrm);
    },
  
    // called while loading is progressing
    (progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
  
    // called when loading has errors
    (error) => console.error(error),
  );

index.ts (全体)

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { VRMLoaderPlugin } from '@pixiv/three-vrm';


window.addEventListener("DOMContentLoaded", () => {
  // canvasの取得
  const canvas = document.getElementById('canvas')

  const scene = new THREE.Scene();


  // カメラの生成
  const camera = new THREE.PerspectiveCamera(
    45, canvas.clientWidth/canvas.clientHeight, 0.1, 1000)
  camera.position.set(0, 1.3, -1)
  camera.rotation.set(0, Math.PI, 0)

  // レンダラーの生成
  const renderer = new THREE.WebGLRenderer()
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(canvas.clientWidth, canvas.clientHeight)
  renderer.setClearColor(0x7fbfff, 1.0)
  canvas.appendChild(renderer.domElement)

  // ライトの生成
  const light = new THREE.DirectionalLight(0xffffff)
  light.position.set(-1, 1, -1).normalize()
  scene.add(light)

  const loader = new GLTFLoader();
  
  // Install GLTFLoader plugin
  loader.register((parser) => {
    return new VRMLoaderPlugin(parser);
  });
  
  loader.load(
    // URL of the VRM you want to load
    './alicia.vrm',
  
    // called when the resource is loaded
    (gltf) => {
      // retrieve a VRM instance from gltf
      const vrm = gltf.userData.vrm;
  
      // add the loaded vrm to the scene
      scene.add(vrm.scene);
  
      // deal with vrm features
      console.log(vrm);
    },
  
    // called while loading is progressing
    (progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
  
    // called when loading has errors
    (error) => console.error(error),
  );

  // フレーム毎に呼ばれる
  const update = () => {
    requestAnimationFrame(update)
    renderer.render(scene, camera)
  }
  update()
})

なんとなくつくよみちゃんに変えて実行！ (モデルは ↓ から拝借)
https://tyc.rei-yumesaki.net/about/data/profile/

はいかわいい !

以上 !