注意点

问题

美术随意绘制产品模型，然后随意导出，对于经验不够丰富的程序员而言，直接套用本课程代码，不一定能够正常加载美术导出的模型。

1. 如果对Three.js和Web3D毫不了解的情况下，建议第一次简单看下，后面可以再回过头来学习，这样体会更深。

2. 本节课主要是讲解3D美术和程序员协作的时候，模型导出要注意什么。本节课内容全是经验之谈，没有什么学习难度。如果现在没有实际项目，直接听一遍就行，不要求记住什么。如果正在做相关项目，自己也没有任何三维建模软件的使用经验，建议结合课程提醒和3D美术沟通，保证3D美术可以导出合适的模型即可。

学习对象：美术和程序员

PBR次时代模型

Substance一款专门用来生成PBR材质贴图的软件，比如生成模型的粗糙度贴图、金属度贴图、法线贴图...

实际开发，也不一定非要美术制作次时代模型，不过这样，如果有法线贴图，可以用简模代替精模，模型文件整体相对会小一些，美术通过金属度贴图、粗糙度贴图设置好模型的外观属性，对于程序员而言就省了很多麻烦。

如果没有美术提供的金属度贴图、粗糙度贴图，一般需要程序员自己设置three.js PBR材质*MeshPhysicalMaterial*的金属度、粗糙度属性值。

PS软件

PS在UI设计中经常使用，比如在3D模型绘制的时候，需要制作模型颜色贴图，3D美术也会用到。

模型制作安排

如果经常做类似项目，可以专门招聘一个有游戏美术背景的3D美术最好，如果偶尔做类似项目外包是最省事的。

注意点

同样一个产品模型，美术给的模型结构可能不同，模型的加载代码有些地方也会有所不同，这一点要注意。

1. 尺寸：模型尺寸大小和单位问题
2. 位置：如何居中
3. 姿态：产品模型相对坐标系xyz轴角度姿态
4. 材质：导出材质问题，比如材质颜色、金属度、粗糙度等属性值
5. 贴图：是否包含贴图路径或贴图数据
6. 手机按键、摄像头、手机壳可以美术绘图的时候分别用一个独立的Mesh表达，当然这些手机零部件美术可以用一个Mesh表达。
7. 关于颜色贴图、法线贴图、金属度贴图、粗糙度贴图、透明度贴图，Mesh可能包含全部纹理贴图，Mesh可能有其中部分纹理贴图，Mesh也能能没有任何贴图。
8. 3D模型用一个网格模型Mesh表达了全部手机外观结构，网格模型同时包含美术提供的颜色贴图、法线贴图、金属度贴图、粗糙度贴图和透明度贴图。当你看到有金属度贴图和粗糙度贴图，就可以判断这是一个PBR次时代模型。
9. 必须：需要单独改变颜色、金属度、粗糙度等材质属性的零件，必须是一个独立的Mesh，不能与其它的部位合成一个Mesh。
10. 必须：凡是需要程序员在代码中查询找到，并操作的对象，必须约定命名，其它随意
11. 可选：不单独的操作的部件，可以单独绘制，可以合在一起
12. 可选：法线贴图、金属度贴图、粗糙度贴图等，有更好，比如法线贴图有了，模型顶点数量更少，加载更快，渲染更快。

关于模型尺寸大小和单位问题

在对于Three.js而言，并没有什么尺寸单位概念，Three.js模型几何体数据都是数字，至于单位要看你的web应用如何定义。一般导出的gltf格式模型也不会包含单位信息，比如three.js加载一个.gltf格式长15厘米的手机模型，美术按照厘米导出，three.js解析出来尺寸就是数字15，按照毫米为单位导出，three.js解析出来尺寸就是数字150。

一般美术进行三维建模的时候，有些美术可能不会关心单位问题，可能凭感觉绘制好一个模型然后导出。这时候你用Three.js代码直接加载要面临一个问题，不知道模型的尺寸大小。所以美术尽量按照某个单位进行模型的绘制，比如按照毫米为单位绘制一个智能手机，然后导出给程序员即可。

产品模型导出位置和姿态

模型导出要注意两方面问题，一方面是位置是否居中，另一方面是模型姿态角度问题。

1. 位置：手机模型的几何中心尽量和三维坐标系世界坐标原点重合
2. 姿态：手机长度方向、宽度方向、厚度方向最好分别和x、y、z轴平行或垂直(一般美术的建模习惯也是如此)

模型材质包含贴图路径或贴图

贴图路径，文件是否可以正常包含贴图路径，如果可以最好，这样程序员加载模型的时候，自动加载贴图。

有些软件导出PBR材质可能会存在一些小问题，比如全部贴图无法正常导出，这时候可以选择导出的模型不包含贴图，然在在代码中手动设置贴图。

程序员手动设置贴图的话，如果模型非常多，程序员不太好区分哪个模型对应哪个贴图，可以让美术把贴图名称前面都设置一个模型名称一样的前缀字符，这样也快成批量加载。

材质：导出材质问题，比如材质颜色、金属度、粗糙度等属性值

不同三维模型软件导出gltf格式模型，模型中Mesh对应的材质的金属度、粗糙度等属性不一定能够正常携带，这时候就需要程序元素在代码中手动设置PBR材质MeshPhysicalMaterial的相关属性。

不同三维建模软件导出GLTF模型整体思路

每个美术或说每个webgl前端用的三维建模软件可能并不相同，比如blender、3dmax、maya都有可能。如果想导出gltf格式模型，整体思路，要么三维软件，本身支持，如果不支持，就要看看有没有导出gltf文件的相关插件。

• 比如最新版的blender，不用任何插件，支持直接导出gltf模型文件，如果是老版本需要安装插件。
• 比如3dmax，2021及其之前，如果想导出gltf需要安装插件

特殊情况：迂回导出

如果一个三维软件，不能直接导出gltf格式模型，也没有gltf相关插件，可以先导出一个比较常见的格式，然后使用能导出gltf格式的三维模型转格式。

bledner中转站

建议，可以任何三维建模软件导出fbx、dae、obj等任何常见格式，导入到blender中，然后在通过blender导出gltf格式模型。

作为程序员你可以让美术安装下blender，不管他用什么3D建模软件绘制模型，最后导出的时候，都可以通过blender中转一下，导出你需要的gltf格式模型。

模型预览小工具

1. gltf-viewer：https://gltf-viewer.donmccurdy.com/
2. three.js editor:https://threejs.org/editor/
3. vscode预览gltf模型：vscode搜索gltf，可以看到glTF Tools的工具