【Threejs】之如何快速创建模型和添加动作
前言
在上一篇文章中，我们尝试了使用原生的方法来创建第一个基础场景，添加了简单的模型，而我们的模型也没有很多，所以我们无法完成一些复杂的场景，本次我们就来看看，对于
threejs的新手小白来说，如何快速创建模型和添加些基础的动作(大神请忽略)，让我们的模型动起来，那就开始喽！
模型之间的区别
在之前我们得知在
threejs项目里一般用的模型格式为glb、gltf、fbx（当然不止这三个），那么它们的适用场景和区别是啥？
glb、gltf、fbx 不同格式之间的区别？
备注：
glb是gltf的二进制文件格式，扩展名为.glb，三种模式都可以包含模型和动作
| 文件格式 | 存储格式 | 文件大小 | 加载速度 | 适用场景 |
|---|---|---|---|---|
.glb | 二进制文件格式 | 最小 | 很快 | glb文件将所有模型数据（包括纹理、材质和动画）都封装在一个文件中，简化了模型的交换和共享 ，适用于游戏引擎和虚拟现实（VR），因为它们需要快速加载和渲染模型。 |
.gltf | JSON的文本格式 | 小 | 快 | glTF支持多个3D建模软件和引擎，使得不同软件之间可以方便地交换模型数据，文本的格式更具可读性，适合用于WebGL和WebVR等Web技术中 |
.fbx | 二进制文件格式 | 大 | 慢 | 支持更广泛的功能，包括动画、约束、物理属性、骨骼等，适用于复杂的动画和特效需求。 |
fbx 的动画和 glb 以及 gltf 的动画，有什么区别？
-
功能和灵活性：
FBX是由Autodesk开发的专有文件格式，具有广泛的功能和灵活性。它可以存储复杂的动画数据，包括骨骼动画、蒙皮动画、形状关键帧动画、物理模拟等。FBX还支持多个动画轨道和复杂的动画层次结构，允许更精细的动画控制。 -
glb和glTF也支持动画，但相对于FBX来说功能较为简化。glTF主要关注于Web和实时应用的标准化，可以支持骨骼动画、形状关键帧动画和简单的属性动画，如位移和旋转。glb是glTF的二进制版本，适合于快速加载和渲染动画模型。 -
兼容性和跨平台性：
FBX是一种广泛使用的文件格式，可以被各种3D软件和引擎所支持，如Autodesk的Maya、3ds Max、Unity和Unreal Engine等。glb和glTF也得到了很多软件和引擎的支持，但与FBX相比，兼容性可能有所限制。 -
文件大小和性能：
glb和glTF是基于JSON格式的文本文件，可以通过压缩和优化来减小文件大小，提高加载性能。相比之下，FBX是二进制格式，文件通常较大，加载和解析速度可能稍慢一些。
总体而言，如果你需要在
Web和跨平台应用中使用动画，glb和glTF是不错的选择，它们提供了基本的动画功能，易于实现和交互，且体积相比之下更小。而如果你需要更复杂和高级的动画效果，并且与广泛的3D软件和引擎进行交互，FBX可能更适合你的需求。
创建模型
我之前提过如果没有模型，可以去
threejs的demo项目里扒，但这也只能支持我们的练习阶段，我们当然想创建自己的模型，以适应不同的场景，今天就来分享一下，我当前使用的建模方式。
Ready Player
Ready Player是一个在线的虚拟人物创建工具。它允许用户根据自己的喜好和需求创建个性化的虚拟人物。通过选择不同的面部特征、发型、服装以及其他各种元素，用户可以设计自己的独特的虚拟形象。网站地址
点击左下角创建形象：
选择一个性别：
可以选择上传照片、拍一张或者从系统里选一张：
如果没有照片或者不想拍，系统也会一些默认的头像：
or
我当前是有一张就上传一下：
接下来我们根据自己的需要可通过左右两侧的一些选项给模特装扮，下面就是我装扮完成的模型：
创建完成后，点击右上角去导出，可以导出png格式的图片，也可以下载glb格式
选择这里即可下载glb格式的文件：
网站也会保存之前创建的模型：
完成。
VRoid Studio 创建动漫形象 / 虚拟人物
VRoid Studio是一个免费的3D人物建模工具，由Pixiv所开发。它专门用于创建个性化的虚拟角色模型，创建的角色可以导出为可用于游戏、动画、虚拟现实体验等平台的格式，以实现不同形式的应用。相比Ready Player，这个工具不是在线的，需要下载桌面端使用，且形象是以动漫人物为主。下载地址
下载完成后，打开第一个界面可以选择已经创建好的，或者自己重新创建一个：
选择一个性别：
设置身体的各个细节的展示：
甚至连头发也可以分前后不同发型进行装扮：
服装更是比之前要多很多，有套装、上衣、下装、鞋子等。
通过这个软件创建的形象，版权是归属我们所有的，所以不用担心版权的问题：
导出的格式为
VRM格式，这个格式在我们后面添加动作或者是threejs是不支持的，所以我们后面还需要单独处理一下，将它转成fbx
完成。
sketchfab
如果你想要创建更多的的模型，这里推荐一个下载模型的网站，里面有很多好看的成熟的模型，包括游戏模型、建筑模型、动画模型等等。有自费的也有免费的，大家可以根据自己的需要进行下载：网站地址
上面标记价格是收费的，下面没有标价格的是免费的，大家可以尝试下载下来试试：
Mixamo
Mixamo是一个在线的给角色添加动画网站，由Adobe公司开发。在Mixamo上，可以浏览和选择各种3D角色模型，包括人类、动物和幻想生物等。您还可以对所选角色应用不同的动作和动画，以创建自定义的角色动画。Mixamo还提供了修改角色骨骼结构和外观的工具，以满足个性化需求。网站地址
当前支持三种导入模式：FBX、OBJ、ZIP
导入后，可以在左侧选择自己需要的动作，中间即可实时展示出来，如果对动作不满意，右侧可以进行微调：
如果你已经有模型本身，只是想要动作，那么导出时这里就不要选择带皮肤的
因为带皮肤的本身文件要大很多，默认
fbx格式就好，至于没有皮肤的模型怎么添加到项目里，会在下一节详细说明。(如果导入的是白模，那么导出的也必定是白模，就算选择withskin也不会带有服装或者装饰)
如何从mixmo 导出带skin的模型
要想
mixamo导出的模型是带皮肤的，那么我们就需要在上传模型时将模型的贴图都上传，打成一个zip包，这样上传后就会是一个带皮肤的模型，直接可以展示出模型的皮肤，且导出时选择withskin的模式，导出的模型即是模型 + 皮肤 + 动作的fbx，这样有一个很大的弊端，那就是导出的文件非常大，要比withoutskin的文件大很多
下面就细节一下上面的步骤：
- 首先你需要有一个
fbx文件的模型，和一个带有贴图的文件，如下：
animationGirl.vrm.textures这个文件就是之前下的贴图：
- 接下来选中两个文件打成
zip包，将zip包上传到mixmo，上传后就得到是带皮肤的样子
- 选择好你想要的动作，导出
withskin模式的fbx， 下面是添加到项目中样子：
为什么不推荐直接使用withskin直接导出的文件，那如果需要该怎么处理
不推荐直接使用
withskin直接导出的文件，因为导出的文件要比withoutskin的模式大10倍，如下图：
如果动作复杂，文件相对会越大，所以如果你需要一个基础模型，可以下载一个
TPose的模型，会小一下，其他动作的，就单导出without skin的就可以。
blender自定义模型
如果上面都不能达到你的期望，那就可以使用
blender来自己创建模型，这个也是一个桌面端软件，下载地址
自定义模型
blender是一个开源的三维计算机图形软件。非常适合于三维建模、动画制作、渲染、视觉效果、视频编辑等领域。提供了一个全面的工具集，其中包括多边形建模、雕刻、纹理绘制、粒子模拟、物理模拟、角色动画等功能。您可以使用Blender创建静态的三维模型，也可以制作具有复杂动画效果的电影、游戏和虚拟现实项目。Blender还提供了强大的渲染引擎，允许您以高质量渲染出真实感的图像和动画。它还支持视频编辑功能，剪辑、合成和调整视频，添加特效和转场效果。
格式转换
如果我们从网站下载下来的模型的动作或者材质不是我们想要的，也可以导入到
blender进行修改，可以把blender支持的格式导入，导出我们需要的格式。
从VRoid Studio 或者是从Ready Player 导出的模型都不是fbx ，不能直接导入到mixamo去添加动作，这时可以通过bleder这个中转站进行格式转换，glb的格式是可以直接导入，VRM格式的需要一个插件：插件地址，装到blender之后，就可以导入VRM文件了
获取贴图
在上一节，我们得知如果从
mixmo导出带skin的模型，那么我们就需要拿到模型的所有的材质贴图，当前在VRM导入时，可以获取到贴图，其他格式的文件如何获取贴图还有待调研。
选择一个VRM文件格式，右侧把“导出图像到文件夹”的这个选项勾选上：
在导入的同时，会在导入文件的当前文件夹生成一个.vrm.textures后缀的文件：
文件夹里包含模型的所有贴图：
拆分材质
我们从
VRoid Studio导出的模型，可以通过导入到blender里来转换模式，但是我们需要再导入到mixamo，所以在blender 里可以通过拆分材质，将贴图导出到一个单独的文件里，这样我们再导入到mixamo里的模型就不是白模了，这里需要用到一个插件Cats插件下载地址：
装好后，点到CASTS的菜单，点这个小扳手 🔧
把这个 Combine Same Materials 的选项取消：
点击Fix Model，开始修理：
等待修理完成后，点击Export Model，会有个提示，直接继续即可：
导出后即可再去mixamo添加动作
至此，我们已经完成了新手的模型创建，以及给模型添加一些简单动作，后续我们就使用这些模型来创建一些简单场景，看看我们创建的模型是否好用。
相关链接：
喜欢就加个关注吧！
转载自:https://juejin.cn/post/7268539219303694391