Three.js-Camera

3Dグラフィックスに入門したがなかなか身につかないのでスクラップ書きながらアウトプットするようにする

PerspectiveCameraの基礎パラメータがイジれるサンプル作った。
source

デフォルト

fovでズームっぽいことができる。これは引き。

nearが大きくなるにつれて手前が見えなくなる。手前の球が消えてる。

farが小さくなるにつれて億から見えなくなってくる。奥の球が消えてる。

別件だけど
例えばこのへんとか、<perspectiveCamera>使ってると直接props入れても反映されないが
react-three-fiber使う場合Dreiのコンポーネントを使ったほうがあんまrefとか気にしなくていいっぽいな、ちゃんとコードは読んでいない。

Drei.PerspectiveCamera軽く読んだ。
forwardRef使うとめんどくさくなる問題があって、これ使うとrefのtypeを判定処理が必要になる。
using ref.current in React.forwardRef

Drei.PerspectiveCameraではpropsは<perspectiveCamera>継承しつつ、localなref作ってmergeしているのか。
もしDreiに実装されているelementがあったらそっち使ったほうが楽。

fovをいじると世界がゆがむことを確認したので、やはりfovだけで調整っていうのは無いな。
vectorのlerpで線上の移動ができるみたいなので、どこまで移動するかをうまく計算してやれるとシンプルかもしれない。

スクリーン座標をオブジェクトのそばに表示するサンプル作った。
DOMをcanvasの上に表示するのめっちゃハマったが、結果DreiのHtmlってのがあってめっちゃ便利だったのでやっぱりまずはDreiから探すこと。
右下のはGizmoHelperってやつ。軸の方向がわかって便利。