背景

Blenderで作成した3Dモデルをreact-three-fiberを使用し、
画面上に3Dモデルを描画する際に、できるだけBlenderで作成した3Dモデルの見た目のままWebサイト上に表示したいです。
Blenderでは発光感を出すBloom（ブルーム）を設定する事があります。
react-three-fiberを使用し、3Dモデルを描画するときにもこのブルームを反映できないか試してみました。

react-three-fiber

◆ 3Dモデル描画完成イメージ

3Dモデルの準備（Blender側）

今回はBlenderでブルームを付けた以下画像の3Dモデル（moon_and_star.glb）を準備しました。
画像内の3つのオブジェクトはいずれも放射の強さは3.0で設定しています。

Blenderでエクスポートする際の設定は以下の通りです。
glTF型式でエクスポートしました。

前提

以下の記事で作成した環境で3Dモデルを描画します。
本記事の環境もこちらと同じものです。

◆ 環境

Blender：3.4
Typescript：4.9.5
React：18.2.0
React-three-drei：9.88.11
React-three-fiber：8.15.9

3Dモデルの描画

先にApp.tsxの全体のコードは以下の通りです。
3Dモデル表示について記載したこちらの記事のApp.tsxに加えて、
本記事のApp.tsxでは、ブルームエフェクトについて記載を追加しています。

App.tsx

import { Canvas } from '@react-three/fiber'
import { OrbitControls, useGLTF } from '@react-three/drei'
import { Bloom, EffectComposer } from '@react-three/postprocessing';

function Model() {
  const { scene } = useGLTF("assets/moon_and_star.glb")
  return <primitive object={scene} />
}

export default function App() {

  return (
    <>
      <Canvas camera={{ position: [2, 1, 2], near: 0.05 }}
        style={{ background: "#001122" }}>
        {/* 3Dモデルの表示 */}
        <group>
          <Model />
        </group>
        {/* 自動横回転 */}
        <OrbitControls autoRotate />
        {/* ライト */}
        <directionalLight position={[5, 5, 5]} castShadow />
        {/* ブルームのエフェクト */}
        <EffectComposer>
          <Bloom />
        </EffectComposer>
      </Canvas>
    </>
  )
}

◆ 詳細：発光感（ブルーム）を付ける方法

react-postprocessingのEffectComposerとBloomを使用する事で、
Blenderでの発光感に近いオブジェクトを表示できました。
以下の通り、EffectComposer内にBloomの記載をしています。

{/* ブルームのエフェクト */}
<EffectComposer>
  <Bloom />
</EffectComposer>

◆描画結果

Blenderでの見た目と多少異なりますが、
ブルームにより発光感が付いた3Dモデルが描画できました。

比較として、ブルームのエフェクト( <EffectComposer>～<EffectComposer/>)部分を記載しなかった場合と記載した場合のWebサイト上の見え方を比べてみます。

参考