Joinery - 家具写真をDIY図面に変換は何をしますか？

一品、一ページ、一つのパッケージ。訪問者は組み立てられた作品を見て、スライダーをドラッグすると分解され、組み立て手順をステップごとに追い、部品をクリックすると材料サイズが表示されます。部品を動かすのと同じモデルが、カットリスト、図面、マニュアルを生成するため、画面上の情報と紙の情報が食い違うことはありません。

SKILL_DIR はこのファイルが存在するフォルダです。ビルドとパッケージは実行するフォルダの ./joinery-out に出力されます。

初回実行

cd "$SKILL_DIR" && npm install

Node 20.10+ が必要です。レビュー用スチルとマニュアル画像には Chromium が必要です: npx playwright install chromium、または CHROMIUM 環境変数で任意の Chrome/Chromium バイナリを指定してください（例：CHROMIUM=/usr/bin/google-chrome）。

パイプライン

写真 + アンカー ━━► spec.json ━━► model.js ━━► 検証 ━━► ページ ━━► スチル ━━► パッケージ

ステップ	コマンド	得られるもの
1. 解釈	あなたが写真を読み取る	`spec.json`: タイプ、アンカー、素材、名前付きの全パーツ、選択された接合方法、記録されたすべての前提条件
2. モデリング	あなたが `model.js` を記述	パラメータの関数として表現された作品: ボックス、接合部、ステップ
3. 検証 + パッケージ	`node "$SKILL_DIR/pack.mjs" ./my-piece`	衝突や浮遊があるとパッケージ化を拒否; カットリスト、図面、板材・合板の切断図、材料、工具、仕上げ、マニュアル（Chromium があれば `manual.pdf` も）を生成
4. ページビルド	`node "$SKILL_DIR/build.mjs" ./my-piece`	`joinery-out/dist/my-piece.html`、オフライン、約570 KB
5. レビュー	`node "$SKILL_DIR/capture.mjs" my-piece --stills steps`	すべてのビューとステップのコンタクトシート — 確認、修正、繰り返し
6. 再パッケージ	`node "$SKILL_DIR/pack.mjs" ./my-piece`	マニュアルとPDFにステップ画像が反映される

まず、対象作品に最も近いサンプルをコピーしてください。各サンプルには必要なファイルがすべて揃っています: spec.json、model.js、main.js。作品は通常、SKILL_DIR ではなくユーザー自身のフォルダに配置します。コピー後、model.js と main.js 内の2つの ../../kit/ インポートを、絶対パス $SKILL_DIR/kit/ に変更してください。

サンプル	コピーすべき家具のタイプ	説明
`parsons-table`	シンプルなテーブル、机、ベンチ	最小構成: 脚、幕板、天板、ホゾ継ぎ、ボタン。64行
`walnut-racetrack-table`	丸型、楕円型、テーパー付き部品	`roundedRect` / `circle` プロファイル、テーパー付き丸脚、脚内部で交差しない短いホゾ
`walnut-display-cabinet`	曲線やガラスを含むケース家具	曲げ積層コーナー（`quarterRing`、`stock.layers`）、クランプ蝶番付きガラス扉、棚ピン、裏板の受け堀、巾木
`walnut-entry-unit`	造り付け家具、ワードローブ、キッチンタイプユニット	複数の箱体、框扉、レール付き引き出し、フローティング棚、塗装MDFと突板の併用、LED及びフック金具
`walnut-hallway-unit`	スチールと木材の混在作品	溶接スチールフレームに木箱を収めた構造、籾扉、電気パネルを避けたオープンニッチ

ステップ1: 写真を正直に読み取る

一枚の写真からはスケールも隠れた構造も得られません。このスキルは設計の解釈であり、フォトグラメトリではありません。ジオメトリを書き始める前に:

アンカーを取得する。 実寸を1～3つ尋ねます（全体の L×D×H、または「天板が180cm」のような既知の寸法1つ）。相手が一つも教えられない場合は、kit/validate.js の人間工学標準寸法（ダイニングテーブル高さ750、椅子座面高さ450）を使用し、その旨を明記します。他のすべての寸法は、写真から読み取った比率にアンカーを掛けた値です。
タイプを指定する。 dining-table、chair、bookshelf ... これにより、該当する人間工学的チェックと標準的な構造が選択されます。
見えるものと見えないものをリストアップする。 脚、天板、目に見える棚は visible。厚い天板の下の幕板、背板、貫、引き出しレール、コーナーブロックは 推測 (inferred) — パーツに inferred: true とマークすると、すべての出力でフラグが立てられます。製作者はそれらを上書きできますが、あなたの推定であることを認識しておく必要があります。
継手ライブラリから接合方法を選ぶ（templates/joinery-library.md参照）。タイプ × 素材 × 工房でキーが決まります。工房の設備が明らかでない場合は尋ねてください（shop: hand、cabinet、cnc）。これにより工具リストも決まります。デフォルトはキャビネット工房: 脚/幕板はホゾ継ぎ、棚板は溝差し、パネルはダボまたはドミノ、ポケットスクリューは隠れる場所のみ。選択理由を spec.source.assumptions に記述します。
素材と仕上げを読み取る。 樹種は色と木目から、厚さはエッジの比率から、エッジ処理（R面取り/面取り/シャープ）はハイライトから判断します。厚さは規格材の寸法（kit/validate.js の STOCK_T）に合わせる必要があります（38.7mmではなく40mmなど）。finish は光沢から設定: 開孔タイプのマットな表面は hardwax-oil（デフォルト）または oil、均一な半光沢の塗膜は lacquer。塗装部品や金属部品は素材に従います。

