+++
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