[SOLVED] 3D sphere, 2D circle or flat image as a button

Hi, I have some drawer animation (open and close the drawer). I would like to have a 3d/2d button which will be opened/closed with the drawer. Even if I will do a 3d sphere I will show it flat without a shadow to look flatter. I have also an idea to put *.png image with transparency and use that as a button. Could you point me to some tutorials or documentation which would help me with that, because I don`t know where to start?

Thanks in advance.

Hi @mdesign!

If I understand you correctly, you can use an entity with an image element component.


To detect user input, be sure ‘Use Input’ is enabled.


1 Like

Thanks. How do an image which is always directed toward the camera? I would like to be always visible from the front. Is that possible?

You can add the script below to the entity.

var LookAtScreen = pc.createScript('lookAtScreen');

// initialize code called once per entity
LookAtScreen.prototype.initialize = function() {
    this.cameraEntity = this.app.root.findByName('Camera');    

// update code called every frame
LookAtScreen.prototype.postUpdate = function(dt) {
1 Like

Thanks a lot.

1 Like

Everything works super.

I have additional questions. How to do Image Element (button) would be visible through everything? I would like to be on a top layer. I`ve tried with UI and World layer without success.

What if I would like to change the image by hovering the mouse over the button (image element)? Could you give me some direction?

PlayCanvas | HTML5 Game Engine - This is how it looks.

I would like to set that buttons are visible through everything (I will hide them with logic later).

The second change is that I would like to set hovered button as a different image. I see there are only tint, sprite or static image options.

Could you help me with that?

As you can see above mesh is covering buttons and they are not visible through the meshes.

The way I would do it is to clear the depth buffer in a render layer before rendering the UI elements. I’ve done something similar here: [SOLVED] Render Object Over Another Objects with one camera - #5 by yaustar

The other way is to do camera stacking: Search results for 'camera stacking order:latest' - PlayCanvas Discussion

1 Like

Thanks, it works.

Could you tell me why button stages (sprite images) are white squares after moving the mouse from the hovering stage?

This is my project: PlayCanvas 3D HTML5 Game Engine

OK. I’ve solved it. The image in Element Component should be a sprite also not an image. If it’s an image and the hovering stage is a sprite then there is that error that I`ve posted above.

1 Like