three.jsやWebGLで作られたかっこいいWebサイトを私も作れるようになりたい！！！
という思いから、一度諦めたthree.jsの学習を最近また始めてみた。
そこでまず躓いたのが、三角関数の存在。。。
three.jsを学ぶにあたって、どうやら高校数学で習ったsin関数、cos関数の理解は重要らしい。
ガチガチの文系で数学が大の苦手だった私だが、
仕方ないので復習(というか0から学び直し)してみることにした。
①そもそもなぜsinθ関数,cosθ関数についての理解が必要なのか？
物体を回転させたいから。sinθ,cosθは回転を得意とする関数であるから。
②sinθ,cosθってなんだっけ？
(sinθ,cosθ)で回転座標を表すことができる。回転座標とは、円上の座標のこと。
θとは360度までの数字が入る変数である。
例えばθが45度だった場合、円周上の回転座標は(sin45°,cos45°)で表すことができる。
③角度はラジアン単位に直す必要がある。
(sin45°,cos45°)というような書き方はできないので、ラジアン単位に直す必要がある。
ラジアンとは、「π」を使ったθの表し方であり、
180°=π、360°=2π、90°=π/2と表す必要がある。
例えば(sin45°,cos45°)は、ラジアン単位で表すと(sinπ/4,cosπ/4)と表すことができる。
④なんで180°=πになるの？どこで誰が決めたの？？
これには公式があるので深く考えずに覚えておくべき。
例えばθ°が90°だった場合、90°×π /180でラジアン単位はπ/2になる。
誰が決めたのかは分からなかったけど多分昔のえらい人が決めた。
⑤実際のコードの書き方
例えばカメラをXとZ平面で回転させる方法は以下。
//カメラを回転させる
//フレームごとに角度をプラスさせる
let rot = 0;
rot += 0.5;
//ラジアンに変換(公式を使用)
let radian = rot * (Math.PI / 180);
//sin関数に変換
camera.position.x = Math.sin(radian) * 500;
//cos関数に変換
camera.position.z = Math.cos(radian) * 500;
//カメラに地球を向かせる
camera.lookAt(ballMesh.position);フレームごとに角度を0.5度ずつプラスして、
それを公式に当てはめラジアンに変換する。
今回はX方向とZ方向の平面上に回転させたいので、
X,Zそれぞれの座標にsin関数、cos関数を代入。
この時そのままだと近すぎて見えないので×500している。
最後にカメラをlookAt関数で物体の方を向けさせるといった手順。
実際の結果はこんな感じ。
See the Pen
カメラを360度回転させる by minomino (@minomino_)
on CodePen.
ここまでやってようやくふんわり理解できた気がする。
今回おさらいしたのは三角関数の超基礎的な部分だったが、
three.jsを書く以上さらに深い理解が必要だと思うので、今後も学習していきます！
今回参考にした動画教材はこちら