2023-10-22 / @syui

vrm , 3d

vroidで3d modelを作ってみた

アイの3d-modelをvroidで作ってみました。

経緯

まずはblenderで作ろうと思い、原神のnahidaを公式からdownloadして、動かせるところまでやりました。

とはいえ、これはアイの3d-modelを作成する上で参考になりました。特に等身ですが。

次に、vroidで3d-model(.vrm)を作成するわけですが、輪っかは髪の毛から作りました。

vroid-hubというものがあり、覗いてみると、あまりに自然にwebで動いているのでびっくりしました。

これはlibがあると踏んで探してみると@pixiv/three-vrmがありました。

ただ、モーション(.vmd)はpixivから公開されていないようでした。最初に選択できるモーションは公開されてるとうれしかった。

web viewer

$ git clone https://github.com/JLChnToZ/vrm-dance-viewer
$ yarn install
$ yarn dev

最初からモデルを読み込むにはこんな感じを末尾に追記。

// https://github.com/JLChnToZ/vrm-dance-viewer
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { scene } from './worker/scene/scene';
let url = "./ai.vrm";
let loader = new GLTFLoader();

window.onload = function(){
			loader.load(
				url,
				(gltf) => {
					const vrm = gltf.userData.vrm;
					scene.add(gltf.scene)
					console.log(vrm);
				},
				(xhr) => {
					console.log( `${( xhr.loaded / xhr.total * 100 )}% loaded` );
				},
				(error) => {
					console.log(error)
				}

			)
}

if (loadingPromises.length) triggerLoading();

ただ、アニメである./worker/anime-manager.tsが複雑でよくわからないのと、色がおかしい問題があります。

ボーン非表示は以下のように変更します。

const gltfLoader = new GLTFLoader().register(
  parser => new VRMCoreLoaderPlugin(parser, { autoUpdateHumanBones: true }),
);

ref