【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 < 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) || 0
let z = (Number(pos[1]) - 1) || 0
if (x < minX) minX = x
if (x > maxX) maxX = x
if (z < minZ) minZ = z
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 < 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 } = maxData
parent.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) / 2
let z = ((Number(pos[1]) - 1) || 0) - (maxZ - minZ) / 2
box.setPosition(x, 0, z)
box.active = true
}
}
setAngle(angle) {
this.curAngle = angle
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, 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.node
const uuid = box.uuid;
let index = this.changeUids.indexOf(uuid)
let isChoose = index >= 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 < 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) >= 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.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);
}
}
原文地址:https://blog.csdn.net/K86338236/article/details/140303549
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!