快捷導(dǎo)航

基于Unity3D實(shí)現(xiàn)3D照片墻效果

更新時(shí)間：2022年03月09日 16:49:40 作者：恬靜的小魔龍

Unity3D不僅僅可以開發(fā)游戲，還有非常多的開發(fā)方向。本文就將用Unity3D制作出一個(gè)3D照片墻的效果，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下

一、前言

Unity3D不僅僅可以開發(fā)游戲，還有非常多的開發(fā)方向，秉承著興趣為先，將可以使用Unity制作的各種應(yīng)用案例，分享如何進(jìn)行開發(fā)，如何實(shí)現(xiàn)，希望大家可以在感興趣的地方，學(xué)習(xí)到自己想要學(xué)習(xí)的東西。

今天就來實(shí)現(xiàn)一個(gè)3D照片墻的效果。

我對(duì)于這個(gè)項(xiàng)目的構(gòu)思就是照片是3D的，可以滑動(dòng)，然后使用DoTween插件去做動(dòng)畫平滑移動(dòng)。

OK，那就正式開始。

先看一下效果圖：

二、正式開發(fā)

新建項(xiàng)目，我使用的版本是Unity3D 2019.4.7f1，模板選用3D：

（1）導(dǎo)入DoTween插件。

（2）新建Canvas，設(shè)置參數(shù)：

設(shè)置Canvas的坐標(biāo)到0,0,0：

（3）在Canvas新建N個(gè)Image：

（4）設(shè)置Main Camera的屬性：

設(shè)置完的樣子：

反正就是讓Image在屏幕中間就可以了。

（5）新建腳本UIRotate.cs，雙擊打開腳本，編輯代碼：

using DG.Tweening;
using UnityEngine;
using UnityEngine.EventSystems;

public class UIRotate : MonoBehaviour
{
    private int halfSize;
    private GameObject[] gameObjects;
    /// <summary>
    /// 圓半徑
    /// </summary>
    private int r = 300;
    /// <summary>
    /// 相間角度
    /// </summary>
    private int angle;

    private void Start()
    {
        //初始化數(shù)組
        var childCount = transform.childCount;
        //計(jì)算出中點(diǎn)
        halfSize = (childCount - 1) / 2;
        //求出圓內(nèi)角度
        angle = 360 / childCount;
        //初始
        gameObjects = new GameObject[childCount];
        for (var i = 0; i < childCount; i++)
        {
            gameObjects[i] = transform.GetChild(i).gameObject;
            SetPosition(i);
            SetDeepin(i);
        }
    }

    /// <summary>
    /// 設(shè)置物體位置
    /// </summary>
    private void SetPosition(int index)
    {
        float x = 0;
        float z = 0;
        if (index < halfSize)
        {
            int id = halfSize - index;
            x = r * Mathf.Sin(angle * id);
            z = -r * Mathf.Cos(angle * id);
        }
        else if (index > halfSize)
        {
            int id = index - halfSize;
            x = -r * Mathf.Sin(angle * id);
            z = -r * Mathf.Cos(angle * id);
        }
        else
        {
            x = 0;
            z = -r;
        }
        Tweener tweener = gameObjects[index].GetComponent<RectTransform>().DOLocalMove(new Vector3(x, 0, z), 1);
    }

    private void SetDeepin(int index)
    {
        //計(jì)算圖片深度也就是z軸的距離,離攝像機(jī)的遠(yuǎn)近
        int deepin = 0;
        if (index < halfSize)
        {
            deepin = index;
        }
        else if (index > halfSize)
        {
            deepin = gameObjects.Length - (1 + index);
        }
        else
        {
            deepin = halfSize;
        }
        gameObjects[index].GetComponent<RectTransform>().SetSiblingIndex(deepin);
    }
}

（6）將UIRotate.cs腳本附到Canvas對(duì)象上，運(yùn)行程序：

