82 lines
2.3 KiB
Markdown
82 lines
2.3 KiB
Markdown
|
+++
|
||
|
|
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
|
||
|
|
|