three.jsのCanvasRendererが一部のWindowsで上手く動作しなかった件と対応

はじめに

three.jsと言えばJavascript用のWebGLライブラリとして有名ですね。
three.jsにはCanvasRendererというWebGLを使わずにレンダリングする機能があります。

今回はthree.jsのCanvasRendererを使ったときに一部のwindowsマシンだけで生じた現象についてです。

やりたかったこと

こんな感じで白い背景に線を引いていくアニメーションを作りました。

現象: windowsで真っ黒に表示される件

一部のwindowsマシンで白黒が逆転するという現象が起きました。

原因

よくあるthree.jsのコードです。render関数内でsetCrearColorメソッドを呼んで色を指定しています。この指定で基本的にWindowsとMacは色が変わってくれます。

function render() {
  camera.lookAt( scene.position);
  renderer.setClearColor('#fff', 0.1);
  renderer.render(scene,camera);
  controls.update();
}

一部のWindowsマシンだけがsetClearColorが効かなくなってました。

対策

このように修正したところ問題が発生していたWindowsマシンでも通常動作できました。

  renderer.setClearColor('#fff', 0.1);

↓

  renderer.setClearColor(0xffffff, 0.1);

原因がよく分かってないからもやもやしますね汗
誰か分かる方がいたら教えてください汗