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

示意

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;

2. 设置目标物件的layer前，先暂存其设置前的layer，在后面不再需强调它时，将layer设置回去。