Hoe de 3D-modeleditor Blockbench de EyeDropper API gebruikt om gebruikers overal kleuren te laten kiezen

De EyeDropper API biedt een mechanisme voor het maken van een pipet waarmee gebruikers kleuren van hun scherm kunnen samplen, ook buiten het browservenster. Ontdek hoe de 3D-modeleditor Blockbench deze API in hun codebase gebruikt.

Thomas Steiner
Jannis Petersen
Jannis Petersen
X GitHub

Invoering

(Dit artikel is ook beschikbaar als video.)

Blockbench is een gratis, moderne modeleditor voor low-poly modellen met pixelart-texturen. Als je ooit Minecraft hebt gespeeld, is de kans groot dat je assets hebt gezien die met Blockbench zijn gemaakt, zoals de geit, die aan Minecraft is toegevoegd als onderdeel van de Caves and Cliffs Update, Deel 1. De Blockbench-code met GPL versie 3-licentie is open source op GitHub .

Minecraft schaap ontworpen met Blockbench.

Om Blockbench uit te proberen, start je de app door naar web.blockbench.net te gaan. Als PWA kun je de app op je desktop installeren en in een zelfstandig venster openen. Ben je nieuw met 3D-modelleren? Begin dan met een van de vele open-source .bbmodel -bestandsvoorbeelden die je kunt vinden via de codezoekfunctie van GitHub. Probeer bijvoorbeeld het treinmodel dat je in de volgende schermafbeelding ziet.

Een treinmodel bewerken in Blockbench.

De EyeDropper API

Naast vele andere functies biedt Blockbench een verffunctie, dus als je ooit een trein wilde taggen, kan dat nu. Doe dit alsjeblieft niet in de echte wereld. Je ziet dat ik voor mijn tagging een feloranje kleur heb gebruikt.

Het label 'Tom was here' en een vredesteken op het treinmodel.

Dit is eigenlijk een sinaasappel die ik rechtstreeks uit de macOS Ventura-achtergrond heb gehaald via de EyeDropper API . Zoals je in de volgende schermafbeelding kunt zien, kan de pipet (de oranje cirkel links in het app-venster) buiten de applicatie rechtstreeks naar mijn bureaublad reiken, of naar elke andere app die ik open heb staan.

Kleurenkiezer weergegeven terwijl je vanuit de Blockbench-app een kleur kiest uit de achtergrondafbeelding van het bureaublad.

Omdat Blockbench open source is, kunt u lezen hoe de ontwikkelaars de API hebben geïmplementeerd. De betreffende code staat in JannisX11/blockbench/blob/master/js/texturing/color.js . Blockbench is ook beschikbaar als Electron.js-app. Zoals u in de opmerking kunt zien, is er speciale case handling voor een probleem in Electron , waarbij de kleurenkiezer geen kleur buiten het venster kan selecteren. Met de web-API, die u kunt zien in het gemarkeerde gedeelte van het codefragment, is dit geen probleem. Het gebruik van de API is eenvoudig. Instantieer een nieuwe EyeDropper -instantie en roep de open() methode aan. Deze methode wordt omgezet in een sRGBHex string die de geselecteerde kleur vertegenwoordigt, in hexadecimaal sRGB-formaat .

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);
    }
  },
});

Conclusies

Kleurkiezers zijn een klein, maar belangrijk stukje creatieve software zoals Blockbench. Vaak staat de gewenste kleur niet in het app-venster, maar ergens daarbuiten, misschien zelfs op een ander scherm . Een kleurkiezer die je in zulke gevallen geen kleuren laat kiezen, is bijna nutteloos. De EyeDropper API is speciaal voor dit soort toepassingen ontwikkeld en werkt sinds de implementatie in november 2021 uitstekend voor Blockbench. Veel plezier met het kiezen van kleuren als je met Blockbench aan de slag gaat!