Three.jsでポートフォリオを作ってます

どうも1610です。

ポートフォリオサイトを作った話です↓

demo

ぼくはWeb上のサイトやWebアプリの構築が趣味で、将来は副業、もとい転職を希望しています。

もともとはHTML / CSSやphp、Vue.jsなどを中心に、知り合いの英語教室のWebアプリなんかをひとり地味〜に作ったりしていたのですが、最近の興味はより華やかな（？）グラフィック方面に向かいつつあります。

Three.jsでWebサイトに３Dを取り込もう

なかでもハマっているのがThree.jsです。

Web上で３Dを扱うには、WebGLというWeb上でグラフィック表現を行うための標準仕様に対する高度な知識が必要です。

Three.jsはWebGLをなるべくカンタンに取り扱えるようにするためのjavascriptライブラリです。

学び始めて数ヶ月のぼくでも作れたっちゃ作れた

Three.js、あまりに楽しすぎたので、ここ最近はこればっかり触っていました。

チュートリアルを見ながら（凝った表現のはやっぱり英語文献が多いです）色々と遊んでいたのですが、作り貯めるばかりではもったいないので、ぼくもThree.jsを用いたポートフォリオサイトみたいなのを作りました。

ただしレスポンシブ未対応なのでMac / PC推奨です。

最初に出てくるホーム画面の左側矢印からデモを見ることができます。
デモの切り替えは同じく左側のメニューボタンから。

demo

作ったデモは次の４つ（本当はまだ３つあるんですが）。

Particle Image

Interactive Objects

The Glitch

The Sky and The Sea

まだまだ改善点ありまくり

作っては見たものの、正直なところまだまだ未熟だなー、という感じです。

あんまりスマートじゃないUIは置いておいて、特にイケテナイのが「重い」こと。

ぼくのMac上ではきちんと動作するのですが、どういうわけかiPadではGlitchなどのほぼ標準ライブラリのみを使ったデモでさえカクカクです。

Three.js、本当はもっと軽いライブラリなんです！

ぼくの知識がまだまだですね。

メモリの解放がうまくいっておらず、おそらくはVue.js側との相性的なもので発生している問題もあるかと思います。

この辺りは要改善ですね。

時間のあるときに、各デモの解説等を投稿したいと思います！

では。