これらすべてを、templates/spec.schema.json を使用して spec.json に記述します。スペックは人間のためのものです: 製作者はまず source.assumptions を読みます。

ステップ2: モデルを構築する

model.js は piece = definePiece({name, type, shop, finish, params, source, materials, build}) をエクスポートします。build(P) は {parts, joints, steps, hardware} を返します。サンプルは70行、椅子は約120行です。

パーツ は、組み立てられた姿勢での軸平行直方体です: box(id, name, [sx, sy, sz], [x, y, z], {grain, material, edge, explode, inferred, note})。xは長さ、yは上方向（床が0）、zは奥行きです。grain は木材の繊維方向を示す軸で、カットリストの材料長さとレンダリングの木目模様を決定します。同じカットのパーツは同じ name を持ち、カットリストの1行にまとめられます。id は一意である必要があります。

曲線およびR付き部品 は、size/at にバウンディングボックスを保持し、profile: {axis, path, note} を追加します: ボックスを中心とした axis 方向の実際の外形（曲げコーナーには quarterRing(R, t, [su, sv])、R付きガラス、背板、レーストラック型天板には roundedRect(w, h, radii)、丸脚には circle(d)）。profile.taper: {to, end} は一端に向かってテーパーを付けます。外形に沿って押し出しレンダリングされ、外形で検証され、外形として描画されます。ボックスが素材として適切でない場合（曲げ積層など）、stock: {L, W, T, layers, layerT} を追加すると、カットリストと購入リストがそちらを使用します。2方向に曲がる部分（彫刻椅子背、複合スプラット）はまだボディタイプがありません: ユーザーに伝え、最も近い直線押し出しでモデル化し、note にその旨を記述します。

金具は、パーツに描画される購入品であって、切断するものではありません: fittings: [{kind, size, at, material, axis, dir, holes: {n, d, cc, axis}}]。at はパーツの中心からの相対位置です。取手、フック、LEDプロファイルはレンダリングされます。ビス穴は部品図に表示されます。hardware にもリストしてください。

部品ごとの色: materials マップのエントリには、base、dark、ring、streak、rough、clearcoat、env を含めることができ、他の部品に影響を与えずにキットのマテリアルを写真に合わせて調整できます。大きな平らな天板のダークオイル仕上げの木材は、rough ≈ 0.9 にしないとキーライトの光沢で灰色になって見えます。写真とレンダリングをサンプリングし、印象ではなく数値を比較してください。

継手 (Joints) は2つのパーツIDを接続します: {a, b, type}。a がホゾ/ビスを担い、b がそれを受け入れます。タイプ: mortise-tenon (tenonLen, tenonT, shoulder, mitred)、dowel (count, d, len)、dado (depth)、rebate (face, depth: bのエッジに沿った受け堀内の背板)、shelf-pin (count, d, len, inset: bのピン上の棚)、hinge (face, at: [世界y...], cup: aのカップ穴径35: +z方向を向いた扉がbに吊られる)、groove (width, depth: bのエッジまたは面に浮いたパネルまたは引き出し底板)、runner (bのサイドマウントレール上の引き出しボックス)、weld (スチール対スチール)、pocket-screw、button、figure-8、screw、glue。shelf-pin と hinge は金具が橋渡しする数mmのクリアランスを許可します。すべてのパーツは他のパーツと結合（joint）される必要があります。そうでないとバリデーションが拒否します。applyJoinery は両方のメンバーに一致する形状を書き込みます: ホゾはカットリストの材料長さを延長し、ホゾ穴は脚の図面に面と位置とともに表示され、両方ともレンダリングされます。joint はまた、バリデーションにこれら2つのボディが接触を許可されていることを伝えます。

ステップ はマニュアルです: {title, parts: [ids], note, check, view}。すべてのパーツは正確に1つのステップに出現しなければなりません。木工家が行う順序で並べてください: 最初にサブアセンブリ（エンドフレーム、引き出しボックス）、次にそれらを結合するもの、その上に載るもの。必要に応じて作品を逆さまにする工程も含めます。view はそのステップのページとマニュアルのカメラを設定します。

パラメータ。 すべては P 内の数値です。L を変更すると、幕板、ホゾ、ボタンの間隔、カットリストが連動します。これがポイントです: 同じ model.js で1600mm版も2200mm版も作成できます。

製作可能性を決定するルール

