non vorrei lavorare

ブログ名の通りです。javascript three.js mruby rust OCaml golang julialang blender

ElectronでWebGL(three.js)使ってデスクトップマスコット作った際に分かったこと

こんにちは、仕事始めから次男が高熱で、今年はまだ保育園に次男は登園していません。本日、園の餅つき大会があり、次男初の登園?でした。kjunichiです。

TL;DR

gopheron

Electronで必要な処理

透明なウィンドウを表示する

デスクトップいっぱいのウィンドウを表示して、透明にする。

const electron = require('electron');
const electronScreen = electron.screen;
const size = electronScreen.getPrimaryDisplay().workAreaSize;

mainWindow = new BrowserWindow({
    width: size.width,
    height: size.height,
    transparent: true,
    frame: false,
    "always-on-top": true,
    "title-bar-style": "hidden-inset"
});

OSXでクリックスルーさせる設定

残念ながら、現状以下のようにして、クリックを無視する設定はOSXのみ。

mainWindow.setIgnoreMouseEvents(true);

three.jsで必要な設定

  • alphaブレンドを有効にする。
  • スクロールバーを表示されない為に、少し小さめのスクリーンにする。
  • preserveDrawingBufferを有効しているのは気休め程度かも。。
const width = window.innerWidth*0.98;
const height = window.innerHeight*0.98;

// レンダラー
const renderer = new THREE.WebGLRenderer({
  alpha: true,
  preserveDrawingBuffer: true
});
renderer.setSize(width, height);

参考資料

関連記事