This is the 22nd day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Recommended reading

  • CSDN home page
  • GitHub open source address
  • Unity3D plugin sharing
  • Jane’s address book
  • My personal blog
  • QQ group: 1040082875

Hello everyone, I am a Buddhist engineer ☆ quiet small magic dragon ☆, update Unity development skills from time to time, think useful remember one key three link oh.

One, foreword

The attributes and usage methods of each UGUI component, such as Text, Button, Image, Toggle, InputField, ScrollView, etc.

Then share some principles of UGUI, such as UGUI rendering mode, UGUI zoom calculation, UGUI tracing point positioning, UGUI automatic layout and so on.

I believe you will have a more comprehensive understanding of UGUI after reading.

Next, I’ll share an example of the UGUI UI component being applied.

Ii. Introduction and effect drawing

A problem for me was whether I could display 3D models on the UI and interact with them and pop Windows.

Let’s share how to pop up the model.

The main thing here is to use the RawImage display texture component of the UGUI to map the camera information to the UI, and then interact with the model again, but on the UI as if controlling the UI.

Effect:

Source: download.csdn.net/download/q7…

Three, implementation,

3-1. Set up the scene

Let’s first build a UI scenario:4 images add Button components to respond to click events:Change the names of the four images, which will be used later in the code:First move the camera position to (0,1,-10) and rotate to zero:

Then position the gun in the right position:Since the rotation and scaling of the gun position have been changed, this causes rotation problems when rotating objects, so we need to set each of them to a parent object with rotation 0:

3-2. Set the popover

Next, we need to set the highest level Panel as the popover window, that is, put the popover Panel in the last render:Set the popover UI:The most important thing is to create a RawImage to display the model and create a Render Texture:

Drag the new Teture object into the camera component’s TargetTexture property:After that, drag the Teture object into the Texture property of the RawImage object in the UI:As you can see, the image from the camera is already visible in the UI:For better display, set the Main Camera properties:

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;/ / 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); }}Copy the code

Drag the script onto the camera and the corresponding object onto the corresponding card slot:Run the program and you can see the effect:Tip: If the tip does not have Camera rendering, you can create a new Camera.

3-4. Realize model interaction

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.2 f);
            Gun.transform.eulerAngles = currentAngles;
        }
        else if (Input.GetAxis("Mouse ScrollWheel") != 0)
        {
            // The value of the pulley changes when the mouse moves over it
            if (Input.GetAxis("Mouse ScrollWheel") < 0)
            {
                // Range values are limited
                if (userCamera.fieldOfView <= 100)
                    userCamera.fieldOfView += 2;
                if (userCamera.orthographicSize <= 20)
                    userCamera.orthographicSize += 0.5 F;
            }
            //Zoom in  
            if (Input.GetAxis("Mouse ScrollWheel") > 0)
            {
                // Range values are limited
                if (userCamera.fieldOfView > 16)
                    userCamera.fieldOfView -= 2;
                if (userCamera.orthographicSize >= 1)
                    userCamera.orthographicSize -= 0.5 F; }}}}Copy the code

Set all 4 gun parents to the same parent:

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

The effect is as follows:

Four, after the speech

The movement and rotation of the model have a lot to do with the position rotation of the child and its parent. The position rotation of the child or its parent is not set properly. There are all sorts of things that don’t correspond, like the child doesn’t rotate according to its own coordinates, rotates around the parent’s coordinates, or the model automatically moves to the center and then moves.

In this case, the best solution is: 1. Set the coordinates of both parent and child objects to zero. 2. Save the rotation position of the child object.