hugo/content/blog/2023-10-23-vrm.md

+++ date = "2023-10-23" tags = ["vrm","3d"] title = "vrm viewerを調整してみた" slug = "vrm" +++

• https://vrm.syui.ai

基本的には、default-modelを読み込む設定とか、アニメーションの動きとかを調整してみました。

// 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で頭の動きが調整されています。ここで読み込まれているのは、頭とポーズと目の動きです。

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) {
// ...
}

色はこれです。

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