背景
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では、ブルームエフェクトについて記載を追加しています。
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サイト上の見え方を比べてみます。
