React-three实现3D游戏（一）-模型替换

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

获取人物模型

你可以从Mixamo网站获取一些你想要的模型和动画。

获取你想要的人物和动画，再使用blender将动画混合到你的模型中。最后为了方便将fbx或obj统一转成glb格式。(glb是模型的二进制格式，解析和加载性能更高。)

替换人物模型

这里在之前代码基础上做如下修改：

1. 新模型文件命名为robotLady.glb，放到public目录下的models文件夹中。
2. 去除冗余的动画设置，只配置3个动画：idle、walk、run。
3. 将文件的加载路径提取作为常量，便于管理和配置。
4. 更改切换模型后，修改人物的碰撞体（胶囊的半径和圆柱的长度）
   

进入到之前的player.tsx文件修改如下：

动画模块封装

之前使用 EcctrlAnimation 组件来省略代码，实际使用时，动画自定义的部分颇多。此外它重新再记载了一次模型，总体上降低了性能。所以参考原来的组件，我们实现自己的自定义动画组件，方便自己管理。

和我们之前的写法基本逻辑是一致的，将原有逻辑拆分为独立的组件，便于管理。将动画集合和动画设置作为参数传进来，它将包裹在玩家模型外，作为玩家的父元素。
修改player.tsx，去除原来的EcctrlAnimation组件，使用自定义的Animation替代。

加载环境模型

进入models文件夹下的floor，我们将使用加载的环境模型，将原来代码修改如下。

你可以使用自己的其他环境模型来替代。 但有4点需要注意：

1. 模型的线面越多，加载越慢，进行物理计算时，计算量越大。
2. RigidBody使用的碰撞模式，为 trimesh时，会使用三角网格碰撞体来逼近物体的形状，提高了碰撞精度的同时，由于计算复杂性较高，页面将会变得卡顿。
3. 纠正基础篇的错误，RigidBody的collider接受 ball（球形）、cuboid（长方体）、hull（多边形）、trimesh（三角网格）及false（不使用自动计算的碰撞体）。
4. 最佳方案：如果允许的话，你可以让建模师，专门在模型中放置一套用来计算碰撞体的简单线面结构（就像人物模型总是使用胶囊来生成碰撞体一样）。