What is the best way to display 3D models as UI elements?

I am trying to display 3D models on the canvas layer (for an inventory system) and I can’t figure out the best way to do this. So far I’ve read that the best solution is to change the canvas to World Space but then I can’t use anchors and the UI moves around as the camera follows the player. Changing it to world space just to display 3D models on a UI level feels clunky. Is there a more efficient way?

1 Like

You could try a Screen space - camera and add the 3d model into the actual UI or use RenderTextures and render the 3d models to textures which can then be used in the UI.

RenderTexture is probably the best way. Add it to the UI with a RawImage component.

7 Likes

A render texture is certainly one way to go, however remember that UI is rendered on a 3D scene, usually best not to do it the other way round unless you are displaying additional 3D elements on top of a canvas which is already displayed over another 3D scene (aka an overlay)
A simply answer is to have a camera rendering on screen where you want the 3D item as normal, then position your UI on or around it, don’t be afraid to use multiple UI Canvases for depth.

Many ways to cut the cheese as it were, RenderTexture works well for static 3D elements (simplest way), blending the UI in a 3D scene works better for more active elements. As always comes down to performance as a Rendertexture generally causes the UI Canvas to be redrawn (in my view)

1 Like

The problem with using 3d elements in your canvas is that they wont respect the anchoring system so you may find they don’t always align with the UI elements unless you use a world canvas which you didn’t want to.

2 Likes

I think the issue is that I want the 3D objects to be positioned the same way UI elements are so that I can easily place them on a UI object (they are being used as icons). I also want the UI elements to react to mouse clicks and what not. This means I can’t just use a render texture right? Or can I use a render texture just for the 3D objects and regular UI elements for the background that will be clickable?

A render texture can be a regular UI element. Use the RawTexture UI element and put the render texture into the texture slot.

1 Like

So render each model individually as a texture or render the model and the button to click as a texture?

Here is an example(attached)
If your objects don’t need to animate then you can just render the texture once and turn the camera off.
If you have lots of objects then maybe only animate the selected object and the others render once or alternate the rendering so only one RTT is done per frame etc.

2226628–148323–rawimage example.unitypackage (13.1 KB)

8 Likes

In 5.2 you can specify a mesh to be a UI element :slight_smile: That will get you a long way :slight_smile:

5 Likes

Great, thanks @Tim-C ! now I got even more stuff to dig back in to :stuck_out_tongue:

Thanks for the update, missed that in the release notes.

I’m also interested in showing a 3D model in the UI.
I went through the 5.2 feature list ( https://unity3d.com/unity/whats-new/unity-5.2 )

and found the entry Tim C was talking about:

“UI: CanvasRenderer now takes a Mesh instead of List this allows for the use of imported meshs as part of the UI”

Beside from the weird description “now takes a Mesh instead of List”, it is unclear how to make this work. The CanvasRenderer component has no fields in the inspector you can assign to. Also from code there’s seems to be no way to make this work (no applicable functions).

Any pointers on how this works would be appreciated :slight_smile:

1 Like

“UI: CanvasRenderer now takes a Mesh instead of List this allows for the use of imported meshs as part of the UI”

I cant find this also. Any help appreciated!

Ok so using canvas set to screen space camera works

Did anyone ever figure this out?

set canvas set to screen space camera. put obj as child of in canvas. Only problem is you have to deal with crazy scales fro objs.

Does anyone know if rect transform for changing screen res on devices will work?

I went ahead and used the screen space camera and have one problem. I have my 3D objects attached to UI elements as children that are part of a scrollview.

The UI elements respect the viewport mask, but the 3D objects do not. This makes the 3D objects fly over the top of header elements that are above the scrollview.

Is there any way you can think of to make the 3D objects also respect the viewport mask?

OK guys, so when I want to have a plenty of rendered objects on UI, do I have to create such a big number of render textures and render cameras on each object that will be on UI element? I think there could be a problem with fps

2 Likes

Hi, I know this an old thread, but this is not strictly true. You can add a Rect Transform to the 3d objects. You will get a warning and it will overwrite the default transform but the anchoring works fine if you do. You still have to use Screen Space - Camera render mode for the canvas though. Peace

2 Likes

I need the exact same. Could you find any solution?
(working on a character selection menu like crossy road with rotating modals)

I am curious about how games like Raven Field deal with this problem. If you check the weapon selection menu or the killing popups, you can see the models are realtime rendered. Can’t imagine hundreds of render textures in a scene, even with low res.

1 Like