版权申明：

本文原创首发于以下网站，您可以自由转载，但必须加入完整的版权声明

博客园：https://www.cnblogs.com/Mogoo…
csdn 博客：https://blog.csdn.net/nmjkl001/
知乎：https://www.zhihu.com/people/…
简书：https://www.jianshu.com/u/954…
segmentfault：https://segmentfault.com/u/mo…

最后效果

源码分享

• 以下步骤详细内容可能跟源码中有出入，一切以源码为准
• CocosCreator 版本：2.1.2，务必使用大于此版本的引擎运行
• 源码地址：https://github.com/MogooStudio/Runningfloor

简单步骤

1. 创建工程（略）

2. 材质 box

• 创建材质 box
• 设置材质 box 的 effect 属性为 builtin-unit（内置的无光照）
• 勾选 USE_DIFFUSE_TEXTURE（实用漫反射纹理），点击应用
• 拖动 texture 纹理到 diffuseTexture 中

3. 预制件 box

• 创建 3D 节点 Box，命名为 box
• 创建 box.js 脚本，脚本内容见源码
• 拖动 box.js 脚本到预制件 box 下
• 拖动材质 box 到预制件 MeshRanderer 组件下面的 Materials 中
• 拖到 prefab 文件夹下生成预制件

4. 管理节点 mgr

• 创建空节点 mgr，设置节点为 3D 节点

• 设置节点 x 左右为 480，y 坐标为 300，z 坐标为 0

5. Canvas 节点

• 创建 main.js 脚本，脚本内容见源码
• 拖动 main.js 脚本到 Canvas 节点下
• 拖动 mgr 节点到 main.js 脚本组件相应中
• 拖动 box 预制件到 main.js 脚本组件相应中

6. 摄像机

• 设置主摄像机的模式改为 3D，z 坐标设置为 800
• 去掉 ortho 勾选，设置 fov 为 60

我的联系方式：

QQ：2161044579
邮箱：mogoostudio@outlook.com
Github：https://github.com/MogooStudio