How to make a picture appear at the center of the player camera when an object is clicked?

Question

So I'm building a virtual gallery where the user is able to walk around and see pictures. Now when he clicks on a picture, I want that picture to pop up take up the screen and also display some metadata about the picture, maybe read a text file related to the picture? How do I do this? I'm very new to Unity so any help will be greatly appreciated. I'm using the below code to detect the gameobjects.

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.Events;
    
    public class ObjectClicker : MonoBehaviour
    {
        public LayerMask interactableLayermask = 6;
        UnityEvent onInteract;
        void Start()
        {
    
        }
       
    
         void Update()
        {
            RaycastHit hit;
            if(Physics.Raycast(Camera.main.transform.position, Camera.main.transform.forward, out hit, 2, interactableLayermask))
            {
                Debug.Log(hit.collider.name);
            }
        }
    }

```[I want to click on them and that image pops up and takes up the screen and displays some metadata about it.][1]


  [1]: https://i.stack.imgur.com/skz8H.png

score 0 · Answer 1 · answered Jul 01 '22 at 18:48

You can create a Panel (Unity UI), add some elements to it (a button, image, etc) and then create a UIManager object and script.

Now, you can create the methods for that UIManager:

bool showArtInfo (int index)
bool isPanelActive ()
void closePanel ()

And references for the Panel and its picture, text in the script. You can add an array of images and text to this object. Note indices matter! (or you can use another type of collection instead of array)

Finally, to each object to which you are assigning this ObjectClicker script, you can add a unique constant index so it can indicate who it is to the UIManager. Also add a reference field for UIManager so you can bind the UI Manager script to this guy (you'll have to bind for every gallery object you have - there are better ways if you have many objects, but this is simple).

Now, inside the Update() in ObjectClicker, you can add a call like:

if(Physics.Raycast(Camera.main.transform.position, Camera.main.transform.forward, out hit, 2, interactableLayermask)) {
    if (! uiManager.isPanelActive ()) {
        showArtInfo (myIndex);
    }
}

How to implement showArtInfo? You have to set the image from the array according to index, set text and enable the panel. You can also animate it to make it look nice.

How to implement isPanelActive? Report whether it is enabled or not, if animating note this might not be enough - experiment to see what is nice.

How to set image? I don't recall the details, but perhaps this might be useful: How do I change the source image of a Unity image component?

Also note, the Unity UI Panel does not need to be flat 2D, it can also be rendered in World Space, so it moves around with your 3D elements! There might be many better ways to do this! If working with many objects, you can store details on the objects themselves using custom components, and GetComponent on the gameobject when hit, and pass it along to the UIManager - it will be easier to manage.

How to make a picture appear at the center of the player camera when an object is clicked?

1 Answers1