ブログ上に納得のいくドラゴンを描くまでの過程を記録するシリーズです。
第1回は、Three.js というライブラリ（便利パック）を利用しての基本図形（球、円柱、円錐、平面）を組み合わせてドラゴンの形を作りました。
今回の成果
ドラッグで回転 / スクロール（ピンチ）でズーム
所感
第１回としてはまずまずのドラゴンです。今後もAIと相談しながらより納得のいくドラゴンを作ってければと思っています。このドラゴンが将来どうなっていくのか、乞うご期待ください。
やったこと
- Three.js（v0.160.0）を自分のサーバーに配置して読み込む
- 基本ジオメトリを変形・配置してドラゴンの体を構成する
- マウスドラッグとスクロールで視点を操作できるようにする
- 翼の羽ばたきと胴体の呼吸アニメーションを付ける
- ライティング（メイン光源・フィル・リム）で立体感を出す
まとめ
- Three.js の基本図形だけでもドラゴンのシルエットは作れる
- 有機的な形状に見せるには頂点レベルの加工かモデルデータが必要になる
- 自前ホスティングすればCDN依存のリスクなしで動かせる