フロントエンドとコーヒー

フロントエンドとか日々のこととか

Three.jsでスケッチするのを日課にして15日が経った。

最近、WebGLを本腰入れてやりたくなったので、毎日CodePenでスケッチ書いてはシェアするというのを日課にしててみた。 とりあえず15日間つづけたので。いくつかピックアップして成果をまとめようと思います。

日々の成果まとめ

1日目

ただ立方体を回転させるだけの簡単なコード。

See the Pen WebGL Day1 Three.js Introduction by Yusuke Omi (@Im0-3) on CodePen.

5日目

カメラが動かないことに飽きてきたので、グリグリ動かしてみた。

See the Pen WebGL Day5 Three.js Change Camera Angle by Yusuke Omi (@Im0-3) on CodePen.

8日目

立方体をいろんな感じに動かしてみた結果。

See the Pen WebGL Day8 Three.js Ferris wheel by Yusuke Omi (@Im0-3) on CodePen.

11日目

金属っぽい質感をめざして、そこからちょっと変えてみた。

See the Pen WebGL Day11 Three.js Fog by Yusuke Omi (@Im0-3) on CodePen.

15日目

パーリンノイズを乗せていろいろやってみたら、スライムっぽくなった。

See the Pen WebGL Day15 Three.js Slime by Yusuke Omi (@Im0-3) on CodePen.

毎日書いてみて思ったこと

最初の方はとにかく、使い方を覚えるため、リファレンスみながら一つづつ使い方を覚えようとやってました。 でもだんだん飽きてきて、後半の方はなんとなくやりたいことを決めて、コードを書いてはリファレンスみるという形ですすめてます。

3Dって聞くとポリゴンっぽい感じのイメージになるけど、15日目のスケッチはちょっと違った質感のものができて面白かった。
あと色味とか質感とか気を配ってグリグリすると、Likeしてくれるのでそれはそれで結構モチベーションになってます。

ライティングあんまりいじってないし、テクスチャまだつかってないし、行列の計算もよくわかってないので継続して頑張ります。

とりあえず、こちらからは以上です