使用react-three-fiber显示的3D模型中加入发光效果（泛光）

2 年 ago

清, 宇

1 minute

背景概述

我想尽可能地在Web站点上以Blender创建的3D模型的原貌显示它们，以此来渲染通过Blender创建的3D模型时的外观。在Blender中，我们可以设置Bloom（柔光）。我尝试使用react-three-fiber来绘制3D模型时，看是否能够反映出这种柔光效果。

react-three-fiber

◆ 3D模型绘制完成图像

准备3D模型（在Blender中）

假设/假定/条件/基础

在本文所述的环境中绘制3D模型。本文的环境与此处相同。

◆ 环境

React-three-fiber：8.15.9

以三维模型进行绘画

以下是App.tsx的完整代码。除了在这篇文章中描述的App.tsx中的3D模型显示之外，本文的App.tsx还添加了有关Bloom效果的描述。

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模型。

为了比较，我们将比较一下如果不包括布卢姆特效（～)部分和包括该部分，在网站上的显示效果。

请看以下内容

https://threejs.org/docs/#examples/en/postprocessing/EffectComposer