（7）添加左右拖動(dòng)代碼，繼續(xù)修改UIRotate.cs代碼：

using DG.Tweening;
using UnityEngine;
using UnityEngine.EventSystems;

public class UIRotate : MonoBehaviour
{
    private int halfSize;
    private GameObject[] gameObjects;
    /// <summary>
    /// 圓半徑
    /// </summary>
    private int r = 300;
    /// <summary>
    /// 相間角度
    /// </summary>
    private int angle;

    private void Start()
    {
        //初始化數(shù)組
        var childCount = transform.childCount;
        //計(jì)算出中點(diǎn)
        halfSize = (childCount - 1) / 2;
        //求出圓內(nèi)角度
        angle = 360 / childCount;
        //初始
        gameObjects = new GameObject[childCount];
        for (var i = 0; i < childCount; i++)
        {
            gameObjects[i] = transform.GetChild(i).gameObject;
            SetPosition(i);
            SetDeepin(i);
        }
    }

    /// <summary>
    /// 設(shè)置物體位置
    /// </summary>
    private void SetPosition(int index)
    {
        float x = 0;
        float z = 0;
        if (index < halfSize)
        {
            int id = halfSize - index;
            x = r * Mathf.Sin(angle * id);
            z = -r * Mathf.Cos(angle * id);
        }
        else if (index > halfSize)
        {
            int id = index - halfSize;
            x = -r * Mathf.Sin(angle * id);
            z = -r * Mathf.Cos(angle * id);
        }
        else
        {
            x = 0;
            z = -r;
        }
        Tweener tweener = gameObjects[index].GetComponent<RectTransform>().DOLocalMove(new Vector3(x, 0, z), 1);
    }

    private void SetDeepin(int index)
    {
        //計(jì)算圖片深度也就是z軸的距離,離攝像機(jī)的遠(yuǎn)近
        int deepin = 0;
        if (index < halfSize)
        {
            deepin = index;
        }
        else if (index > halfSize)
        {
            deepin = gameObjects.Length - (1 + index);
        }
        else
        {
            deepin = halfSize;
        }
        gameObjects[index].GetComponent<RectTransform>().SetSiblingIndex(deepin);
    }

    /// <summary>
    /// 向左滑動(dòng)
    /// </summary>
    public void OnLeftDrag()
    {
        var length = gameObjects.Length;
        for (var i = 0; i < length; i++)
        {
            var temp = gameObjects[i];
            gameObjects[i] = gameObjects[length - 1];
            gameObjects[length - 1] = temp;
        }
        for (var i = 0; i < length; i++)
        {
            SetPosition(i);
            SetDeepin(i);
        }
    }

    /// <summary>
    /// 向右滑動(dòng)
    /// </summary>
    public void OnRightDrag()
    {
        var length = gameObjects.Length;
        for (var i = 0; i < length-1; i++)
        {
            var temp = gameObjects[i];
            gameObjects[i] = gameObjects[i+1];
            gameObjects[i+1] = temp;
        }
        for (var i = 0; i < length; i++)
        {
            SetPosition(i);
            SetDeepin(i);
        }
    }

    private Vector2 touchFirst = Vector2.zero;//手指開始按下的位置
    private Vector2 touchSecond = Vector2.zero;//手指拖動(dòng)的位置

    void OnGUI()
    {
        if (Event.current.type == EventType.MouseDown)
        {
            touchFirst = Event.current.mousePosition;//記錄開始按下的位置
        }
        if (Event.current.type == EventType.MouseUp)
        {
            touchSecond = Event.current.mousePosition;//記錄拖動(dòng)的位置
            if (touchSecond.x < touchFirst.x)
            {
                OnLeftDrag();//向左滑動(dòng)
            }

            if (touchSecond.x > touchFirst.x)
            {
                OnRightDrag();//向右滑動(dòng)
            }
            touchFirst = touchSecond;
        }
    }
}

運(yùn)行程序：