Daijiro Taira

工作・3Dプリントブラウザで動く

パラメトリック箱メーカー

3Dプリンターで作る“収納箱”を、ブラウザ上で寸法を決めるだけで設計できるツールです。

ツールを開く
パラメトリック箱メーカー の操作の様子
壁面パターン（六角ハニカム）→角丸→仕切り→積み重ねと、設定を足していくと3Dプレビューがその場で更新されます（実画面を自動操作して録画）。

幅・奥行・高さや壁の穴あけパターン、角の丸み、仕切りの本数を変えると箱の3Dモデルがその場で更新され、できたモデルを STL ファイルとして書き出してそのまま3Dプリントできます。箱同士を積み重ねられるように、底に“はめ込み台座”を付けることもできます。

使い方

  1. 画面の見方

    画面の見方

    左が設定パネル（寸法・壁面パターン・スタッキング・仕切り）、右が3Dプレビュー。幅・奥行・高さ・壁厚を mm でスライダー＋数値指定でき、下に内寸が自動表示されます。3Dはマウスドラッグで視点を回せ、右上の『視点リセット』で正面に戻せます。

  2. 壁面パターンと角丸を選ぶ

    壁面パターンと角丸を選ぶ

    壁面パターンを『六角（ハニカム）／水玉（丸穴）／格子（角穴）／なし』から選び、穴サイズ・桟の太さ・縁マージンで密度を調整。角丸半径（フィレット）で箱の縦エッジを丸められます。穴は壁の押し出し形状として作られるので、そのまま水密なプリントデータになります。

  3. 仕切りを入れて各セル寸法を確認

    仕切りを入れて各セル寸法を確認

    仕切りを幅方向・奥行方向に入れると箱がセルに分割され、各セルの内寸が自動表示されます。入れたい物に合うかその場で分かります。壁厚が薄い・桟が細いなど印刷しづらい設定には注意メッセージが出ます。

設定項目

幅 W ・ 奥行 D（mm）
箱を上から見たときの外形の大きさ。大きくするほど入る量は増えますが、底面積が広がり印刷時間と材料も増えます。実際に物が入る内寸は「W − 壁厚×2」「D − 壁厚×2」になります。
高さ H（mm）
箱の深さ（外形）。深いほどたくさん・背の高い物が入ります。中に入る深さ（内寸高さ）は「H − 壁厚」で、底板のぶんだけ外形より浅くなります。
壁厚 t（mm）
壁と底の厚み。厚いほど丈夫になりますが、重く・材料が増え、内寸（入る空間）はそのぶん狭くなります。薄すぎると（目安1.2mm未満）0.4mmノズルで線が3周に満たず弱くなるため警告が出ます。まず2mm前後が無難です。
角丸半径 R（mm）
箱を上から見た4隅の丸み。0で直角、大きくするほど角がカクカクせず手当たりが柔らかく・角割れしにくくなります。ただし内側の隅も丸くなるので四隅の収納は少し減ります。0より大きく壁厚未満にすると自動で壁厚まで引き上げられ、上限は幅・奥行の短い方の1/4です。
穴サイズ s（mm）
壁面パターン1つあたりの穴の大きさ（六角=向かい合う辺の距離／水玉=直径／格子=正方形の一辺）。大きいほど軽く・通気や中身の見えがよくなりますが、壁は弱くなり細かい物は穴から出やすくなります。
桟（さん）の太さ b（mm）
穴と穴のあいだに残る“骨”の幅。太いほど壁が丈夫になりますが穴が減って重くなります。細すぎると（目安1.5mm未満）折れやすくなるため警告が出ます。穴サイズsと桟bのバランスで「軽さ」と「丈夫さ」を調整します。
縁（ふち）マージン m（mm）
壁の外周（上下左右の端）から穴あけを始めない余白。大きくするほど枠がしっかりして穴が中央にまとまり、小さくするほど端ギリギリまで穴が広がります。端を丈夫にしたいときは大きめにします。
台座高さ ph（mm）※積み重ね時
「積み重ね対応」を入れたとき、底に付く“はめ込み台座”の高さ。高いほど上下の箱がしっかり噛み合って安定しますが、そのぶん箱の全高が増えます。
クリアランス c（mm）※積み重ね時
積み重ねたときのはめ合いの“遊び”（片側あたりの隙間）。小さいほどきつくハマり、小さすぎると（目安0.15mm未満）はまらない恐れがあるため警告が出ます。大きいほど緩くなりガタつきます。FDMプリンタでは0.3mm前後が目安です。
仕切り 幅方向 nx ・ 奥行方向 ny（枚）
箱の中を区切る仕切り板の枚数。nxで幅方向を、nyで奥行方向を分割し、両方入れると格子状のマス目になります。増やすほど1マスが小さく・数が多くなります。各マスの内寸は画面に自動表示され、狭すぎる場合は警告が出ます。
仕組みと使った技術

