山本ワールド
SVGによる簡易等角投影法の描画
等角投影法
SVGによる描画方法
SVGはXY座標で描画できますが、3Dを描画するにはXYZ座標が必要となります。
3D点P(x,y,z)を投影図上の点(sx,sy)に変換する式は以下の通りとなります。
![sx=x \cos(30)-y \cos(30)]()
![sy=x \sin(30)+y \sin(30)+z]()
投影図の例えばZX面（側面）のみの描画であればSVGで図形を変形させれば意外と簡単に描画できます。
Yの値が0で固定の場合、X軸を左回りで30度傾け、Xの倍率をcos(30)、YはSVGの座標が上から下に向かってY方向の座標が増えることから数学で使われる上に向かって増える座標にするため-1を指定しています。
例えばZX面に四角(20,0,30),(20,0,70) (50,0,70) (50,0,30)を描画する場合はグループを使えば以下のように記述できます。
Yが0でない場合は、Y=0の時の図形をYのずれ分だけ移動させれば描画できます。
translateで指定する値を以下の式で計算します。
![sx=x \cos(30)-y \cos(30)]()
![sy=x \sin(30)+y \sin(30)+z]()
上式にx=0,z=0を代入すると
![sx=-y \cos(30)]()
![sy=y \sin(30)]()
![sx=-100 \cos(30)=-86]()
![sy=100 \sin(30)=50]()
3D点P(x,y,z)を投影図上の点(sx,sy)に変換する式は以下の通りとなります。
投影図の例えばZX面（側面）のみの描画であればSVGで図形を変形させれば意外と簡単に描画できます。
Yの値が0で固定の場合、X軸を左回りで30度傾け、Xの倍率をcos(30)、YはSVGの座標が上から下に向かってY方向の座標が増えることから数学で使われる上に向かって増える座標にするため-1を指定しています。
transform="translate(0,0) skewY(-30) scale(0.866,-1)例えばZX面に四角(20,0,30),(20,0,70) (50,0,70) (50,0,30)を描画する場合はグループを使えば以下のように記述できます。
<g transform="translate(0,0) skewY(-30) scale(0.866,-1)">
<rect x="20" y="30" width="30" height="40" stroke="black" fill="none" />
<circle cx="35" cy="70" r="15" stroke="black" fill="none" />
<rect x="20" y="55" width="30" height="30" stroke="black" fill="none" />
</g>
Yが0でない場合は、Y=0の時の図形をYのずれ分だけ移動させれば描画できます。
translateで指定する値を以下の式で計算します。
上式にx=0,z=0を代入すると
transform="translate(sx,sy) skewY(-30) scale(0.866,-1)<g transform="translate(-86,-50) skewY(-30) scale(0.866,-1)">
<rect x="20" y="30" width="30" height="40" stroke="red" fill="none" />
</g>