3D Objects inside Canvas

Inside my Canvas I'm trying to display a 3D model to depict which player's turn it is alongside some text. My canvas is set to Screen Space - Overlay. My 3D game object is displaying exactly how I want it in the Editor view, but it won't appear in game.

Is is possible to have 3D game objects inside a canvas to use within UI? Or have I got the wrong end of the stick?

If it itsn't possible, is there a way to lay a game object over the top of the UI?

Thank you!

 

I think there was already a similar question and the answer was to use another camera or a render texture. I would like to do the same as you and assign some 3D objects to the canvas as using an additional camera/render texture influences significantly the performance.

 

Thank you, do you have a link to this thread? I would prefer to keep it all in the same canvas object as well, but if there is another solution (for now), it'll have to do. It could make a huge difference with, for example, displaying current characters or invetory systems etc.

 

Yes, you can use the Screen Space - Camera mode in the Canvas for this. See the manual Overview and Reference pages about the Canvas for more information.

 

Try this: http://answers.unity3d.com/question...hored-to-the-new-ui-canvas.html#answer-835244

 

I'm also trying to do this. I need to have a UI Background, a 3D Model on top of the background and a UI Button on top of the 3D Model. Is this possible without using two canvases?

It would be great to have a UI Element like Image that could draw a 3D Object.

In this example, I want the button to be on top of the Coin (3d model).

 

How can this be done_?,
I tried using an UI layer camera with higher deph, then setting a cube on that layer, using a screen space camera canvas, it doesnt work..., tried scalling the cube, moving the canvas location, still nothing, any ideas_?,
Regards,

 

One way I can think of is to create a vertical 3D plane for the background, place the 3D object in front of it and the button with a transparent canvas.

 

It's older post, but it cound still help.

Don't forget to set Clipping planes - near on camera to something negative or move camera to some negative Z.

 

It's quite easy actually.

1. Create a Canvas and set its render mode to Screen Space - Camera.
2. Add a camera reference to the canvas.
3. Add a Button to the canvas.
4. Add a 3d model as the button child.
5. Increase model's scale to something like 100, 100, 100.

#2 and #5 are most probably the reasons you cannot see the model.

Note:
If you move the button element, the model will follow but it will be rendered in perspective if your camera is using perspective. You can change to orthographic to avoid this, but then you're limited to linear rendering path.

Also, if you have another canvas with a a screen space - overlay render mode, the model (as far as I know) cannot be rendered in front of it. Makes sense, anyway

Edit:
You can play around with canvas settings to get the most desired results (like, resizing etc).
You might also consider, creating a script that will change the scale of the model according to the size of the button so bigger buttons get bigger models.

Alternatively, you can create an empty canvas object with a rect transform, add the mesh filter and renderer and play with the rect transform scale, but I found the first method (shown in screenshots) to be easier.

 

Works perfectly, thanks very much!

 

How to find model's scale that make the 3d Object has specific size on the canvas like width = 160, height = 50? I want to make a 3d Object ui has exactly the same width and height as a RectTransform Object (Button).

 

To make a 3D Object scale and move correctly with UI all I did was place it appropriately at 1920x1080 resolution then OnEnable get current localPosition and localScale of the 3D object, then find the ratio of the current screen size to the original (Screen.height / 1080f) and multiply the two together to get the new localPosition and localScale.

Example:

Code (CSharp):

1. [SerializeField] GameObject childObjectInUI;
2.  
3. Vector3 originalObjectScale;
4. Vector2 originalObjectPosition;
5.  
6. void Start() {
7.     originalObjectScale = childObjectInUI.transform.localScale;
8.     originalObjectPosition = childObjectInUI.transform.localPosition;
9.  
10.     // This part can go anywhere \/
11.     childObjectInUI.transform.localScale = (Screen.height / 1080f) * originalObjectScale ;
12.     childObjectInUI.transform.localPosition = (Screen.height / 1080f) * originalObjectPosition;
13.  
14.     // Note that the 1080f is only there if you originally placed the 3D object while game resolution was set to 1920x1080
15.     // This can be set up on any resolution but be sure to change the 1080f to whatever screen height you are using
16. }

If this doesn't make sense its because I'm tired XD

Extra note: This is after setting the canvas to "Screen Space - Camera" and the camera to "Orthographic"
Extra extra note: localPosition is used because it is assumed that the object is a child of a UI element
Extra extra extra note: localPosition is scaled in Vector2 so it doesn't affect the Z coordinate.

 

Thank you very much for this tip. Good stuff here!

 

A W E S O M E <3

 

This worked for me! It wasn't show up initially due to the scale being too small, pt. 5. helped a lot!

 

This video explains it nice and quickly:

 

Traditionally you'd have a 3D viewer gui object in code. Unity doesn't, instead use canvas, canvas scaler, canvas grid, etc. to align things when nessesary, adding a 3d object to a canvas with a canvas grid layout, and canvas group, I have done personally with ease.

 

Amazing!!! Thanks a lot!

 

works perfekt many thanks

 

How to Pick 3D gameobject in Canvas?