【R3F】10.环境设置

最新推荐文章于 2024-12-05 12:08:21 发布

原创最新推荐文章于 2024-12-05 12:08:21 发布 · 475 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #threejs #javascript

本文介绍了如何利用@react-three/drei库在React应用中设置逼真的3D环境，包括Sky组件、自定义天空盒、反光效果、地面处理以及Stage参数调整。详细讲解了SkySunPosition、Environment背景设置和Lightformer的用法。

基于 @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>