1
0
hugo/content/blog/2023-10-23-vrm.md
2024-04-23 22:21:26 +09:00

74 lines
1.7 KiB
Markdown

+++
date = "2023-10-23"
tags = ["vrm","3d"]
title = "vrm viewerを調整してみた"
slug = "vrm"
+++
- https://vrm.syui.ai
基本的には、default-modelを読み込む設定とか、アニメーションの動きとかを調整してみました。
```ts:src/main.ts
// https://github.com/JLChnToZ/vrm-dance-viewer
let model_url = "";
import axios, {isCancel, AxiosError} from 'axios';
function model_load(){
axios.get(model_url, {
responseType: "blob"
})
.then(response => {
loadingPromises.push(loadModel(response.data));
hasLoadModel = true;
triggerLoading();
const blob = new Blob([response.data], {
type: response.data.type
});
})
}
if (model_url !== null) {
model_load();
}
if (loadingPromises.length) triggerLoading();
```
例えば、`updateHead`で頭の動きが調整されています。ここで読み込まれているのは、頭とポーズと目の動きです。
```ts:src/worker/vrm-idle-helper.ts
export function updateModel(model: VRM, deltaTime: number) {
if (!lookAts.has(model)) return;
updateHead(model, deltaTime);
updateEyeBlink(model, deltaTime);
updateIdlePose(model, deltaTime);
}
function updateHead(model: VRM, deltaTime: number) {
// ...
}
```
色はこれです。
```ts:src/worker/scene/renderer.ts
import { WebGLRenderer } from 'three';
import * as THREE from 'three';
export let renderer: WebGLRenderer | undefined;
export function init(canvas: HTMLCanvasElement | OffscreenCanvas) {
if (!renderer) renderer = new WebGLRenderer({
antialias: true,
canvas,
});
renderer.outputEncoding = THREE.sRGBEncoding;
return renderer;
}
```
https://github.com/pixiv/three-vrm/blob/dev/docs/migration-guide-1.0.md