摘要
CocosCreator 的节点上的颜色属性对 3D 模型是不起作用的，要想修改模型颜色就要对材质操作，而材质是基于 effect 渲染的。那么怎么改变模型颜色呢？
正文
看看效果
素材制作
打开 Photoshop 软件，我们新建一个 200 * 200 的画布。
然后填充黑色，加白色渐变的边。复制，旋转到四边。
好了，最终图片。
内置effect
让我们新建工程，场景。在资源管理器新建一个材质，选择 builtin-unlit （无需光照）并拖入素材。
Canvas 下新建一个 3D 物体 New Box。设置材质，绑上脚本。
改变颜色脚本
box.js
代码语言：javascript复制cc.Class({
extends: cc.Component,
properties: {
},
onLoad () {
// 获得组件
this.m = this.getComponent(cc.MeshRenderer);
// 定义初始颜色
this.color = {
r: 100,
g: 0,
b: 0
};
// rgb颜色缓动
cc.tween(this.color)
.repeatForever(
cc.tween()
.to(0.8, {r: 255, g: 0, b: 0})
.to(0.8, {r: 0, g: 100, b: 0})
.to(0.8, {r: 0, g: 255, b: 0})
.to(0.8, {r: 0, g: 0, b: 100})
.to(0.8, {r: 0, g: 0, b: 255})
.to(0.8, {r: 100, g: 0, b: 0})
)
.start();
},
setColor () {
let color = cc.color(this.color.r, this.color.g, this.color.b, 255);
// 修改材质的属性
this.m.sharedMaterials[0].setProperty('diffuseColor', color);
},
update (dt) {
this.setColor();
}
});好了，我们可以开心的把它拖成预制体了。
管理脚本
层级管理器，注意 boxMgr 空节点要转为 3D。
在 Canvas 节点上绑定脚本。通过脚本初始化很长的路，然后在 update 里模拟前进运动。main.js
代码语言：javascript复制cc.Class({
extends: cc.Component,
properties: {
mgr: cc.Node,
box: cc.Prefab
},
onLoad () {
this.init();
},
init () {
for (let i = -1; i <= 1; i ) {
for (let j = -60; j <= 10; j ) {
let b = cc.instantiate(this.box);
this.mgr.addChild(b);
b.x = 110 * i;
b.z = 150 * j;
b.y = -50;
}
}
},
update (dt) {
this.mgr.z = 500 * dt;
if (this.mgr.z > 300) {
this.mgr.z = 0;
}
}
});摄像机调整
最后不要忘记了摄像机要切换为 3D 摄像机。设置下投影方式，然后调节下 z 轴位置为 800。
结语
effect，材质的引入将使得游戏特效制作更加方便。
CocosCreator v2.1.2 的 3D 模型合批还不支持。DC 较高。CocosCreator v2.1.3 和 v2.2.0 应该能解决这个问题。