写真から始め、想像から始めない。 写真に基づいてモデルを構築し、レンダリングを並べて比較します: シルエット、脚対天板の比率、オーバーハング、幕板の影の線。「素敵なオークのテーブル」から発明された作品は凡庸になります。同じコードが、比較対象があるときにリアルな作品を忠実に再現します。
実際の規格材。 厚さは規格サイズ。幅200mmを超えるものは一枚板ではありません — pack.mjs が複数枚の板をはぎ合わせたものとして扱い、その旨を表示します。厚さ50mmを超えるものは一枚板ではありません — 積層材として扱います。木目はすべての材の長さ方向に沿って走ります。そうでない場合はバリデーションが短木目について警告します。
すべての接合は本物の接合である。 2つのパーツは、宣言されたジョイントを介してのみ体積を共有できます。脚内部で交わるホゾは mitred: true にするか短くする必要があります。バリデーションが衝突をチェックします。幅広の無垢天板は、ボタン、figure-8、または長穴で固定する必要があります — 剛接合してはならず、バリデーションが警告します。
衝突は数値で修正する。 バリデーションがパーツの貫通を報告した場合、P または build の値を変更します。カメラで隠してはいけません。
部品だけでなく、前提条件も記述する。 写真に写っていない幕板は inferred: true 及び note でマークします。マニュアルの最初の枠にはすべての前提条件をリストします。
一つの数値、一つの情報源。 カットリスト、図面、ページ上のHUD、マニュアルはすべて stockOf(part) を読み取ります。数値が間違っているように見える場合は、出力ではなくモデルを修正します。

ライブページのルール

ページは1つのオフラインHTMLファイルで、1MB未満（three.js インライン化）。多くのパーツを持つ大きな作品でも、各パーツが1つの角丸ボックスで、木材はテクスチャではなくシェーダーであるため高速です。
ライトスタジオ: 暖色キー、寒色フィル、柔らかな床影。ウッドシェーダーは grain に沿って板目模様を、端部には自動的に木口面を描画します。roughness ≥ 0.45 を維持します。薄い背景で光沢のある木材はプラスチックのように見えます。
20秒間操作がないと、ページが自動的にツアーを開始します: 分解、ステップ実行、下面X線。入力を検出すると制御を戻します。
URLパラメータでキャプチャを制御: ?step=2、?explode=1、?iso=leg-fl、?view=under&xray=1、?panel=0。これらのいずれかが設定されている場合、ページはアニメーションではなくスナップショットを表示するため、スチルは5fpsでも60fpsでも同じになります。

レビューループ

ページを見ることはできません。スチルを見ることができます。現在のビルドのシートを確認せずに、作品が完成したと報告しないでください。

node "$SKILL_DIR/capture.mjs" <name> --stills steps → joinery-out/<name>-sheet.png: 組み立て状態、分解状態、正面、下面X線、ステップごとに1タイル。
各タイルをチェックリストと照らし合わせて確認します。参照写真を front と assembled タイルの横に置きます。
特定のパーツについては --stills parts で1つずつ分離します。特定の状態については --still "step=3&view=under" を使用します。
修正、再ビルド、1に戻る。問題がなくなるまで繰り返します。
joinery-out/<name>/manual.html も同様に開き、製作者として読みます。

チェックリスト:

プロポーション。 写真と比較: 脚の太さ対長さ、天板の厚さ対長さ、オーバーハング、幕板ラインの高さ。誤差5%以内、さもなければパラメータを変更。
継手。 ホゾ穴は幕板が当たる面に現れる。ホゾは分解図とX線で見える。分解図で空中に浮くパーツがないこと（継手のないパーツは意味のある分解ベクトルを持たない）。
ステップ。 各ステップで何かが見えるようになる。カメラは追加されるパーツを示す。以前に配置されたパーツは下に見える。ステップ1は決して天板から始まらない。
図面。 すべてのホゾ穴、溝、穴は、図面上にその面と端からの距離を明示する。ホゾを含むカットリストの長さはその旨を明記する。
材料。 材料リストに200mm幅または50mm厚を超える板材がないこと。はぎ合わせと積層材はその旨を明記。すべてのパーツが切断図の板材または合板に配置されていること。
工具と仕上げ。 tools.md は製作者の工房が使用する工具をリストし、クランプ長は最大のはぎ合わせに適したものであること。塗装、突板、金属部品はそれぞれ適切な仕上げが指定されていること。
レンダリング。 端から60px以内に要素がないこと。パネルが作品を覆わないこと。淡色の木材（メープル、アッシュ）は薄い背景に対してエッジが見えること。

マテリアル

kit/stage.js → MATERIALS: white-oak, red-oak, walnut, maple, ash, beech, pine, cherry, birch-ply, mdf, steel, brass。ベース色/暗色、木目、ストリーク強度を指定して樹種を追加できます。また: walnut-mdf, walnut-bendply (突板シート), mdf-black, glass（透明、エッジで描画、パックでは板材からではなく注文サイズにカット）。definePiece 内の materials マップでカットリストに表示される名前を指定します（例："White oak, solid"）。

Joinery - 家具写真をDIY図面に変換