【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 = 999
        let maxX = -999
        let minZ = 999
        let maxZ = -999
        for (let i = 0; i  maxX) maxX = x
                if (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  { value.active = false })
        let boxArr = boxString.split("|")
        for (let i = 0; i = 0
            if (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) || 0
        this.choose_type = index;
        for (let i = 0; i = 0
                this.setMaterial(box, showChoose)
            }
        }
    }
    /**
     * 
     * @param box 需要改变材质的节点 
     * @param index  是否是选择
     */
    setMaterial(box, showChoose = false) {
        let showArr = showChoose ? this.changeMatChoose : this.changeMat
        let showArr2 = showChoose ? this.changeMatChoose2 : this.changeMat2
        const 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.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 
                this.isPlay = false;
                this.unschedule(func);
            }
        }
        this.schedule(func, 0.01, count);
    }
}