前面九天，我們一直待在工廠的後場：畫試樣、拆食譜、瘦身、真空封裝、過海關。這些事都很重要，但整整九天沒有任何一張畫面可以給人看。今天是第一個里程碑：把 Day 09 出貨的那個包裹，第一次拆開，放進網頁的櫥窗裡。

（demo 影片之後補上。）

同一個包裹，兩種展示櫃

為了看清楚「自己動手做」到底值不值得，我準備了兩種展示櫃，放進同一顆包裹（Day 09 那台齒輪減速機）：

第一種：現成的展示櫃（<model-viewer>）。 這是 Google 開源的現成元件，用法簡單到不可思議：在網頁裡寫一行標籤，指向包裹的位置，模型就出現了，可以拖曳旋轉、可以縮放。零件都不用自己組裝，買來就能用。

第二種：自己訂製的展示櫃（我們的 viewer-core）。 這是我們自己寫的檢視器。畫面看起來差不多，也能拖曳旋轉、縮放，但多了一些現成櫃子沒有的功能：

• 點一下零件，那個零件會亮起來，並且顯示它的名字；旁邊還有一份零件清單，可以搜尋。
• 畫面上有導覽標記點，點下去，鏡頭會自己飛過去，帶你看重點。
• 自動轉台：沒人操作時，模型自己慢慢轉一圈給路人看；有人碰了才停下來，閒置一陣子又回到原位。
• 一切由一份「場景說明書」決定：模型放哪裡、鏡頭怎麼擺、有哪些標記點，全寫在說明書上，展品本身不用改（呼應 Day 03 講的「模型」和「怎麼展示」要分開存）。

兩個都做，是為了看出差別

我在一個開發用的頁面上，做了一個切換按鈕，同一顆包裹，一鍵在兩種展示櫃之間切換。差別看得很清楚：

為什麼不乾脆用現成的？

現成展示櫃很適合「秀一顆模型」，我們前九天辛苦保住的零件名字、顏色、階層，它並沒有用上。而展場要的不只是「看」，是「講解」：點零件說明它做什麼、按導覽點帶你看重點。這些都建立在 Day 07 保住的零件樹之上，所以才值得自己做一個。

接下來的 Day 11、12、13，就是拆開這個自己訂製的展示櫃，看它是怎麼一步一步做出來的。

還沒驗證的事

• 手機上能不能穩定跑到每秒 30 格，還沒實機測。
• 導覽標記點目前有個對不上的小問題：說明書裡標記點指的零件編號，跟包裹裡零件的名字還沒對起來，所以「打包成完整場景」時標記點會是零個。這會在 Day 13 處理。

自己訂製的展示櫃

現成的展示櫃