## 概述在之前的章节中，我们的环境已经加载出来了，也添加了环境的音效，但是孤零零的小岛难免让人感到单调。这次我们来丰富下游戏世界的场景，添加一些细节。 ## 海洋关于水的纹理相关资料很多，我们直接使用官方的示例。
🔗 [react-three的示例：Water shader](https://codesandbox.io/s/1b40u)
🔗 [Three.js官网的示例：shader Ocean](https://threejs.org/examples/?q=Water#webgl_shaders_ocean)
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8060985068914830b381cf4f461bc812~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1215&h=889&s=377644&e=png&b=151515) 我们直接从官网中获得海面的法线纹理贴图，把他放到public目录的textures文件夹中 ![waters.jpeg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/83669ec58a7340498336103f07b62bcf~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1024&h=1024&s=248813&e=jpg&b=7171fc) 在models下新建文件ocean.tsx，在这个文件中我们做3件事： 1. 加载法线纹理贴图 2. 配置水面的可选参数（这里照搬了示例中，你可以自行调试） 3. 在帧渲染中，改变uniforms的时间值，让水面流动附代码如下： ```ocean.tsx /** * 海洋组件 * 参数： * range: 水面的范围 */ extend({ Water }); export default function Ocean({ range }: { range: number }) { // 水面波纹的法线贴图 const waterNormals = useTexture("/textures/waters.jpeg") waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping; const geometry = useMemo(() => new THREE.PlaneGeometry(range, range), [range]); const options: WaterOptions = useMemo( () => ({ textureWidth: 512, textureHeight: 512, waterNormals, // 法线贴图 sunDirection: new THREE.Vector3(),// 太阳的照射方向 sunColor: 0xFFFACD, // 太阳的颜色 // waterColor: 0x001e0f, // 水的颜色 waterColor: "skyblue", // 水的颜色 distortionScale: 3.7, // 水面扭曲指数 }), waterNormals] ); useFrame((state, delta) => { if (!state || !ref?.current) return; ref.current.material.uniforms.time.value += delta; }); return ( ); } ``` 这里如果组件`water`组件标红，需要在vite-env.d.ts中添加全局类型声明： ```vite-env.d.ts declare global { namespace JSX { interface IntrinsicElements { water: ReactThreeFiber.Object3DNode; } } } ``` ## 雾气在react-three中添加雾气相当简单，只需要添加:``代码到Canvas组件下，其中args的参数是雾效设置： - 雾的颜色：`0xfff0ea`，即十六进制颜色值 `0xfff0ea`，这个值代表着一种浅黄色。 - 近截面（`near`）：`100`，表示雾效的起始位置在相机的位置后1个单位处。 - 远截面（`far`）：`200`，表示雾效的结束位置在相机的位置后200个单位处。 ## 天空 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea2107cef9fa4fbda864e5805fa34288~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=912&h=889&s=251470&e=png&b=978583) 海洋有了，我们还需要一个更加逼真的天空。原来的渐变色背景，可以不动，我们为场景添加一个天空盒，Sky组件。
```index.tsx import { KeyboardControls, Sky } from '@react-three/drei'

``` 关于天空，可以参考threejs官网的示例：[sky](https://threejs.org/examples/?q=sky#webgl_shaders_sky) 通过它你可以更清楚的了解Sky组件各个参数的作用。你可以自己调整这些参数，直到感觉适合你的项目。如果你对Sky组件效果不满意，可以自己创建天空盒，最简单的方式用一个全景图作为纹理。创建一个球形geometry,将全景纹理双面渲染到球体上。具体可以参考以下官方示例:
🔗 [react-three 天空盒示例](https://codesandbox.io/p/sandbox/sky-dome-with-annotations-wbrfs?file=%2Fsrc%2FApp.js%3A17%2C16-17%2C24) ## 云朵我们使用react-three/drei中提供的`Cloud`组件 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8ea67aafb2b4c309cb355298ede4121~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1215&h=889&s=419909&e=png&b=151515) 🔗 [官网示例：react-three 云朵](https://codesandbox.io/s/mbfzf) 注意，如果你不使用本地的纹理图片，该组件默认加载外网的在线纹理，但在中国大陆地区该纹理无法加载成功。从示例中直接获取云朵的纹理图片，把它放到public文件下的textures文件夹中。在models文件夹下新建clouds.tsx文件 ```clouds.tsx import { Clouds, Cloud } from "@react-three/drei"; import * as THREE from "three"; /** * 云层 * 参数： * num: 云朵的数量 */ export default function CloudLayer({num=30}:{num?:number}) { return } ``` 这就是全部代码了,让我解释下Cloud的参数： - concentrate:用于管理云朵们的分布状态，有3个值： - random，随机分布 - inside, 中心聚集 - outside, 四周分布 - growth：动画的速度的系数值 - color：云朵的颜色 - opacity: 透明度 - seed: 随机种子，当随机种子一样时云朵形状一样。（默认随机取值） - bounds：边界，它的值构成一个长方体，云朵在这个长方体内分布。如上述值表示长200，宽200，高为1的长方体。 - volume: 云的体积大小 - segments: 云朵的数量 Clouds的参数： - limit：云朵数量的最大上限 - range：云朵渲染的数量 - texture：云的纹理 🔗 [官方文档地址](https://github.com/pmndrs/drei#cloud) ## 挂载组件在models文件夹下的index.tsx中挂载天空、雾气、海洋、云朵等环境。 ```index.tsx import { Sky } from '@react-three/drei' import Ocean from './ocean'; import CloudLayer from './cloudLayer'; ... ... ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd93605a48224aa4adcbc688431a97b7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1107&h=854&s=677102&e=png&b=ccd7df) ## 结语 ### 本次完成 - [x] 添加海洋、雾气 - [x] 添加天空、云层 ### 最终效果耳边响起舒缓的音乐，伴随着浪涛声，伫立欣赏远处天空的云朵，真让人有种心旷神怡之感啊！ *水流心不惊，云在意俱迟。一心不赘物,古今自逍遥。* ![ezgif-2-5edcd047a0.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/93bbba6e88d041e3b2b58c8fb1d0017e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600&h=292&s=3283047&e=gif&f=155&b=dce4e8) ### 项目地址 🔗 [本项目源码地址](https://link.juejin.cn/?target=https%3A%2F%2Fgitee.com%2Fbrother_shui%2Fplayer-control%2Ftree%2Fgame%2F "https://gitee.com/brother_shui/player-control/tree/game/") 🔗 [react-three实现人物控制——进阶](https://link.juejin.cn/?target=https%3A%2F%2Fgitee.com%2Fbrother_shui%2Fplayer-control%2Ftree%2Fdevelop%2F "https://gitee.com/brother_shui/player-control/tree/base/") 🔗 [react-three实现人物控制——基础](https://link.juejin.cn/?target=https%3A%2F%2Fgitee.com%2Fbrother_shui%2Fplayer-control%2Ftree%2Fmaster%2F "https://gitee.com/brother_shui/player-control/tree/master/") ### 结语后续计划添加一个用于显示玩家位置的小地图。如果大家有什么想法的话，欢迎在评论区提出你的宝贵想法和意见。