3D model in UI?

Hi is it possible to have 3d models as part of the UI eg. custom 3d buttons (cube, sphere, etc…) for UI instead of 2D?

Not part of the canvas, no.

However, you can use multiple cameras and render to a texture to potentially get somewhere close to the effect you want.

Also, you can have 3D elements that are not part of the UI canvas act as buttons and controls. You could parent them to the camera as well.

Yes you can, Im doing it currently

Add a SCREEN component and disable the “screen space” so it’s rendered on the 3D space. Place it on front of the main camera, or inside of the camera so it’s visible regardless of where the camera has moved.

Load the 3D model inside of the screen component - you’ll have to scale up x100 since the screen component uses a different scale. Remove “world” layer from the entity and set it to “UI”. Also make sure the camera has the “UI” layer on it.

Now you can make the 3D element interactive doing raycasts, OR what I do, place a transparent button on top of it and use it for the trigger, and play the 3D animation (eg, moving the button) if you have these

5 Likes

This is not working at all. Maybe I’m doing something wrong? I have the model on the UI layer, as a child of a screen entity with disabled “screen space”. The screen entity is in front of the camera. But the model seems transparent now.

Here’s a pic of my setup

Here’s an example of rendering 3D to a render texture and then using it for the UI element system Multiple Camera Layers | Learn PlayCanvas

This issue does pretty much the same thing Resolution Scaling | Learn PlayCanvas

Hm…the trick is simply to use 2 cameras and one additional layer? One dedicated camera to the 3d elements on the screen? Understood. Yeah, this works. It seems different than @Yohami_Zerpa’s solution though, which I couldn’t make it work.

EDIT

Yep got it working, pretty simple. I think I got the idea here. Every time I can’t get something to show up, add a new layer. Done.

Not necessarily a new layer each, but they do all need to be on a different layer to the world and UI. Maybe I will try to do an example project of this later.

Here’s an example I’ve whipped up today:

https://developer.playcanvas.com/en/tutorials/render-3d-world-to-ui/

Kapture 2021-11-26 at 16.17.03

2 Likes