📝

Three.jsでtextureの色が薄い時の対処法

2024/10/16に公開

結論

  • colorSpaceを設定する

内容

以下のように、画像が少し白っぽいような、薄く表示されてしまっていた

  • jpgの画像を使用
    • pngとかの形式でも変わるのかもしれないが、わからない
    • 実際pngでやった時は白くならなかったが、使った画像自体が違うので対照実験ではない→ファクトではない

対処法

const texture = new THREE.TextureLoader().load("/teba.jpg");
texture.colorSpace = THREE.SRGBColorSpace; //追加

SRGBColorSpaceを使うようにして修正した。

関連

https://qiita.com/mitsuru793/items/b0738c6955c2172e18a4
https://ics.media/tutorial-three/material_variation/
https://threejs.org/

Discussion