74 lines
1.7 KiB
Markdown
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
|
|
|
|
|