全体の流れ

  1. 幅・奥行・高さ・壁厚・角丸半径・壁面パターン・仕切り本数・スタッキング設定を、スライダー／数値入力で設定する。
  2. パラメータが変わるたびに、その寸法から底板・4枚の壁・四隅の角丸柱・仕切り板・台座の立体形状（ジオメトリ）を Three.js で組み立て直す（150ms のデバウンス付き）。
  3. 壁の穴（六角／丸／角）は、壁の平面形状に穴を空けた2Dシェイプを厚みぶん押し出して作る（CSG不使用）。部材同士は0.1mmだけ重ねて配置し、スライサーが確実に結合できるようにする。
  4. 組み立てた3DモデルをWebGLでリアルタイムに描画し、マウスドラッグで視点を回せる（OrbitControls）。仕切りの本数と内寸から各セルの内寸を自動計算して表示する。
  5. 『STL をダウンロード』を押すと、全パーツを1つに結合し、Three.js の Y-up を STL 慣例の Z-up に変換して STL ファイルとして書き出す。
  6. 処理はすべてブラウザ内で完結し、単一の index.html を Cloudflare Workers で公開している。

使った技術

素の HTML / CSS / JavaScript（ビルド不要）
UIと状態管理。スライダー／数値を変えると150msデバウンスで再生成。フレームワーク・ビルド工程なし。
Three.js (r170, CDN importmap)
箱・壁・仕切り・台座のジオメトリ生成と3Dプレビュー描画。ExtrudeGeometry で穴あき壁を押し出す。
WebGL
Three.js が使うブラウザのGPU描画API。
STLExporter / BufferGeometryUtils（Three.js addons）
全パーツを結合してバイナリSTLとして書き出す。
Cloudflare Workers
単一HTMLを静的サイトとして公開。

実装の工夫

  • 単一の index.html に Three.js を CDN の importmap で読み込んだ、ビルド不要・依存インストール不要の構成。ジオメトリ生成は純関数群としてUIから分離。
  • 壁面パターン（六角ハニカム・水玉・格子）は『穴あき2Dシェイプ（THREE.Shape + holes）を厚みぶん押し出す』方式で、CSGライブラリを使わず水密なパネルを得る。領域からはみ出す穴は置かない。
  • 角丸（フィレット）は、前後左右の壁を各端を半径ぶん短くし、四隅に1/4円環柱を足して実現。底板・台座も角丸長方形にする。0<R<壁厚 は壁厚にクランプする。
  • 仕切りは幅方向・奥行方向に等間隔で配置し、各セルの内寸をリアルタイム表示。積み重ねは底面に『はめ込み台座（クリアランス片側0.3mm既定）』を付け、半透明ゴーストで積んだ状態をプレビューする。
  • STL は全パーツを結合し、mm単位のまま Y-up→Z-up に変換して書き出す（バイナリSTL構造・寸法・縮退三角形ゼロを検証済み）。壁厚・桟の細さ・クリアランスには印刷向けの警告を出す。

用語

Three.js
ブラウザで3Dグラフィックスを描くためのJavaScriptライブラリ。箱・壁・仕切りのリアルタイム3Dプレビューに使っている。
WebGL
ブラウザがGPUを使って3D/2Dを高速に描画する仕組み。Three.js の土台。
STL
3Dプリントの定番ファイル形式。立体の表面を三角形の集まりで表す。スライサーに読み込んで印刷する。
フィレット
角を丸めること。ここでは箱を上から見たときの4隅を指定半径で丸め、当たりの柔らかい・割れにくい形にする。
ハニカム
六角形を隙間なく並べた蜂の巣状のパターン。壁を軽くしつつ強度と通気を確保できるので、収納箱の壁抜きに向く。
CSG（不使用）
立体同士の足し算・引き算で形を作る手法。このツールは穴を『穴あき2D形状の押し出し』で作るためCSGを使わず、軽量で水密なSTLになる。