こんにちは。フロントエンドエンジニアになりたてのぼこです。 最近プライベートでBlenderを始めまして、作った3DモデルをWeb上で扱う練習をしたりしています。 ブラウザ上で3Dモデルを表示するためには、まず作成した3Dモデルのデータをgltf(glb)という形式で書き出し、それをWebGL(Three.js)で読み込んでcanvasに表示することになると思いますが、やってみると「あれ、Blenderで作ったときとなんか色味が違う……」っていう現象に陥ることが少なくないように思います。 せっかくBlenderでいい感じに調整したのに、いざThree.jsに持ってきたときに表示が変だと悲しいですよね。 今回はその問題を解決するための備忘録的な記事を書こうと思います。 使用ツールのバージョン Blender: 2.93.0 Three.js: r135 とりあえず結論 Three.jsに持っ
![Blenderで作成した3Dモデルを、Three.jsで表示した際の「色味が違う…」の解決方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/8df492cc92e4696dc31d54761ec96f391009e8f9/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2022%2F02%2Fec_220208_p3_ogp.jpg)