3D-广告牌（指示牌）的实现

1、背景

　　因cocos引擎自带的billBoard组件不好用，所以自己利用引擎的例子系统制作了一个类似的效果。

2、使用方向：

　　可以使用在广告牌，指示牌，设置血条，任务名称等。

3、当前使用的位置：3D星球上的建筑物指示牌。

4、制作说明流程：

　　a、代码层面的书写

　@property({ type: Node, displayName: "饮料工厂" })

    build2: Node = null!;

　　//动态获取远程资源

 　assetManager.loadRemote(item.gameIcon, sf.onComplete?.bind(sf, item.gameItem));

　private onComplete(index: string, err: Error | null, data: AudioClip | ImageAsset): void {

        if (err) {

            console.warn("资源获取失败")

            return;

        }

        if (data instanceof AudioClip) {

            SoundManager.ins.addSound(data);

        }

        else {

　　　　//这个node上面是要绑定引擎自带的粒子组件的。

            let node = this.getElement(index);

            node && this.chaSprite(node, data._texture);

        }

    }

　　private getElement(index: string): Node {

        　　switch (index) {

            case GameItem.happyChick:

                return this.build1;

            case GameItem.cokeFactory:

                return this.build2;

            case GameItem.oilFactory:

                return this.build3;

            case GameItem.riceFactory:

                return this.build4;

            case GameItem.dairyFactory:

                return this.build5;

            case GameItem.paperFactory:

                return this.build6;

            case GameItem.detergentFactory:

                return this.build7;

            case GameItem.fruitFactory:

                return this.build8;

            default:

                break;

        }

        return null!;

    }

 

　　//给固定的节点替换材质

    private chaSprite(node: Node, texture: Texture2D): void {

        let mat = this.createMaterial(texture);

        let build = node.getChildByName("Node");

        let parti = build?.getComponent(ParticleSystem);

        parti?.setMaterial(mat, 0);

    }

 

　 //动态创建材质

    private createMaterial(texture: Texture2D): Material {

        const mat = new Material();

        mat.initialize({

            effectName: 'builtin-particle',

            defines: { USE_RGBE_CUBEMAP: true },

            technique: 1

        });

        mat.setProperty("mainTexture", texture);

        return mat;

    }

　b、引擎方面的设置

　　1、首先要创建一个空的node承接粒子

　　2.然后准备备用的资源材质，属性可以做如下设置

　　

　　3、创建粒子材质，选择透明通道类型（不会渲染成透明样式），这里创建的materialGuild.mtl材质

　　 

　　4、相应的node节点上面，绑定物理粒子组件，并做如下勾选设置，并把上面创建的材质绑定到粒子组件上。

　　

 　　

 

　　5、把对应的node转移到制定的模型上，基本可以了。