[Unity3D-UGUI Application] (4) Using UGUI pop-up window display model and pop-up window model interaction

Recommended reading

Hello everyone, I am a Buddhist engineer☆The peaceful little magic dragon☆, Unity development skills are updated from time to time. If you find it useful, remember to click three times.

I. Introduction

Some time ago, I shared the properties and usage methods of each component of UGUI, such as Text, Button, Image, Toggle, InputField, ScrollView, etc.

Then he shared some principles of UGUI, such as UGUI’s rendering mode, UGUI’s zoom calculation, UGUI’s drawing point positioning, UGUI’s automatic layout, etc.

I believe that everyone will have a more comprehensive understanding of UGUI after reading it.

Next, we will continue to share examples of application of UI components of UGUI.

This is the fourth article in this series:
[Unity3D-UGUI Application] (1) Using Text to implement progress waiting animation
[Unity3D-UGUI Application] (2) Using Image to implement progress bar animation
[Unity3D-UGUI Application] (3) Using UGUI to implement hierarchical menus
[Unity3D-UGUI Application] (4) Using UGUI pop-up window display model and pop-up window model interaction
[Unity3D-UGUI Application] (5) Use Button to complete the function of moving the mouse to the UI to display text
[Unity3D-UGUI Application] (6) Screen Adaptation (Multiple Allocation Rate Adaptation)
[Unity3D-UGUI Application] (7) UGUI realizes free dragging of windows
[Unity3D-UGUI Application] (8) Image realizes drawing lines, triangles, squares and circles

2. Introduction and renderings

Children’s Shoes brought me a question, whether it is possible to display a 3D model on the UI and interact with it, and also have a pop-up window.

Then share how to display the model in a pop-up window.

Here we mainly use the RawImage display texture component of UGUI to map the camera information to the UI, and then interact with the model, but on the UI it is like controlling the UI.

Rendering:

source code:
https://download.csdn.net/download/q764424567/20366501

3. Realization

3-1. Set up the scene

We first build a UI scene:

Add Button components to 4 images to respond to click events:

Change the names of the four Images, which will be used when writing the following code:

First move the camera’s position to (0,1,-10) and return the rotation to zero:


Then place the gun in the appropriate position:

Because the position, rotation and scaling of the gun have been changed, there will be a rotation problem when rotating the object, so you need to set a parent object with a rotation of 0 for each of them:

3-2. Set up pop-up windows

Next, you need to set a highest-level Panel as the pop-up window, that is, put the pop-up window Panel into the last rendering:

Set the UI of the pop-up window:

The UI can be arranged casually. The most important thing is to have a RawImage to display the model, and then create a new Render Texture:


Drag the new Teture object into the TargetTexture property of the camera component:
After that, drag the Teture object into the Texture property of the UI’s RawImage object:

As you can see, the image from the camera can already be seen in the UI:

For better display, set the properties of Main Camera:

3-3. Write UI response code

Create a new script ButtonManager.cs:

using UnityEngine;
using UnityEngine.UI;

public class ButtonManager : MonoBehaviour
{
    public Button btn1;
    public Button btn2;
    public Button btn3;
    public Button btn4;

    public Button CloseBtn;

    public GameObject popupPanel;//pop-up window

    public GameObject[] Gun;//Four models

    // Start is called before the first frame update
    void Start()
    {
        btn1.onClick.AddListener(()=>BtnOnClickEvent(btn1.name));
        btn2.onClick.AddListener(()=>BtnOnClickEvent(btn2.name));
        btn3.onClick.AddListener(()=>BtnOnClickEvent(btn3.name));
        btn4.onClick.AddListener(()=>BtnOnClickEvent(btn4.name));
        CloseBtn.onClick.AddListener(ClosePanel);
        popupPanel.SetActive(false);
    }

    private void BtnOnClickEvent(string btnName)
    {
        popupPanel.SetActive(true);
        for (int i = 0; i < Gun.Length; i++)
        {
            Gun[i].SetActive(false);
        }
        switch (btnName)
        {
            case "gun1":
                Gun[0].SetActive(true);
                break;
            case "gun2":
                Gun[1].SetActive(true);
                break;
            case "gun3":
                Gun[2].SetActive(true);
                break;
            case "gun4":
                Gun[3].SetActive(true);
                break;
            default:
                break;
        }
    }

    private void ClosePanel()
    {
        popupPanel.SetActive(false);
    }
}

Drag the script onto the camera and drag the corresponding object into the corresponding card slot:

Run the program and you can see the effect:

hint:
If it prompts that there is no camera rendering, you can create a new Camera.

3-4. Implement model interaction

Next, implement interactions such as dragging, amplifying, and rotating the model.
Create a new script ModelManager.cs:

using UnityEngine;

public class ModelManager : MonoBehaviour
{
    private Vector2 tempXY;
    private Vector2 targetAngles;
    private Vector3 currentAngles;

    public GameObject Gun; //Same parent object
    public float rotateSpeed = 1;
    public float moveSpeed = 1;
    public Camera userCamera;

    void Update()
    {
        ModelControl();
    }

    public void ModelControl()
    {
        if (Input.GetMouseButton(0))
        {
            tempXY.x -= -Input.GetAxis("Mouse X") * moveSpeed;
            tempXY.y += Input.GetAxis("Mouse Y") * moveSpeed;
            Vector3 temp = new Vector3(tempXY.x, tempXY.y, 0);
            Gun.transform.position = temp;
        }
        else if (Input.GetMouseButton(1))
        {
            targetAngles.y -= Input.GetAxis("Mouse X") * rotateSpeed;
            currentAngles = Vector3.Lerp(currentAngles, targetAngles, Time.deltaTime / 0.2f);
            Gun.transform.eulerAngles = currentAngles;
        }
        else if (Input.GetAxis("Mouse ScrollWheel") != 0)
        {
            //The mouse scroll wheel value will change
            if (Input.GetAxis("Mouse ScrollWheel") < 0)
            {
                //Range value limit
                if (userCamera.fieldOfView <= 100)
                    userCamera.fieldOfView += 2;
                if (userCamera.orthographicSize <= 20)
                    userCamera.orthographicSize += 0.5F;
            }
            //Zoom in  
            if (Input.GetAxis("Mouse ScrollWheel") > 0)
            {
                //Range value limit
                if (userCamera.fieldOfView > 16)
                    userCamera.fieldOfView -= 2;
                if (userCamera.orthographicSize >= 1)
                    userCamera.orthographicSize -= 0.5F;
            }
        }
    }
}

Set the parent objects of the 4 guns to the same parent object:

Attach this script to MainCamera and drag the corresponding parameters in:

The effect is as shown in the figure:

4. Preface

The movement and rotation of the model are closely related to the position and rotation of the child and parent. The position and rotation of the child or the parent are not set properly.
There will be various non-corresponding situations, such as the child object not rotating according to its own coordinates, but rotating around the coordinates of the parent object, or when moving, the model will automatically move to the center position first and then move.

The best solution in this case is:
1. Return the coordinates of the parent object and child object to zero.
2. The sub-object can save its rotation position.

Related Posts

unity3D terrain editor—Terrain

Unity exports the Android project and creates a new activity to place the privacy agreement

Unity game development: implementation of dialogue system

Unity3D official resource package Standard Assets import

Unity-Hololens-Vuforia development (picture recognition and model recognition)

Unity reads excel table data

2022-05-08 Unity Core 5——Tilemap

Head-shaking: Software in your host aborted an established connection

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*