2.3 KiB
2.3 KiB
+++ date = "2023-10-22" tags = ["vrm","3d"] title = "vroidで3d modelを作ってみた" slug = "vrm" +++
アイの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 }),
);