基本情報

今回はthree-vrmのv0からV1.0への変更点を確認します。

下準備

まずは確認用のthree.jsの環境を作成します。

今回はViteを使用しました。

code:shell

nodenv local 16.16.0

npm init vite@latest

...

✔ Select a framework: › Vanilla

✔ Select a variant: › TypeScript

Vanilla/TypeScriptを選択しました。

次にthree-vrmの環境設定をします

code:shell

npm install three @pixiv/three-vrm

viteで生成される関係のないコードは消して必要なものだけ残します。

code:style.css

body {

margin: 0px;

}

canvas {

display: block;

}

three.jsのシーンを表示するコードです。

code:main.ts

import "./style.css";

import * as THREE from "three";

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setPixelRatio(window.devicePixelRatio);

document.body.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(

30.0,

window.innerWidth / window.innerHeight,

0.1,

20.0

);

camera.position.set(0.0, 1.0, 5.0);

const scene = new THREE.Scene();

const light = new THREE.DirectionalLight(0xffffff);

light.position.set(1.0, 1.0, 1.0).normalize();

scene.add(light);

const update = () => {

requestAnimationFrame(update);

renderer.render(scene, camera);

};

update();

この段階ではまだ真っ黒なキャンバスが表示されるだけです。

VRMの読み込みと表示

VRM読み込んで表示します。

まずは、ガイドを参考にVRMをロードする最小限のコードを追加します。

code:ts

let currentVrm: VRM | undefined = undefined;

const loader = new GLTFLoader();

loader.register((parser) => {

return new VRMLoaderPlugin(parser);

});

const load = (url: string) => {

loader.load(

url,

(gltf) => {

const vrm = gltf.userData.vrm;

currentVrm = vrm;

scene.add(vrm.scene);

}

);

};

load("./vrmfile.vrm");

この段階で実行するとアバターが背を向けて表示されている場合があります。

具体的にはVRM0とVRM1でアバターの向きが逆になります

VRM0を読み込んだ時

https://gyazo.com/fdcedfd3d658c37082aeac657be537f2

VRM1を読み込んだ時

https://gyazo.com/be77674350e37efa02a11722969bd562

これはVRMの仕様がVRM1で変更されたためです。

VRM0ではz-方向がモデルの前方でしたが、VRM1ではz+が前方になります。

渡したVRMがVRM0だった場合Y軸で180 度回転してくれます。

code:ts

const load = (url: string) => {

loader.load(

url,

(gltf) => {

const vrm = gltf.userData.vrm;

currentVrm = vrm;

scene.add(vrm.scene);

VRMUtils.rotateVRM0(vrm); // 追加

}

);

};

vrm1とvrm0が同じ向きで読み込まれるようになりました。

色味の修正

https://gyazo.com/d70747cf932f148120accedc3251c2e7

three-vrm v0を使ったことがある人はアバターの色味が違うことに気がつくと思います。

code:ts

// basic

const renderer = new THREE.WebGLRenderer();

renderer.outputEncoding = THREE.sRGBEncoding; // 追加

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setPixelRatio(window.devicePixelRatio);

document.body.appendChild(renderer.domElement);

これでちゃんと表示できるようになりました！

次はボーンの正規化廃止の対応をしようと思います。

参考