Search Unity

3D Objects inside Canvas

Discussion in 'Unity UI (uGUI) & TextMesh Pro' started by darthtelle, Sep 2, 2014.

  1. darthtelle

    darthtelle

    Joined:
    Jan 7, 2014
    Posts:
    114
    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!
     
  2. Winklehner

    Winklehner

    Joined:
    Apr 12, 2013
    Posts:
    20
    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.
     
  3. darthtelle

    darthtelle

    Joined:
    Jan 7, 2014
    Posts:
    114
    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.
     
  4. runevision

    runevision

    Unity Technologies

    Joined:
    Nov 28, 2007
    Posts:
    1,615
    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.
     
  5. Cawas

    Cawas

    Joined:
    Jan 14, 2010
    Posts:
    121
  6. CremaGames

    CremaGames

    Joined:
    Mar 5, 2014
    Posts:
    59
    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).

     
  7. alonsoGarrote

    alonsoGarrote

    Joined:
    Jun 23, 2012
    Posts:
    25
    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,
     
  8. viju

    viju

    Joined:
    Dec 3, 2015
    Posts:
    2
    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.
     
  9. vratislavino

    vratislavino

    Joined:
    Mar 7, 2013
    Posts:
    12
    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.
     
  10. pavlito

    pavlito

    Joined:
    Nov 27, 2007
    Posts:
    136
    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.
     

    Attached Files:

    Last edited: Mar 31, 2017
  11. mrpmorris

    mrpmorris

    Joined:
    Dec 25, 2012
    Posts:
    47
    Works perfectly, thanks very much!
     
  12. Khene128

    Khene128

    Joined:
    Apr 17, 2018
    Posts:
    2
    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).
     
  13. RonNofar

    RonNofar

    Joined:
    May 16, 2018
    Posts:
    1
    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.
     
    Tkaewkunha likes this.
  14. LeighCT

    LeighCT

    Joined:
    Sep 6, 2019
    Posts:
    1
    Thank you very much for this tip. Good stuff here!