UGUI学习笔记（九）自制3D轮播图

原创

已于 2022-09-12 21:21:34 修改 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#unity #ui

于 2022-09-10 18:31:16 首次发布

本文详细介绍了如何在Unity3D中实现3D轮播图，包括图片的动态生成、椭圆轨迹模拟、层级管理以及鼠标拖动旋转效果。通过创建脚本和结构体，计算每个图片的位置、缩放和层级，最终实现平滑的3D轮播及旋转交互体验。

一、效果展示

二、实现过程

2.1 准备工作

首先在Canvas下创建一个空物体，将其命名为「SlideShow」，并设置好其大小。它将作为轮播图的父容器。

在「SlideShow」身上挂载一个脚本，命名为「SlideShow3D」。声明一个Vector2成员用来设定每张图片的大小，一个Sprite数组用来存储需要展示的图片

public class SlideShow3D : MonoBehaviour
{
   
   
    // 图片大小
    public Vector2 ItemSize;
    // 图片集
    public Sprite[] ItemSprites;
}

新创建一个脚本命名为「SlideShowItem」，作为子物体身上挂载的脚本。

public class SlideShowItem : MonoBehaviour
{
   
   

}

2.2 动态创建子物体

由于子物体都具有相同的特征，因此单独写一个创建子物体模板的方法

private GameObject CreateTemplate()
{
   
   
	GameObject item = new GameObject("Template");
	item.AddComponent<Image>();
	item.AddComponent<RectTransform>().sizeDelta = ItemSize;
	item.AddComponent<SlideShowItem>();
	return item;
}

接下来通过给生成的模板添加sprite、设置parent并实例化，来真正生成子物体。

// 子物体集合
private List<SlideShowItem> _items;
void Start()
{
   
   
	_items = new List<SlideShowItem>();
	CreateItems();
}
/// <summary>
/// 创建子物体
/// </summary>
private void CreateItems()
{
   
   
	var template = CreateTemplate();
	foreach (var sprite in ItemSprites)
	{
   
   
		var slideShowItem = Instantiate(template).GetComponent<SlideShowItem>();
		slideShowItem.SetParent(transform);
		slideShowItem.SetSprite(sprite);
		_items.Add(slideShowItem);
	}
	Destroy(template);
}

这里将设置parent和sprite的方法放在了子物体的脚本中，以提高内聚性。

public class SlideShowItem : MonoBehaviour
{
   
   
    private Image _img;

    private Image Img
    {
   
   
        get
        {
   
   
            if (_img == null)
                _img = GetComponent<Image>();
            return _img;
        }
    }
    public void SetParent(Transform parentTransform)
    {
   
   
        transform.SetParent(parentTransform);
    }

    public void SetSprite(Spri

最低0.47元/天解锁文章