+++
date = "2023-10-22"
tags = ["vrm","3d"]
title = "vroidで3d modelを作ってみた"
slug = "vrm"
+++

アイの3d-modelを[vroid](https://vroid.com/)で作ってみました。

<video controls style="width:100%;"><source src="/ai/video/ai_vrm_0001.mp4"></video>

## 経緯

まずは`blender`で作ろうと思い、原神のnahidaを公式から[download](https://www.bilibili.com/blackboard/activity-TVh3Jjh9W1.html)して、動かせるところまでやりました。

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

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

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

これはlibがあると踏んで探してみると[@pixiv/three-vrm](https://github.com/pixiv/three-vrm)がありました。

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

### web viewer

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

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

```ts:src/main.ts
// 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`が複雑でよくわからないのと、色がおかしい問題があります。

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

```ts:src/worker/model-manager.ts
const gltfLoader = new GLTFLoader().register(
  parser => new VRMCoreLoaderPlugin(parser, { autoUpdateHumanBones: true }),
);
```

## ref

- https://github.com/JLChnToZ/vrm-dance-viewer

- https://moka-rin.moe/

- https://hackmd.io/@miruo/rkBmlrfDo