1
0
hugo/content/blog/2023-10-22-vrm.md

82 lines
2.3 KiB
Markdown
Raw Normal View History

2024-04-23 13:21:26 +00:00
+++
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