THREE.jsで3D入門してみた

先月Mr.doobに会えたので、せっかくだからTHREE.js使ってなんか作りたくなりました。ただ、3Dはほぼ未経験なのであんまりアグレッシブなものを作ろうとしても挫折必至。何か簡単かつ楽しそうなものないかな・・・と考えてて以前見たこれを思い出しました。

これなら基本平面だし、(ちゃんとやると大変なのかもしれないけど)単にドラッグした部分のZ値を増減するだけなら簡単そう。

ということでやってみたのがこれです。

http://photo-anvil.appspot.com/

マウスドラッグして写真の上に色を塗ると

(画像だとわかりにくいけど)色を塗った部分が浮き出します。

EDITモードでLOW-HIGHを一番HIGHにするとわりと変化が分かりやすいです。なかなか楽しいと思うので、お暇な方はぜひ。

3D童貞の自分にもこのくらいなら簡単に実装させてくれるTHREE.js、かなりおすすめ!