3D 模型編輯器 Blockbench 如何使用 EyeDropper API 讓使用者選擇世界各地的顏色

EyeDropper API 提供建立滴管工具的機制,讓使用者從螢幕 (包括瀏覽器視窗以外的部分) 取樣顏色。瞭解 3D 模型編輯器 Blockbench 如何在程式碼庫中使用這個 API。

簡介

(這篇文章也有影片版本)。

Blockbench 是免費的現代化模型編輯器,可用於具有像素藝術紋理的低多邊形模型。如果您曾經玩過 Minecraft,很可能會看到 Blockbench 建立的素材資源,例如山羊,這是在「洞穴與懸崖更新」第 1 部分中加入 Minecraft 的素材資源。授權為 GPL 第 3 版的 Blockbench 程式碼已在 GitHub 上開放原始碼

使用 Blockbench 設計的 Minecraft 綿羊。

如要試用 Blockbench,請前往 web.blockbench.net 啟動應用程式。由於 Blockbench 是 PWA,因此您可以將其安裝到電腦上,並在獨立視窗中啟動。如果您是 3D 建模新手,可以先從眾多開放原始碼 .bbmodel 檔案範例著手,這些範例可透過 GitHub 的程式碼搜尋功能找到。例如,試試下圖中顯示的火車模型。

在 Blockbench 中編輯火車模型。

EyeDropper API

除了許多其他功能之外,Blockbench 也提供繪圖功能,因此如果您想標記火車,現在就可以這麼做。請勿在現實世界中這麼做。你可以看到,我使用了亮橘色標記。

在火車模型上寫著「Tom was here」的標籤,以及和平手勢。

這其實是透過 EyeDropper API,直接從 macOS Ventura 桌布擷取的橘色圖案。如以下螢幕截圖所示,滴管 (應用程式視窗左側的橘色圓圈) 可以直接從應用程式外部進入我的電腦桌面,或任何我可能已開啟的應用程式。

顯示從 Blockbench 應用程式伸出的顏色挑選器,以及從桌面背景圖片中挑選的顏色。

Blockbench 是開放原始碼,因此您可以瞭解開發人員如何實作 API。問題的程式碼位於 JannisX11/blockbench/blob/master/js/texturing/color.js 中。Blockbench 也可做為 Electron.js 應用程式使用。從註解中可知,Blockbench 針對Electron 中的錯誤提供特殊的例外狀況處理方式,因為在該錯誤中,色彩挑選器無法在視窗外挑選顏色。在程式碼片段醒目顯示的部分中,您可以看到 Web API 並未發生這個問題。使用 API 相當簡單。實例化新的 EyeDropper 例項,並呼叫其 open() 方法。這個方法會以 十六進位 sRGB 格式,解析代表所選顏色的 sRGBHex 字串。

new Action("pick_screen_color", {
  icon: "colorize",
  category: "color",
  condition: () => typeof EyeDropper == "function",
  click: async function () {
    if (Blockbench.platform == "win32") {
      // workaround for https://github.com/electron/electron/issues/27980
      ipcRenderer.send("request-color-picker", {
        sync: settings.sync_color.value,
      });
    } else if (typeof EyeDropper == "function") {
      let dropper = new EyeDropper();
      let { sRGBHex } = await dropper.open();
      ColorPanel.set(sRGBHex);
    }
  },
});

結論

色彩挑選器是 Blockbench 等創意軟體中一項小巧但重要的功能。大多數情況下,所需顏色並非應用程式視窗的一部分,而是位於外部某處,甚至可能位於其他畫面。在這種情況下,如果顏色挑選器無法讓您挑選顏色,幾乎就沒有用處了。EyeDropper API 正是為這類用途而設計,自 2021 年 11 月導入以來,一直都非常適合 Blockbench 使用。如果您使用 Blockbench,請盡情挑選顏色!