原创

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://darkpalm.blog.csdn.net/article/details/90734991

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

首先说明一点,目前2.1.1的3d功能还不完善,商用项目请不要升级。
本教程和源码献给先吃螃蟹的同学。

前言

昨天我把Cocos Creator最新2.1.1 版的3D demo放出来了,但是官方文档比较欠缺,论坛也缺少相关文档,这里就把过程详细写一下,也算是一个吃螃蟹的新姿势,希望对大家有用。

3d系统基础

在 Creator 2.1 版本中,支持了 3D 模型渲染、3D Camera、3D 骨骼动画 等 3D 特性,同时编辑器原生支持解析 FBX 格式的 3D 模型文件,不需要额外的导入流程。
详细见官方的文档
下面开始讲解如何导入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
  • 取消正交投影,设置视野大小
    在这里插入图片描述

3D场景编辑器

点击场景编辑器上面的3D按钮,场景编辑器就切换为3D模式,如下图。
在这里插入图片描述
使用alt+左键,就可以改变移动视野,滚轮缩放,右键旋转视角

设置模型材质

  • 点击模型文件下的材质球,查看属性面板,默认是使用冯氏材质
    在这里插入图片描述
    在这里插入图片描述
  • 设置材质贴图,将对应贴图拖到对应框内,有3个贴图,法线贴图,漫反射贴图,高光贴图
    在这里插入图片描述

设置模型产生阴影

  • 点击层级管理器里面的节点Kachujin,查看属性面板
    在这里插入图片描述
  • shadow Casting Mode设置为On,这样可以在Plane上看见模型的阴影了
    在这里插入图片描述

设置相机位置

  • 选中3dCamera节点,可以看到场景中相机有3个轴,拖拉可以改变相机位置
    在这里插入图片描述
  • 选中菜单下面的工具条,第二个旋转工具,摄像机会出现三个带颜色的圆,是用来调整节点3个方向的旋转角的,鼠标放在圆上拖动,就可以改变摄像机的旋转角
    在这里插入图片描述
  • 菜单面板下面,开启游戏预览,可以查看3d预览
    在这里插入图片描述

播放动画

  • 层级管理器选中模型根节点RootNode,可以看到属性面板有一个Clips数组,将其值改为1
  • 将资源管理器下,模型文件里面的动画资源拖入对应的框,playonload勾上
    在这里插入图片描述
    到这里就操作完了,选择浏览器运行,就能看到人物跳舞的画面了。
    在这里插入图片描述

增加3D动作

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

  • 增加两个按钮,取名jumpLeft,jumpRight
  • 脚本上增加两个回调,代码如下
    jumpLeft() {
        this.node.runAction(cc.jumpBy(1, -400, 0, 300, 2));
    }

    jumpRight() {
        this.node.runAction(cc.jumpBy(1, 400, 0, 300, 2));
    }

效果如下:
在这里插入图片描述
源码地址:https://github.com/fylz1125/3Demo
好了,就写这么多了,欢迎关注我的公众号【Cocos Creator研究笔记】,可以下载最新源码。

文章最后发布于: 2019-06-01 23:51:02
展开阅读全文
0 个人打赏
私信求帮助

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 点我我会动 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览