3D数式曲面学習Webアプリ
球面リサージュ曲面 / 内トロコイド曲面 Webアプリ
球面リサージュ曲面と内トロコイド曲面を、ブラウザ上でリアルタイムに生成・3D可視化・STL出力できる学習用Webアプリです。 スライダーで係数や分割数を調整しながら、数式パラメータが曲面形状へどう反映されるかを確認できます。
球面リサージュ曲面
A、B、C、Dなどの係数を変えながら、球面上に広がるリサージュ系の曲面形状を確認できます。
内トロコイド曲面
θ方向とφ方向に内トロコイドの考え方を組み合わせ、閉じた曲面や周期的な形状を確認できます。
STL出力
表示中の曲面をASCII STLとして出力できます。形状検証や3Dデータ化の学習にも使いやすい構成です。
主な仕様
| 曲面タイプ | 球面リサージュ曲面、内トロコイド曲面 |
|---|---|
| 表示 | Three.jsによる3D表示、OrbitControls操作、Axis / Grid / Wire / Transparent切替 |
| 出力 | ASCII STLダウンロード |
| 構成 | Vanilla JS、ES Modules、importmap、Three.js CDN |
| 公開 | Vercel静的サイト、GitHubリポジトリ公開 |
実装・UIの技術記事
開発メモ
このアプリは、npmやビルドツールを使わず、importmapでThree.jsをCDNから読み込む静的Webアプリとして構成しています。 計算処理、3Dビューア、STL出力、パラメータUIを分け、学習用ツールとして拡張しやすい形にしています。