版本：cocoscreator2.2.x
系统：windows
最近入职了一家 教育公司，改行去做课件了。。。。
经过入职前几周的煎熬，最近算是轻松了好多，有时间来写写分享
课件内容 为了能使 小朋友更好的认识立体图形，往往会在开发过程中加入3D效果，使课程内容更容易让小朋友理解。比如一些立体图形的 展开效果，和让小朋友 用不同的刷子 在立体图形每个面上涂色 改变面的颜色的一些互动。
这次分享一下 cocoscreator2d场景中 展开立体图形的效果和更换立体图形每个面的贴图。
罗嗦一下：
cocoscreator2d中的3d文档地址https://docs.cocos.com/creator/manual/zh/3d/
文档的内容不是很全面，仔细研究还是可以的。另外 做出来效果是有锯齿的，很不美观，我用了抗锯齿，效果不错，项目里有单独的文件。
展开效果思路如下：
在当前版本中cocoscreator好像是不支持 单独用一张纹理 渲染 立体图形mesh的某一个面，所以我才用了 "拼图"的方法来实现，即创建6个面（quad）然后根据需求 进行父子节点的拼接，设置合适的锚点，转换x,y,z角度，实现立体图形的展开效果。
关键代码：
/**滑动事件，改变立体图形展开形态 */
private changeSlider(){
//value 0代表闭合，1代表展开
let value = this.mSlider.progress
let angle = 90 * ((100 - value*100) / 100);
this.UpdateCube(angle);
}
private UpdateCube(angle:number){
let faces =this.mCubeFaces;
faces[0].eulerAngles = cc.v3(angle, 0, 0);
faces[2].eulerAngles = cc.v3(-angle, 0, 0);
faces[3].eulerAngles = cc.v3(0, -angle, 0);
faces[4].eulerAngles = cc.v3(0, -angle, 0);
faces[5].eulerAngles = cc.v3(0, angle, 0);
}
效果图：
每个面的纹理替换思路：
在点击事件中，通过射线机制，过滤出自己想要的面的节点，然后通过获取的MeshRenderer 设置想要的贴图材质。
关键代码如下
private touchStart(event:cc.Event.EventTouch){
if(this.mMaterials.length == 0 || this.mCubeFaces.length == 0) return
//获取所有射线相交的点
let touchPos = event.getLocation();
let ray = cc.Camera.main.getRay(touchPos)
const resultarr = cc["geomUtils"].intersect.raycast(this.node,ray)
/**过滤非需要的相交点 */
for(let one of resultarr){
if(one.node.name === "cube"){
let node = one.node;
this._index ++
if(this._index >= this.mMaterials.length){
this._index = 0;
}
this.updateFaceMaterial(node)
break;
}
}
}
/**更新材质 */
updateFaceMaterial(targetNode:cc.Node){
targetNode.getComponent(cc.MeshRenderer).setMaterial(0,this.mMaterials[this._index])
}
效果图：
项目里的资源都是我的摄影作品
另外喜欢开快车的同学也可以咨询我 如何更安全的 开快车
关注我的公众号 亮亮同学TT 发送3d展开换图。获取完整源码及资源。
下期 写一下threejs版本的。