category icon
2022-04-29
JavaScript - Three.js

Three.js の背景を透過する方法

Three.js
0.117.1
profile
hikaru
Software Developer / DIY'er

Three.js で背景を透過するには、➊WebGLRenderer のコンストラクタ呼び出し時に透過設定を有効にして、➋背景色のアルファ値を透過させる必要があります。

typescript
// ➊ 透過を有効化
const renderer = new THREE.WebGLRenderer({ alpha: true });

// ➋ 背景色のアルファ値を透過指定 (デフォルトでこの値です)
renderer.setClearColor(0x000000, 0);

なお、scene.background = new THREE.Color(0xffffff) などの Scene の背景色を指定してしまうと、背景が透過されなくなるので注意が必要です。