[SOLVED] 3D texts renders over 3D models in my scene

Help & Support
1

My project uses the playcanvas api, not the editor. I want text in 3D space, that if behind another object will not seen. Here is the code snippet that makes the text object.

When I inspect the object in the browser debugger, the screenSpace shows as false. But, not having the screen component and having it seems to make zero difference, so I think I am creating the screenComponent, or adding it wrong.

    this.textAddress = new pc.Entity();
    this.textAddress.name = 'textAddress';

    this.textAddress.addComponent('screen',{
        enabled:true,
        screenSpace:false,
        scaleMode:"blend",
        scaleBlend:0.5,
        resolution:[1,1],
        referenceResolution:[1280,720],
    });
    this.textAddress.addComponent('element', {
        enabled:true,
        type: pc.ELEMENTTYPE_TEXT ,
        screenSpace:false,
        anchor:[0.5,0.5,0.5,0.5],
        pivot:[0.5,0.5],
        preset: "Center",
        width: 128 ,
        height: 64,
        fontAsset: this.font.font,
        fontSize: 12,
        lineHeight:14,
        margin:[-45,-15.776,-45,-16.224],
        alignment:[0.5,0.5],
        rect:[0,0,1,1],
        color: [1.0,1.0,1.0],
        opacity:1,
        autoWidth:true,
        autoHeight:false,
    });

    this.textAddress.element.text = "1001 Leet Street";

    this.pcSpaceEntity.addChild(this.textAddress);

    this.textAddress.setLocalScale(0.07, 0.07, 1);

Any insights into what Iā€™m doing wrong will be appreciated. Thanks.

2

By default, when you create a new element comment, it is added to the UI layer:

The UI layer is rendered after the World layer. So your text will overwrite 3D objects in the World layer. To place 3D text inside your 3D scene so that it does not overwrite 3D objects, do the following after you create the text entity:

this.textAddress.element.layers = [ pc.LAYERID_WORLD ];
1 Like
3

Awesome, thank you. That works great.