【cocos creator】2.4.x实现简单3d功能，点击选中，旋转，材质修改，透明材质

demo下载：（待审核）
https://download.csdn.net/download/K86338236/89527924

const { ccclass, property } = cc._decorator;const enum box_color {NORMAL = 0,DASHED_LINE = 1,//虚线TRANSLUCENT = 2,//半透明
}@ccclass
export default class main extends cc.Component {@property(cc.Node)boxNode: cc.Node = null;@property(cc.Node)layerNode: cc.Node = null;/**层的父节点 */@property(cc.Node)layerRootNode: cc.Node = null;/**点击检测射线 */@property(cc.Node)touchNode: cc.Node = null;/**普通的颜色 */@property([cc.Material])changeMat: cc.Material[] = [];/**普通颜色第二层，半透明用 */@property([cc.Material])changeMat2: cc.Material[] = [];/**选择状态的颜色 */@property([cc.Material])changeMatChoose: cc.Material[] = [];@property([cc.Material])changeMatChoose2: cc.Material[] = [];/**向左旋转45 */@property(cc.Button)leftBtn: cc.Button = null;/**向右旋转45 */@property(cc.Button)rightBtn: cc.Button = null;/**分离、合起 */@property(cc.Button)divideBtn: cc.Button = null;/**已经修改颜色uid物体 */changeUids: string[] = [];/**当前分离状态，是否分离 */curDivideState: boolean = false;/**当前角度 */curAngle: number = 0;/**是否动作中 */isPlay: boolean = false;/**当前角度 */choose_type: number = 0;// onLoad () {}start() {this.setAngle(-15)cc.director.getPhysics3DManager().enabled = true;this.touchNode.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);let boxArr = ["1,1|1,2|1,3|2,1|2,2|3,1", "1,1|1,2|2,1", "1,1"]let minX = 999let maxX = -999let minZ = 999let maxZ = -999for (let i = 0; i < boxArr.length; i++) {const element1 = boxArr[i];const element = element1.split("|")for (let j = 0; j < element.length; j++) {const element2 = element[j];let pos = element2.split(",")let x = (Number(pos[0]) - 1) || 0let z = (Number(pos[1]) - 1) || 0if (x < minX) minX = xif (x > maxX) maxX = xif (z < minZ) minZ = zif (z > maxZ) maxZ = z}}let maxData = { minX, maxX, minZ, maxZ }this.creatLayer(boxArr, maxData)this.onShowType(null, 0)}creatLayer(boxArr = [], maxData) {this.layerRootNode.children.forEach((value) => { value.active = false })for (let i = 0; i < boxArr.length; i++) {const element = boxArr[i];let layer = this.layerRootNode.children[i] || cc.instantiate(this.layerNode)layer.parent = this.layerRootNode;layer.name = "layer" + (i + 1)this.creatBox(element, layer, maxData);layer.y = i - (boxArr.length - 1) / 2;// layer.y = i layer.active = true}}creatBox(boxString = "", parent: cc.Node, maxData) {const { minX, maxX, minZ, maxZ } = maxDataparent.children.forEach((value) => { value.active = false })let boxArr = boxString.split("|")for (let i = 0; i < boxArr.length; i++) {const element = boxArr[i];let pos = element.split(",")let box = parent.children[i] || cc.instantiate(this.boxNode)box.parent = parent;box.name = `box${pos[0]}_${pos[i]}`let x = ((Number(pos[0]) - 1) || 0) - (maxX - minX) / 2let z = ((Number(pos[1]) - 1) || 0) - (maxZ - minZ) / 2box.setPosition(x, 0, z)box.active = true}}setAngle(angle) {this.curAngle = anglelet quat: cc.Quat = new cc.Quat();let oldVe: cc.Vec3 = new cc.Vec3();let oldQuat: cc.Quat = new cc.Quat();this.layerRootNode.getRotation(oldQuat);oldQuat.toEuler(oldVe);this.layerRootNode.setRotation(cc.Quat.fromEuler(quat, oldVe.x, angle, oldVe.z));}/**检测射线 */onTouchStart(event) {let touchLoc = event.touch.getLocation();let ray = this.node.getChildByName("3D Camera").getComponent(cc.Camera).getRay(touchLoc);let maxDistance = 1050;let rayColliderGroupName = "3d";const result = cc.director.getPhysics3DManager().raycastClosest(ray, rayColliderGroupName, maxDistance, false);if (result) {let box = result.collider.nodeconst uuid = box.uuid;let index = this.changeUids.indexOf(uuid)let isChoose = index >= 0if (isChoose) {this.changeUids.splice(index, 1)this.setMaterial(box, false)return;}this.setMaterial(box, true)this.changeUids.push(uuid)}}/*** * @param event * @param index  0.普通 1.虚线 2.半透明*/onShowType(event, index = 0) {index = Number(index) || 0this.choose_type = index;for (let i = 0; i < this.layerRootNode.children.length; i++) {const element = this.layerRootNode.children[i];for (let j = 0; j < element.children.length; j++) {const box = element.children[j];const uuid = box.uuid;const showChoose = this.changeUids.indexOf(uuid) >= 0this.setMaterial(box, showChoose)}}}/*** * @param box 需要改变材质的节点 * @param index  是否是选择*/setMaterial(box, showChoose = false) {let showArr = showChoose ? this.changeMatChoose : this.changeMatlet showArr2 = showChoose ? this.changeMatChoose2 : this.changeMat2const ren = box.getComponent(cc.MeshRenderer);ren.setMaterial(0, showArr[this.choose_type]);const ren2 = box.getComponentInChildren(cc.MeshRenderer);if (ren2 && showArr2[this.choose_type]) {ren2.setMaterial(0, showArr2[this.choose_type]);ren2.node.active = true}else if (!showArr2[this.choose_type]) {ren2.node.active = false}}/**向左旋转 */onLeftRotate() {this.roatateFun(true);}/**向右旋转 */onRightRotate() {this.roatateFun(false);}/**分离 合并 */onDivide(event, t = 0.2) {if (this.isPlay) return;this.isPlay = true;let lb = this.divideBtn.node.getComponentInChildren(cc.Label);for (let i = 0; i < this.layerRootNode.childrenCount; i++) {const node = this.layerRootNode.children[i];let y = node.y;if (!this.curDivideState) y *= 2;// 分离else y /= 2;// 合并node.stopAllActions()cc.tween(node).to(t, { y: y }, { easing: 'sineOut' }).call(() => {this.curDivideState = !this.curDivideState;this.isPlay = false;if (this.curDivideState) lb.string = "合";else lb.string = "分";}).start();}}/**旋转 */roatateFun(left: boolean, angel = 9) {if (this.isPlay) return;this.isPlay = true;let count = 10;let func = () => {count--;if (left) this.curAngle -= angel;else this.curAngle += angel;let quat: cc.Quat = new cc.Quat();let oldVe: cc.Vec3 = new cc.Vec3();let oldQuat: cc.Quat = new cc.Quat();this.layerRootNode.getRotation(oldQuat);oldQuat.toEuler(oldVe);this.layerRootNode.setRotation(cc.Quat.fromEuler(quat, oldVe.x, this.curAngle, oldVe.z));if (count <= 0) {this.isPlay = false;this.unschedule(func);}}this.schedule(func, 0.01, count);}
}