【R3F】10.环境设置

基于 @react-three/drei提供的钩子函数

Sky

• 模拟天空的颜色，可以设置太阳位置，同 threejs 中的 sky

  ... 
  <Sky sunPosition={sunPosition} distance={450000} inclination={0} azimuth={0.25} />
  ...
  

Environment

• 自定义天空盒子，支持 hdr 格式文件

• files 支持设置单个 hdr 文件或者设置 数组六个文件

  ...
   <Environment
                  background
                  files={'./assets/sky/acoustical_shell_4k.hdr'} 
              />
    ...
    
    ...
   <Environment
                  background
                  files={['px.png','nx.png','py.png','ny.png','pz.png','nz.png']} 
              />
    ...
  

• 设置反光效果 有两种方式，一种是 通过自建 mesh 方式，一种是通过Lightformer

   <Environment
                  background
                  files={'./assets/sky/acoustical_shell_4k.hdr'} 
     >
    {/* 设置反光板 方式一 */}
                  {/* <color args={['#000000']} attach="background" />
                  <mesh position-z={-5} scale={10}>
                      <planeGeometry />
                      <meshBasicMaterial color="red" />
                  </mesh> */}
                  {/* 设置反光板 方式二 */}
                  <Lightformer
                      position-z={-5}
                      scale={10}
                      color={'red'}
                      intensity={10}
                      form={"ring"}
                  />
  </Environment>
  

• 模型在场景中贴地显示，设置ground 的参数即可实现

   <Environment
                  background
                  files={'./assets/sky/acoustical_shell_4k.hdr'} 
       			ground={{
                      height: 10,
                      radius: 28,
                      scale: 100
                  }}
     >
    
                  <Lightformer
                      position-z={-5}
                      scale={10}
                      color={'red'}
                      intensity={10}
                      form={"ring"}
                  />
  </Environment>
  

Stage

• 提供一个可以参数设置的环境设置效果 更多查阅

  <Stage adjustCamera intensity={0.5} shadows="contact" environment="city">
    <mesh />
  </Stage>