UPDATE：2016.8.16
- CATEGORY
- ホームページのこと
Webサイトへの3DCG表示について
先日WebサイトにCGを用いた機能を付け加えられないだろうかと色々なサイトを見て回っていたところ、WebGLという3DCGを表示させられる機能があること、またそれを簡単に使えるJQuery的存在のthree.jsとういライブラリがあることを知りました。3DCGに用いるソフトはフリーソフトのBlenderです。
three.jsのライブラリの中にあるプラグインを使うことで、Blenderの3DデータをJSON形式で出力し、それをthree.jsを用いてブラウザ上に表示させるのが一連の流れのようです。
さっそく試してみました。
上手く行きません。。。
が、試行錯誤を重ねるうちにBlenderでの3Dデータに不備があることに気づきました。
そこを改善させることで、ブラウザ上に上手く表示させることができました。
それさえクリアしてしまえば、あとはthree.jsのマニュアルサイトを参考にコードをいじるだけ。
マウスでの画面操作はもちろん、カメラ設定、光源設定、テクスチャ設定、アニメーションなど盛り込むこともできるので、色々な可能性が見えそうです。
今後のWeb開発に活かせそうです。
