Cocos 技术派 | 3D 人物渲染详细教程

大掌教，从事游戏开发多年，精通 Cocos/Unity 等游戏引擎，熟练掌握安卓/iOS/H5等多种平台开发，发表过多个开源项目和 100 多篇原创博文，经验丰富，技术精湛，公众号「Cocos Creator 研究笔记」创始人。

假设你是一个新手，按照本文操作后，你可以跑起来一个 3D 人物模型，附带两个跳舞的动画可以欣赏。

文章要点如下：

• 3D 系统基础

• FBX 模型导入

• 配置模型参数

• 相机分组

• 2D 相机设置

• 添加 UI 节点

• 添加 3D 节点

• 设置灯光

• 设置平台接收阴影

• 设置 3D 相机

• 3D 场景编辑器

• 设置模型材质

• 设置模型产生阴影

• 设置相机位置

• 播放动画

• 增加 3D 动作

3D 系统基础

在 Creator 2.1 版本中，支持了 3D 模型渲染、3D Camera、3D 骨骼动画等 3D 特性，同时编辑器原生支持解析 FBX 格式的 3D 模型文件，不需要额外的导入流程。

详细见官方文档

https://docs.cocos.com/creator/2.1/manual/zh/3d/primitive.html

下面开始讲解如何导入 FBX 格式的 3D 模型。

FBX模型导入

这里讲解带贴图，带骨骼动作的 FBX 模型。

• 在资源管理器新建一个文件夹 DanceMode

• 将贴图文件夹 textures 和 FBX 模型文件同时拖入 DanceMode 目录下
  

配置模型参数

• 击资源管理器里面的模型 women，在属性面板设置缩放系数 400，点击应用按钮

• 点击属性检查器里面的动画菜单，预先计算骨骼矩阵打上勾，点击应用按钮

到这里模型导入，配置完成，现在就可以开始使用了。

相机分组

因为要加载 3D 模型，又有 2D 的 button，所以既有 3D，又有 2D，需要分组渲染，2D 渲染 UI，3D 相机渲染模型。

在菜单项目–>项目设置—>分组管理里面新增一个分组 UI。

2D 相机设置

将默认层级管理器里面的节点都删掉，保留一个 Main Camera。

• 将 Main Camera 的 Group 设置为 UI

• 将 Main Camera 的 Depth 设为 0，cullingMask 勾上 UI，clearFlags 去掉 Color
  

添加 UI 节点

• 添加两个按钮 samba 和 macarena，代码桑巴舞和马卡雷纳舞

• samba 按钮的 x 位置 -400，macarena 的 x 设为 400，两个按钮 y 坐标都为 0

• 给按钮 Group 设置为 UI

添加 3D 节点

• 在层级管理器，添加一个空节点和 Canvas 平级，命名为 root，在属性面板点击 3D，这样就变成了一个 3D 节点

• 给 root 节点添加灯光节点，命名为 Light

• 在 root 下添加平台，命名为 Plane

• 在 root 下添加摄像机，命名为 3D Camera，在属性面板上点击 3D 将其变为 3D 节点

• 将资源管理下的模型文件 women，拖入 root 下，引擎会自动解析模型

设置灯光

点击 Light 节点，设置属性说明：

• Type：光源类型，选择 DIRECTIONAL，平行光源

• Intensity：光照强度

• Shadow Type：阴影类型，选 HARD，硬阴影

• Shadow Resolution：阴影分辨率，值越大阴影越清晰。在 Shadow Type 不设为 NONE 时生效

• Shadow Darkness：阴影暗度，值越大阴影越暗。在 Shadow Type 不设为 NONE 时生效

• Shadow Min Depth：光源产生阴影的最小距离，如果物体跟光源的距离小于最小距离则不会产生阴影。在 Shadow Type 不设为 NONE 时生效

• Shadow Max Depth：光源产生阴影的最大距离，如果物体跟光源的距离大于最大距离则不会产生阴影。在 Shadow Type 不设为 NONE 时生效

• Shadow Depth Scale：光源深度缩放值，值越大阴影越暗。在 Shadow Type 不设为 NONE 时生效

• Shadow Frustum Size：平行光中视锥体的大小，决定平行光产生阴影的范围。仅在 Shadow Type 不设为 NONE，Type 设为 DIRECTIONAL 时生效
  

设置平台接收阴影

为了产生阴影，必须设置 Plane 接受阴影，勾上 Receive Shadows

设置 3D 相机

3D 相机，主要有两个属性要设置，具体如下

• cullingMask，只勾选 default

• 取消正交投影 Orhto，设置视野大小 Fov 为 40，这个值可以自行调整
  

3D 场景编辑器

点击场景编辑器上面的 3D 按钮，场景编辑器就切换为 3D 模式，如下图。

使用 alt+ 左键，就可以改变移动视野，滚轮缩放，右键旋转视角

设置模型材质

• 点击模型文件下的材质球，查看属性面板，默认是使用冯氏材质

• 设置材质贴图，将对应贴图拖到对应框内，有 3 个贴图，法线贴图，漫反射贴图，高光贴图

设置模型产生阴影

• 点击层级管理器里面的节点 Kachujin，查看属性面板

• 将 shadow Casting Mode 设置为 On，这样可以在 Plane 上看见模型的阴影了

设置相机位置

• 选中 3D Camera 节点，可以看到场景中相机有 3 个轴，拖拉可以改变相机位置

• 选中菜单下面的工具条，第二个旋转工具，摄像机会出现三个带颜色的圆，是用来调整节点 3 个方向的旋转角的，鼠标放在圆上拖动，就可以改变摄像机的旋转角

• 菜单面板下面，开启游戏预览，可以查看 3D 预览

播放骨骼动画

• 层级管理器选中模型根节点 RootNode，可以看到属性面板有一个 Clips 数组，将其值改为 1

• 将资源管理器下，模型文件里面的动画资源拖入对应的框，playonload 勾上

到这里就操作完了，选择浏览器运行，就能看到人物跳舞的画面了。

增加 3D 动作

目前 2.1.1 版本的动作系统，只有 Rotation 有了 3D，其他的动作都还没有支持 3D，应该在下一个版本支持。我们先试试跳一跳的动作。

• 增加两个按钮，取名 jumpLeft，jumpRight

• 脚本上增加两个回调，代码如下

效果如下：

一个完整的 3D 模型导入到渲染基本上就完成了。想要获取更多更详细的源码教程，可以关注大掌教创立的公众号「Cocos Creator 研究笔记」哦。