React-three实现3D游戏（四）-海洋、天空和云雾

3D模型在线预览提供多种低代码平台3D模型在线预览解决方案，实现了将多种3D模型格式无缝集成到低代码业务表单中。这意味着用户可以在不离开低代码平台的情况下，直接查看和操作3D模型，极大地提升了数据可视化的效果和用户交互体验。

海洋

关于水的纹理相关资料很多，我们直接使用官方的示例。

我们直接从官网中获得海面的法线纹理贴图，把他放到public目录的textures文件夹中

在models下新建文件ocean.tsx，在这个文件中我们做3件事：

1. 加载法线纹理贴图
2. 配置水面的可选参数（这里照搬了示例中，你可以自行调试）
3. 在帧渲染中，改变uniforms的时间值，让水面流动

附代码如下：

这里如果组件water组件标红，需要在vite-env.d.ts中添加全局类型声明：

雾气

在react-three中添加雾气相当简单，只需要添加:<fog attach="fog" args={[0xfff0ea, 1, 200]} />代码到Canvas组件下，其中args的参数是雾效设置：

• 雾的颜色：0xfff0ea，即十六进制颜色值 0xfff0ea，这个值代表着一种浅黄色。
• 近截面（near）：100，表示雾效的起始位置在相机的位置后1个单位处。
• 远截面（far）：200，表示雾效的结束位置在相机的位置后200个单位处。

天空

海洋有了，我们还需要一个更加逼真的天空。原来的渐变色背景，可以不动，我们为场景添加一个天空盒，Sky组件。

关于天空，可以参考threejs官网的示例：sky

通过它你可以更清楚的了解Sky组件各个参数的作用。 你可以自己调整这些参数，直到感觉适合你的项目。

如果你对Sky组件效果不满意，可以自己创建天空盒，最简单的方式用一个全景图作为纹理。创建一个球形geometry,将全景纹理双面渲染到球体上。

云朵

我们使用react-three/drei中提供的Cloud组件

注意，如果你不使用本地的纹理图片，该组件默认加载外网的在线纹理，但在中国大陆地区该纹理无法加载成功。

从示例中直接获取云朵的纹理图片，把它放到public文件下的textures文件夹中。

在models文件夹下新建clouds.tsx文件

这就是全部代码了,让我解释下Cloud的参数：

• concentrate:用于管理云朵们的分布状态，有3个值：
• random，随机分布
• inside, 中心聚集
• outside, 四周分布
• growth：动画的速度的系数值
• color：云朵的颜色
• opacity: 透明度
• seed: 随机种子，当随机种子一样时云朵形状一样。（默认随机取值）
• bounds：边界，它的值构成一个长方体，云朵在这个长方体内分布。如上述值表示长200，宽200，高为1的长方体。
• volume: 云的体积大小
• segments: 云朵的数量

Clouds的参数：

• limit：云朵数量的最大上限
• range：云朵渲染的数量
• texture：云的纹理

挂载组件

在models文件夹下的index.tsx中挂载天空、雾气、海洋、云朵等环境。