公開日：2026/1/6更新日：2026/7/13

Three.jsのPointLightの明るさが変わって戸惑った話

あるときバージョンの異なるThree.jsを触っていたら、PointLightの明るさが全然違うということに気づきました。

CONTENTS

r152とr175での見え方の違い

Three.js（ｒ152）

Three.js（ｒ175）

どうでしょうか？古いバージョンの方が明るく、新しいバージョンの方が暗く見えているのが分かるかと思います。

原因は下記の記事の中で紹介されていました。

[Three.js] r155からライトの光度単位が変わりました - Qiita

引用

Three.js r155からデフォルトの光度単位が変わりました。PointLightとSpotLightのデフォルトの光度は1カンデラになり、大幅に暗くなっています。
Three.jsを更新してシーン全体が暗くなったり、モデルにハイライトが入らないと感じたら、以下の2点を調整してください。

PointLightとSpotLightの光度を数百倍に強くする
それ以外のライトの強度をMath.PI倍にする

私の場合、明るく見えている方がr152で暗く見えているのがr175なので、ちょうどこの破壊的変更の影響を受けているということでした。

今回は上記の「PointLightとSpotLightの光度を数百倍に強くする」の対処法で解決しました。

//変更前のコード
const pLight = new THREE.PointLight(0xffffff, 1, 200);
pLight.position.set(-26, 7, 100);
scene.add(pLight);
//変更後のコード
const pLight = new THREE.PointLight(0xffffff, 9000, 200);
pLight.position.set(-26, 7, 100);
scene.add(pLight);