最近尝试用R3F和Blender实现了一个“步入式”游览3D水族馆，原计划用一个星期，没想到两天就做完了！！！ （本文只是简单的介绍框架，感兴趣的可以蹲蹲详细教程...）
用到的技术栈和工具都很简单：react-three-fiber 9.1（简称：R3F）、Vite6.2、Blender4.4。 效果如下动图：
共完成的动效有：水草飘动、水波纹、鱼摆动并绕圆周运动、键盘控制物体运动模拟游览路线。
1、石块、水草、珊瑚、隧道
其中石块和珊瑚都是网上下载的免费模型素材。上图看起来有大概有六块石头，为了节省加载资源，其实用的是同一个模型，改变不同的大小和角度后摆出来的0v0
水草是使用图片简单建模+舞动动画。也是在网上找了三张水草的png图片，改变不同的大小和角度组合成
隧道和可以行走的地板部分能看出都是比较简单的基础模型合成。
这个网站有很多很好用的免费素材和模型：polyhaven
2、四种鱼类
鱼类的建模和摆动动画，圆周运动动画都是在同一个文件完成，最终导出一个glb格式，在网页中导入使用。
下一张图能看到小鱼的摆动动画哦。
3、水面和沙地
水面和沙地的倒映波纹动效是在代码中用shader实现的，仿真效果还不错。
4、环境图
环境图用于模拟物体周围的环境，提供更加真实的反射、折射和光照效果。在简单的项目中，从上文提到的polyhaven网站上选一个喜欢的下载就可以了，也是很方便哦！
如下是我所使用的环境图：
5、键盘控制小球运动
小球这就是完全R3F实现了，终于聊到R3F了= =！
R3F 是一个用于 Three.js 的 React 渲染器，它让你能用 React 的方式（声明式、组件化）来管理和构建 Three.js 项目。
如下图实现小球的代码所示，可以直接将 3D 元素（如一个模型、一个灯光设置、一个复杂的特效）封装成 React 组件，然后在项目中像搭积木一样复用，开发效率真的很高。不需要手动写 requestAnimationFrame，也不需要担心忘记 dispose 几何体和材质。在大型项目里就会很方便。
return (
<RigidBody
ref={body}
canSleep={false}
colliders="ball"
restitution={0.2}
friction={1}
linearDamping={2}
angularDamping={2}
position={[1.7, -3.5, -26]}
>
<mesh castShadow>
<icosahedronGeometry args={[0.3, 1, 1]} />
<meshStandardMaterial flatShading color="blue" />
</mesh>
</RigidBody>
);
不过这种声明式编程也有缺点，它隐藏了很多细节，如果要实现一些特殊的，底层的功能，还得用回three.js。而且有时候调试没那么方便，有时问题可能出在 R3F 的抽象层或 React 的渲染机制上，调试就会变得比原生 Three.js 更复杂，需要找找是 React 的问题、R3F 的问题，还是 Three.js 本身的问题。
本文只是简单的介绍框架，感兴趣的可以蹲蹲详细教程...
