美文网首页
CocosCreator中,让场景中的3D物件显示在UI之上

CocosCreator中,让场景中的3D物件显示在UI之上

作者: 全新的饭 | 来源:发表于2022-12-07 13:48 被阅读0次

    示意

    3D物体显示在UI之上.gif

    用途

    如在做一些新手指引时,期望让玩家注意场景中指定物件。

    做法

    新建一个Layer,如Test


    image.png

    复制主相机,修改其如下参数

    1. priority:Canvas的相机的priority+1
    2. visibility:Test层
    3. clearFlags:Depth Only


      image.png
            this._refCam = director.getScene().getChildByName('Main Camera').getComponent(Camera);
            this._cam = instantiate(this._refCam.node).getComponent(Camera);
            this._cam.node.name = 'TestCam';
            this._cam.node.setParent(this._refCam.node.parent);
    
            const canvas = director.getScene().getChildByName('Canvas').getComponent(Canvas);
            const priority = canvas.cameraComponent.priority + 1;
            this._cam.priority = priority;
            this._cam.visibility = this.layer;
            this._cam.clearFlags = gfx.ClearFlagBit.DEPTH_STENCIL;
    

    将目标物件的Layer设置为Test

        this._targetNode.layer = this.layer;
    
        private get layer(): number
        {
            return 1 << Layers.nameToLayer('Test');
        }
    

    额外说明:

    1. 可以在初始时创建出该相机,在每次要用时激活其Node。注意激活前要设置其Pos、Rot、Scale,与主相机Node的对应系数保持一致。
            this._cam.node.setPosition(this._refCam.node.getPosition());
            this._cam.node.setRotation(this._refCam.node.getRotation());
            this._cam.node.setScale(this._refCam.node.getScale());
            this._cam.node.active = true;
    
    1. 设置目标物件的layer前,先暂存其设置前的layer,在后面不再需强调它时,将layer设置回去。

    相关文章

      网友评论

          本文标题:CocosCreator中,让场景中的3D物件显示在UI之上

          本文链接:https://www.haomeiwen.com/subject/adpnfdtx.html