React Three Fiberを勉強する

[React Three Fiber]使いたいのでインプット

（トピックごとにちゃんとページ切ったほうがいい気がする、、）

• 驚くほど簡単に3Dシーンを構築！React Three Fiberを使ってみた | 株式会社LIG
  • これを読んでマウスオーバーもいい感じにやってくれるのを知った
    • 本来はRaycaster使ってマウスの座標位置をいい感じに渡してとかまあまあ複雑な仕組みが必要だけど全部やってくれる
      • Three.jsの勉強の仕方 - Qiita

        • なにが言いたいかというと、 [R3F]を使う場合でも結局は[[Three.js]]の知識が必要で、まずThree.jsの学習から始めたほうがいいです。

        • 前にこれを読んだときに本当かな？と思ったけどこれだけよしなにやってくれるなら確かにと思った
• https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

  • There is no hard dependency on a particular [[three.js]] version, it does not wrap or duplicate a single three.js class.

    • これよく考えたら、ライブラリ自体は強く依存していないけど、[[TypeScript]]の型情報はさすがに[[Three.js]]に依存しているんだよね？と思った
      • でないとmaterialとかgeometryに何があるか分からないから
      • と思ったけど[React Three Fiber]用の型ライブラリはないのか
        • materialとかgeometryがいい感じに補完効いてくれるのか気になる
• https://docs.pmnd.rs/react-three-fiber/tutorials/how-it-works
  • 絶対触る前に読まなくていいけどどういう仕組みか気になってしまった

  • React Three Fiber is a React renderer for three.js.

    • とりあえず立ち位置は[[react-dom]]や[[React Native]]と同じだと認識している

  • Additionally, Fiber will:

    • Setup a new perspective camera at [0, 0, 0] and set it as default

      • 最初example見たときに、あれ、カメラどこだ？と思った

    • Setup a render loop with automatic render to screen

    • Setup pointer events via raycasting on all meshes with onPointer props

    • Setup tone mapping

    • Automatically handle window resize

      • これも大変ありがたい
    • まじでいろんなことやってくれてる
  • https://docs.pmnd.rs/react-three-fiber/tutorials/how-it-works#the-undefined-props
    • #the-undefined-propsって書いてるけど見出しはThe attach props
    • meshのchildrenとしてgeometryとmaterialを置いてmesh作るのどうなってるんだろうと思ったけどattachっていう仕組みがあるみたい
    • とはいえpropsではなくchildrenとしてgeometryとmaterialを渡す利点がまだ分かっていない
  • https://docs.pmnd.rs/react-three-fiber/tutorials/how-it-works#props
    • そういえばVector3とか書かなくてもいい感じに変換してくれるのもすごい
• https://docs.pmnd.rs/react-three-fiber/getting-started/installation
  • [[react-dom]]でも[[React Native]]でも使えるのすごい
• https://docs.pmnd.rs/react-three-fiber/api/objects#piercing-into-nested-properties
  • この機能すごいなーと思った
• https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls#never,-ever,-setstate-in-loops!
  • フレームごとにアニメーションさせたい、みたいなときはstateじゃなくてrefを使う
• https://github.com/pmndrs/react-three-fiber/discussions/832
  • テキストを出したい場合は[drei]のTextかText3Dが良さそう
  • ただ、これを使うとtextGeometryのcenter()が使えなくて不便