ブラウザだけで動く3Dモデラーを作った｜ミニカー道路に噛み合う部品もSTLで出せる

https://splatoon-tool.topiblo.com/modeler/

インストールも登録もいりません。開いたらすぐ、直方体と円柱を並べて、3Dプリンタに送れるSTLファイルが作れます。

外部のライブラリはひとつも使っていません。3Dの表示も立体の足し引きも全部自前で、読み込むファイルは合わせて数十キロバイト。スマホで開いても待たされません。作った形がどこかのサーバへ送られることもありません。全部ブラウザの中で終わります。

なぜ作ったか

ミニカーの道路につなぐ部品を3Dプリンタで作っています。駐車場、連絡坂、アダプタ。そのたびにBlenderを立ち上げてスクリプトを書いていました。

やりたいことは、たいてい「板に穴を4つあける」「筒の中を抜く」くらいのことです。それだけのためにBlenderを起動して、Pythonを書いて、Booleanの順番を思い出して……というのが、どうにも重い。

かといって、ブラウザで動く既存のCADは、無料の範囲だとログインが要ったり、作ったデータが向こうに保存されたりします。子どもと一緒に「こういう形にしようか」とその場で触るには、それも億劫でした。

開いたらすぐ触れて、閉じたら何も残らない。それが欲しかったので作りました。

かんたんモード：3ステップ

1. 部品を足す。 直方体・円柱・円すい・球。数値はぜんぶミリメートル。
2. 位置と大きさを決める。 数字を入れるだけ。「床に置く」で造形台にぴったり乗ります。
3. 組み合わせる。 2つ以上選んで「くっつける」か「引く」。

コツはひとつだけです。穴をあけたいときは、穴の形をした円柱を重ねて「引く」。これさえ分かれば、ネジ穴つきのプレートも、フタなしの箱も、スペーサーも作れます。

お手本を4つ入れてあります。押すと部品が並んだ状態で読み込まれて、「この状態で引くを押してください」と出るので、1回やれば感覚がつかめると思います。

PROモード：実物と噛み合わせる部品を作る

画面の右上でモードを切り替えられます。箱と円柱の足し引きだけでは届かないところを、PROモードで埋めました。

• 断面を押し出す — 断面の形を座標で書いて、まっすぐ押し出します。L字でもコの字でも。
• スイープ — 断面を螺旋や直線のパスに沿わせます。破線の間隔も指定できます。
• 規格ジョイント — 後述。
• 並べる・写す — 等間隔・円形の複製とミラー。支柱8本が1回で置けます。
• 出力前の検査 — 印刷できる形かを数値で確かめます。

上の坂は、真横から見た断面を横へ押し出しただけです。走行面もガードレールもその断面に含まれているので、押し出し1回で両方できます。中央の破線は「長さ12mm・隙間8mm」と入れただけ。

こちらは半径45mm・勾配22°で120mm昇る螺旋。断面にガードレールまで書いてあるので、1回のスイープで路面と手すりが同時にできます。Blenderで書いていた頃と同じ式（z = 高さ × s / パス長）をそのまま入れられるようにしてあります。

ミニカー道路の実測寸法が「そのまま」入っている

市販のミニカー用道路パーツ（2022年以降のもの）と噛み合う台形の「あり継ぎ」は、実物を採寸した値がツールの中に入っています。ボタンひとつでオスとメスが置けます。

台形は「根元が短辺・先端が長辺」です。逆にすると単なるくさびになって、抜け止めになりません。何度か間違えて印刷し直しました。

メス型には、確実に抜くための逃げが最初から入っています。入口を2mm外へ延ばし、下へも延ばして床を貫通させています。これをやらないと、穴の底に厚さ0.4mmくらいの極薄い膜が残ります。目では絶対に分かりません。刺そうとして初めて気づきます。

一番てこずったところ：STLは「見た目が正しくても壊れている」

ここからは作った側の話です。

3Dプリンタ用のSTLは、三角形をひたすら並べただけの形式です。「面がぴったり閉じているか」はファイル自体は保証してくれません。スライサーはたいてい黙って直してくれるので、壊れていても気づかないまま印刷できます。

で、素朴に作ると壊れます。しかも体積を計算すると正しい値が出るのに壊れているという、一番たちの悪い壊れ方をします。

順に3つ踏みました。

① 面が細切れになって手に負えなくなる

板に穴を1つあけると、その穴の側面48枚ぶんの「無限に広がる平面」が、板の上面を端から端まで切ってしまいます。穴を増やすたびに面が数倍。穴25個で面が8万枚・計算に36秒かかりました。

同じ平面に乗った隣どうしを貼り直す処理を入れて、4千枚・4秒まで戻りました。

② 辺の途中に、隣の面の頂点が乗っている（T字接合）

隙間はないので体積は正しく出ます。でも厳密には辺の対応が取れていない状態です。同じ直線に乗る辺をまとめて、辺の内側に入る点を打ち込んで解消しました。

③ 三角形に割るところで、辺がまるごと落ちる

これが一番見つけにくかった。

②で辺の途中に点を打つと、板の側面は「40×3mmの長方形の辺に、点が48個ぶら下がった面」になります。これを素直に扇形に割ると、要が長辺の上に来たときに、反対側に並んだ点を1本の長い辺で飛び越してしまう。

多角形の段階では健全なのに、書き出したSTLだけ325本の辺が壊れていました。割る順番を「隣に一直線の点がある角から」に変えて直りました。

だから「出力前の検査」を付けた

上の3つは、どれも見た目では分かりません。だから機械的に調べる機能を付けました。

• 面がひと繋がりの塊か（離れた破片が残っていないか）
• 閉じていない辺が無いか
• 指定した点が中実か、空洞か

最後のがいちばん役に立ちます。「オスの位置は中実、メス穴の位置は空洞」を印刷前に確かめられる。穴の底に膜が残っていれば、そこを指定すれば一発で分かります。

念のため、ランダムな立体400組・1200回の演算で検証しました。体積の恒等式（A∪B と A∩B の体積の和は、A と B の体積の和に等しい）は全件で厳密に一致。面が完全に閉じたのは400組中399組でした。残り1組は、回した球と円柱がほとんど接するだけで交わった場合に、幅2.7マイクロメートルの薄片が残ったものです。ノズルの直径の100分の1以下なので、印刷結果には表れません。

苦手なこともあります

細かく分割された曲面に、細い標示を埋めて「くっつける」のは苦手です。螺旋の路面に幅3mmの破線を合体させると、切り口が面の継ぎ目とほとんど重なる場所が大量にできて、閉じていない辺が残ります（路面の分割数180で111本、60で6本）。

対処は「くっつけない」。STLは複数の塊を1つのファイルに入れられるので、そのまま印刷できますし、標示だけ別色で刷りたいときはむしろ分かれているほうが好都合です。検査機能がこの状態をちゃんと報告するので、気づかず出すことはありません。

文字とフィレット（角の丸め）はまだありません。路面の「止まれ」は作れません。

使ってみてください

https://splatoon-tool.topiblo.com/modeler/

まずは「かんたん」のまま、お手本の「ネジ穴つきプレート」を押して「引く」を押してみてください。それだけで、3Dプリンタに送れるファイルがひとつできます。