three.jsの背景を透明または任意の色に変更する方法

three.jsでは、WebGLRendererの設定を変えるだけで、キャンバスの背景を簡単にコントロールできます。この記事では、背景を透明にする方法と好きな色を指定する方法の2つを解説します。

three.jsで背景を透明にする

HTML要素やCSSで設定したページの背景を透かして表示したい場合は、WebGLRendererのコンストラクタにalpha: trueオプションを渡します。これにより、レンダラーがアルファチャンネル（透明度）を持つようになります。

var renderer = new THREE.WebGLRenderer( { alpha: true } );
// クリアカラーはデフォルト値のままでも構いません
renderer.setClearColor( 0x000000, 0 ); // デフォルト設定

setClearColor()の第2引数に0を指定すると、完全な透明になります。これにより、three.jsのシーンの背後にあるHTMLコンテンツやCSSの背景がそのまま見える状態になります。

背景色を指定する

逆に、シーンの背景に特定の色を設定したい場合は、setClearColor()メソッドに16進数のカラーコードを渡すだけです。

renderer.setClearColor(0xb0f442);

上記の例では、明るい黄緑色（#b0f442）が背景色として適用されます。お好みのカラーコードに置き換えて使用してください。

ポイントまとめ

• 透明背景： コンストラクタで { alpha: true } を指定し、setClearColor(色, 0) を呼び出す
• 単色背景： setClearColor(0xカラーコード) で任意の色を指定する

わずか数行のコードで背景の見た目を自由に変更できるので、Webサイトのデザインに合わせた演出が可能になります。