Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to achieve 3D photo wall effect based on Unity3D, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

I. Preface

Unity3D can not only develop games, but also a lot of development directions, adhering to the interest first, will be able to use Unity to create a variety of application cases, share how to develop, how to achieve, I hope you can learn what you want to learn in places of interest.

Today, let's achieve the effect of a 3D photo wall.

My idea for this project is that the photo is 3D, you can slide, and then use the DoTween plug-in to make the animation move smoothly.

OK, let's get started.

First, take a look at the effect picture:

II. Formal development

For the new project, the version I use is Unity3D 2019.4.7f1, and the template is 3D:

(1) Import the DoTween plug-in.

(2) create a new Canvas and set parameters:

Set the coordinates of Canvas to 0. 0. 0. 0:

(3) create N new Image in Canvas:

(4) set the attributes of Main Camera:

What it looks like after the setting:

Anyway, just put Image in the middle of the screen.

(5) create a new script UIRotate.cs, double-click to open the script, and edit the code:

Using DG.Tweening;using UnityEngine;using UnityEngine.EventSystems;public class UIRotate: MonoBehaviour {private int halfSize; private GameObject [] gameObjects; / circle radius / private int r = 300; / interphase angle / private int angle; private void Start () {/ / initialize array var childCount = transform.childCount / / calculate the midpoint halfSize = (childCount-1) / 2; / / calculate the angle inside the circle angle = 360 / childCount; / / initial gameObjects = new GameObject [childCount]; for (var I = 0; I

< childCount; i++) { gameObjects[i] = transform.GetChild(i).gameObject; SetPosition(i); SetDeepin(i); } } /// /// 设置物体位置 /// 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 (). DOLocalMove (new Vector3 (x, 0, z), 1) } private void SetDeepin (int index) {/ / calculate the depth of the picture, that is, the distance from the z-axis, int deepin = 0; if (index)

< halfSize) { deepin = index; } else if (index >

HalfSize) {deepin = gameObjects.Length-(1 + index);} else {deepin = halfSize;} gameObjects [index] .GetComponent (). SetSiblingIndex (deepin);}}

(6) attach the UIRotate.cs script to the Canvas object and run the program:

(7) add the left and right drag code and continue to modify the UIRotate.cs code:

Using DG.Tweening;using UnityEngine;using UnityEngine.EventSystems;public class UIRotate: MonoBehaviour {private int halfSize; private GameObject [] gameObjects; / circle radius / private int r = 300; / interphase angle / private int angle; private void Start () {/ / initialize array var childCount = transform.childCount / / calculate the midpoint halfSize = (childCount-1) / 2; / / calculate the angle inside the circle angle = 360 / childCount; / / initial gameObjects = new GameObject [childCount]; for (var I = 0; I

< childCount; i++) { gameObjects[i] = transform.GetChild(i).gameObject; SetPosition(i); SetDeepin(i); } } /// /// 设置物体位置 /// 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 (). DOLocalMove (new Vector3 (x, 0, z), 1) } private void SetDeepin (int index) {/ / calculate the depth of the picture, that is, the distance from the z-axis, int deepin = 0; if (index)

< halfSize) { deepin = index; } else if (index >

HalfSize) {deepin = gameObjects.Length-(1 + index);} else {deepin = halfSize;} gameObjects [index] .GetComponent (). SetSiblingIndex (deepin); / slide left / 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); } } /// /// 向右滑动 /// 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;//手指拖动的位置 void OnGUI() { if (Event.current.type == EventType.MouseDown) { touchFirst = Event.current.mousePosition;//记录开始按下的位置 } if (Event.current.type == EventType.MouseUp) { touchSecond = Event.current.mousePosition;//记录拖动的位置 if (touchSecond.x < touchFirst.x) { OnLeftDrag();//向左滑动 } if (touchSecond.x >

TouchFirst.x) {OnRightDrag (); / / slide to the right} touchFirst = touchSecond;}

Run the program:

(8) Import photos and try it at last:

Thank you for reading this article carefully. I hope the article "how to achieve 3D Photo Wall effect based on Unity3D" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.