2023-10-23 /
@syui
vrm
, 3d
vrm viewerを調整してみた
基本的には、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