HOME > スタッフブログ > Three.jsでドラえもんを作ってみた。

スタッフブログ

Three.jsでドラえもんを作ってみた。

開発部門の上井です。

開発部門では現在、新たな人材を募集しています。

面接に来て下さった方がこのブログを見ました。と言ってらっしゃって改めてこのブログもちゃんと世間の方に見られているんだと実感しました。と同時にふざけたブログは書けないなぁと思いました。

僕がこの会社の面接に来たのは一昨年の事でした。当時僕もこのブログを見ていました。特に印象に残っているのは同じ開発部門の佐々木さんの記事でした。

CSS3でアンパンマン♪

CSSでアンパンマンを見事に描かれていて、当時はそれを真似して自分もドラえもんを描いたりしていました。かなり下手くそなドラえもんでしたが…

 

さて、ようやく本題です。

今日はそんな当時に描いたドラえもんから自分がどれだけ成長できたかを比べてみようと思います!

まずは、CSSで描いたドラえもんです。コードが残っていなかったのであの頃のドラえもんを再現しました。

See the Pen CSS DORA by uei (@uei) on CodePen.

 
 おお、自分で言うのもなんですがなかなか完成度高くないですかコレ。ドラえもんの表情がイイ!

当時はもっと下手でしたが、少しムキなりすぎました。(コードは凄く雑。)

当時の再現の時点でここまで来たらもうこれ以上手の施しがないよなぁ。

でもこのままじゃ成長した自分アピールができない…
 

そうだ、ここまで来たらもう3Dで描いてみるかー。

と何の知識もないままに挑戦してみました。

HTML5にはcanvasという図を描くために策定された仕様があります。

更にそのcanvasを使って使用できる、three.jsというjavascriptライブラリを使用することで平面上に3Dを描くことができるのです!

そんな最新の技術を使ってできた懇親の力作がコチラ!

 

See the Pen Canvas DORA by ueeeei (@uei) on CodePen.

 
oh…

回ってます…

なんとも禍々しいドラえもんが出来上がりました…

こんなはずじゃなかったのに..

まぁ、初めてにしては上出来か、と自分を慰めることにしました。

 

canvasには3D描画だけでなく、様々な素晴らしい機能を持ち合わせています。

弊社の印刷系サイトに使われているレイアウト調整システムもcanvasを使用されています!

ぜひご利用ください。

  

ドラえもんはまた来年にでも挑戦しようと思います。以上です。