HTML5のCanvasで3Dの球体を描く方法を徹底解説

HTML5 Canvasで3D球体を描く基本の考え方

HTML5ではCanvas要素とJavaScriptを組み合わせることで、ブラウザ上に3Dの球体を描画できます。基本的なアプローチは、3D空間上の点（頂点）を三角関数で計算し、それらを順に描画していくというものです。

以下は、指定した半径をもとに球体を構成する点群を生成する関数の例です。

function display(r) {
    this.point = new Array();
    this.color = "blue";
    this.r = (typeof(r) == "undefined") ? 20.0 : r;
    this.r = (typeof(r) != "number") ? 20.0 : r;
    this.vertexes = 0;

    for(alpha = 0; alpha <= 6.28; alpha += 0.17) {
        p = this.point[this.vertexes] = new Point3D();
        p.x = Math.cos(alpha) * this.r;
        p.y = 0;
        p.z = Math.sin(alpha) * this.r;
        this.vertexes++;
    }
}

コードの仕組み

この関数の処理の流れは次のとおりです。

• 半径の初期化：引数rが未定義または数値以外の場合は、デフォルト値の20.0を使用します。
• 頂点の生成：角度alphaを0から約6.28（＝2π、円一周分）まで0.17ずつ増やしながらループします。
• 座標の計算：Math.cos(alpha)とMath.sin(alpha)に半径を掛け合わせて、X座標とZ座標を求めます。
• 格納：各点をPoint3Dオブジェクトとして配列this.pointに保存し、頂点数をカウントしていきます。

より本格的な球体を描くには

このコードではY座標が常に0のため、実際には水平面上の「リング（円）」を描いている状態です。完全な立体としての球体を表現するには、さらなる工夫が必要です。

• 2つの角度を使う：水平方向の角度（経度）に加えて垂直方向の角度（緯度）も用意し、二重ループで球面全体の頂点を生成します。
• 射影変換：3D座標を2D画面に表示するため、透視投影の計算を行います。
• ライブラリの活用：Three.jsなどの3Dライブラリを使えば、複雑な数学処理を意識せずに高品質な3Dグラフィックスを手軽に実装できます。

まずはシンプルなコードで仕組みを理解し、段階的に機能を拡張していくのがおすすめです。