Unity3D日常开发UGUI弹窗显示模型，以及模型交互等

Posted 2021-08-19 恬静的小魔龙

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Unity3D日常开发UGUI弹窗显示模型，以及模型交互等相关的知识，希望对你有一定的参考价值。

推荐阅读

CSDN主页
GitHub开源地址
Unity3D插件分享
简书地址
我的个人博客
QQ群：1040082875

一、前言

今天给大家带来一个UGUI弹出显示模型，然后模型还可以进行交互的DEMO

二、效果图及源码

在这里插入图片描述

源代码：
https://download.csdn.net/download/q764424567/20366501

三、教程

3-1、搭建场景

我们首先搭建一个UI场景：
在这里插入图片描述
4个Image添加Button组件，用来响应点击事件：

将4个Image改变一下名字，这在后面的代码编写的时候会用到：

先将摄像机的位置移动到(0,1,-10)并且旋转归零：

在这里插入图片描述
然后将枪摆放到合适的位置：

因为，将枪的位置旋转和缩放都改变了，这在旋转对象的时候会出现旋转问题，所以需要给它们各自设置一个旋转为0的父物体：

3-2、设置弹窗

接下来，就需要设置一个层级最高的Panel作为弹窗口，也就是将弹窗Panel放到最后渲染：
在这里插入图片描述
设置弹窗的UI：

UI就随便摆，最重要的是要有一个RawImage用来显示模型，然后新建一个Render Texture：

在这里插入图片描述
将新建的Teture对象，拖入摄像机组件的TargetTexture属性：
之后，将Teture对象拖入UI的RawImage对象的Texture属性：

可以看到，在UI中已经能看到摄像机中的图像了：

为了展示更好，设置一下Main Camera的属性：
在这里插入图片描述

3-3、编写UI响应代码

新建脚本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;//弹窗

    public GameObject[] Gun;//四个模型

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

将脚本拖到相机上，并将对应的对象拖到对应的卡槽中：
在这里插入图片描述
运行程序，可以看到效果：

提示：
如果提示没有摄像机渲染，可以再新建一个Camera即可。

3-4、实现模型交互

接下来实现模型的拖动、放大、旋转等交互
新建脚本ModelManager.cs：

using UnityEngine;

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

    public GameObject Gun;//同一个父物体
    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)
        {
            //鼠标滚动滑轮 值就会变化
            if (Input.GetAxis("Mouse ScrollWheel") < 0)
            {
                //范围值限定
                if (userCamera.fieldOfView <= 100)
                    userCamera.fieldOfView += 2;
                if (userCamera.orthographicSize <= 20)
                    userCamera.orthographicSize += 0.5F;
            }
            //Zoom in  
            if (Input.GetAxis("Mouse ScrollWheel") > 0)
            {
                //范围值限定
                if (userCamera.fieldOfView > 16)
                    userCamera.fieldOfView -= 2;
                if (userCamera.orthographicSize >= 1)
                    userCamera.orthographicSize -= 0.5F;
            }
        }
    }
}