React Three Fiberで作成したComponentをStorybookで管理する

1. 初めに

以前よりThree.jsが好きで遊んでいたものの、作成したcomponentを忘備録的にカタログ管理したいと思い、Storybookと組み合わせてみました。

半日くらいで簡単なBoilerplateを作成致しましたので (雑なのはご容赦いただきたい)Githubで公開してみました

2. 関連技術

• React Three Fiber
• Storybook
• React

3. 遊び方

> yarn install
> yarn storybook

上記にて、Storybookが起動します。

4. イメージ

Hello World的な雑なCGで恐縮ですが、このようにコンテンツ毎にカタログ管理可能です。

5. Tips

Storybook上で表示したいcomponentを呼び出す関数をDefault Exportします。
その際に、*.stories.*という命名規則のファイルを作成すると自動的にStorybookに反映されます。

例: Boxというcomponent名の場合 (以下、疑似コード)

export default {
    title: '(treeに反映したい階層及び名前)',
    components: Box,
    ...
} as ComponentMeta<typeof Box> = () => (
    <>
        ...
        <Box/>
    </>
);
export const (tree上のnode名) = Template.bind({});

の様に指定したファイルをindex.stories.tsxの様な名前で作成する事で上図の様に反映されます。

6. 総括

• formatterに関しかなり雑に作成してしまったので、きちんとEslintを組み合わせて設定したい
• もう少し、まともな3D mockをsampleにすれば良かった・・(汗)
• 3D Objectだけでなく、Effectなど含めて管理できるよう、拡張性のある設計にしていきたい

以上