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

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

CONTENTS

r152とr175での見え方の違い

Three.js（ｒ152）

Three.js（ｒ175）

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

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

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

先に結論だけ Three.js r155からデフォルトの光度単位が変わりました。PointLightとSpotLight…

引用

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);

同じような見た目になるまで調整を繰り返しましたが、数百倍どころではありませんでした…（結果的に9000倍です）

そのレンダリング結果の比較が下記になります。

Three.js（ｒ152）

Three.js（ｒ175修正後）

Three.js(r175修正後)での見え方。r152とほぼ同じような見え方に。

これで見た目上は似たような結果となりましたが、「それ以外のライトの強度をMath.PI倍にする」とありますので、AmbientLightやDirectionalLightを使用している場合はそれらの強度にMath.PIをかけることで同じような見た目を再現できるとのことです。