Codexで3Dアニメーションを作る方法
約2,700個の光の点から文鳥の立体を作り、羽ばたき、自動回転、軌道光を加えたモーション作品です。画像を回しているのではなく、すべての点を毎フレーム3D座標から描き直しています。
立体は小さな点の集合で作る
胴体は縦長の楕円体、頭は球、翼は薄く広がる面、くちばしは円すいとして点を配置します。すべての点はX・Y・Z座標と色、大きさ、所属パーツを持ちます。立体モデル用ファイルを読み込まなくても、単純な形を組み合わせればキャラクターの輪郭を作れます。
点群モデル
球や楕円体の表面へ点をばらまき、文鳥の各パーツを作ります。
パーツ変形
翼だけ肩を基準に回転させ、体とは別の動きを与えます。
遠近投影
回転後のZ座標から、画面位置と点の大きさを計算します。
動きの作り方
全体の回転と、体の一部の動きを分けます。自動回転では全点に同じ回転を適用し、羽ばたきでは左右の翼だけを肩の位置へ戻してから回転させます。最後に全体をカメラ方向へ回し、遠い点から順番に描画すると奥行きが自然になります。
1. パーツ固有の動き（翼の羽ばたき）
2. モデル全体のX・Y回転
3. カメラからの距離を計算
4. 3D座標を2D画面へ遠近投影
5. 遠い点から近い点の順番で描画最初にCodexへ渡すプロンプト
HTML/CSS/JavaScriptとCanvasで、文鳥の3D点群アニメーションを作って。
外部3Dライブラリと3Dモデルは使わない。
胴体は楕円体、頭は球、くちばしは円すい、翼は薄い面として点を生成する。
各点にX・Y・Z座標、色、大きさ、所属パーツを持たせる。
モデル全体を自動回転させ、左右の翼だけ羽ばたかせる。
マウスドラッグとタッチ操作で視点を回転できるようにする。
背景に星、立体の周囲に光の軌道を描く。
PCとスマホの両方で美しく表示して。演出を引き上げる追加プロンプト
3Dアニメーションをもっと幻想的にして。
点の色を奥行きと面の向きで変え、手前の点を少し明るくする。
一部の点を線でつなぎ、星座のような構造を薄く見せる。
文鳥の周囲を金色と水色の光が立体軌道で周回するようにする。
ボタンを押すと中心から光粒子が広がる演出を追加する。
点の描画数は端末性能を考慮し、devicePixelRatioに上限を設ける。
動きを止めても立体として美しく見える構図に調整して。軽く動かすための工夫
3D計算より、点ごとの発光や影の描画が重くなりやすい部分です。すべての点へ強いぼかしを入れず、大きな点、目、くちばしなど見せたい場所だけ発光させます。画面解像度も端末のピクセル比をそのまま使わず、上限を設けるとスマホで安定します。
同じ仕組みで、ロゴ、商品、文字、別のキャラクターも点群化できます。形を作る関数と、動かすパーツの基準点を分けておくと、見た目を変更してもアニメーション処理を再利用できます。
