three.js やってみるに、せっかくなので react-three-fiber にしてみよう。 ということで、 tsx でサンプルを記述してみた。
動かないなーと試行錯誤したところ、
Partial Hydration - minista
minista(ミニスタ)はReactのJSXから綺麗なHTMLを作る日本製のスタティックサイトジェネレーターです。
https://minista.qranoko.jp/docs/partial-hydration
だった。 これが hydration か。なるほどー。
しかし、build すると
そろそろ minista
そのものを読む頃合いかもしれぬ。
storybook
さらに、 storybook
入れてみる。
すでに vite + react
にはなっているので下記のコマンドでいけた。
空のfolder だと stories
ができるのだけど src/stories
ができた。
なるほど。
basepath の設定。
react-three-fiber が storybook で動いた。
ousttrue.github.io
https://ousttrue.github.io/storybook/?path=/story/hello-react-three-fiber—default-hello
mdx で r3f はうまくいかなかった
mdx に partial-hydration するのができるのかどうかよくわからなかったので、 深入りせず。 とりあえず storybook で。
Next.js にしようとしたが、やっぱ止めた
わいは、 vite
が好きなので turbopack
推しなのが、またの機会にとなった。
storybook を読む
https://github.com/pmndrs/drei/tree/master/.storybook https://github.com/daisyui/react-daisyui/tree/main/.storybook
を読んで学ぶ。