requestAnimationFrameとzustand

~10/01まで

前回からだいぶ期間が空いてしまった。主にオクトパストラベラーにはまっていたことが原因。

@three/vrmでモデルを動かす

前回ハマっていた部分だが、サンプルコードをパクったら普通に動いた。

mediaPipeでvrmを動かす。

kalidokitを用いて、webカメラからの映像を基にVRMモデルを動かすことを確かめた。
動かすことまで成功したが、結構カクついた動きになったので妙案が思いついたら再挑戦する。

UdemyでFigmaの講座視聴

仕事でFigmaを編集する必要があったが動かし方がわからず、勉強することにした。
この講座がよくできており、マークアップの参考にもなる。

UdemyでReactの講座視聴

ReactでrequestAnimationFrameを動かすときにしっくりとしたコードが書けないのでこちらも勉強することに。
contextについて理解が浅かったため、結構学ぶことは多かった。 Reactの宣言的UIとrequestAnimationFrameでのglobal変数取得を上手く処理するためにzustandというライブラリを見つけた。（threejs-journeyで紹介されていたはず。）

getter関数を設定できるので、stateから取得するたびに再レンダリングされることを防ぐことができる。
他のライブラリでもできるかもしれないが、私にはそのやり方がわからなかった。

// create store
export const useHogeStore = create<Hoge>((set, get) => ({
  value: null,
  getHoge: () => get().value,
  setHoge: (value) => set({ value }),
}));

// use store
const getHoge = useHogeStore((k) => k.getHoge);
getHoge();