|
Chinar 堅持將簡單的生活方式，帶給世人！ （擁有更好的閱讀體驗 —— 高分辨率用戶請根據需求調整網頁縮放比例） |
|
助力快速利用 UGUI 完成 3D 物體在 UI 界面的顯示 為新手節省寶貴的時間，避免采坑！ |
Chinar 教程效果：
1
Description —— 教程描述
游戲開發過程中，我們時長會需要把 3D 游戲對象/模型顯示在 UI 界面上
例如王者榮耀上的人物選擇，可以旋轉、交互、控制
例如商城購買時，我們可以旋轉人物，看時裝效果是否令我們滿意
那么我們開發者就需要做到，讓UI元素來顯示3D模型/游戲對象，供玩家控制使用
2
Create UI —— 創建一個UI元素
Hierarchy / 層次面板中，創建一個 UI 元素 RawImage
創建 RawImage 是因為，我們稍后將要把相機記錄的渲染紋理，賦值給 RawImage
用以顯示3D圖像
3
Create RenderTexture And Camera —— 創建渲染紋理與相機
新建一個相機，用來專門照射3D模型/游戲對象 —— 為了避免會影響到主視角，所以我們把位置設置到遠一些的位置
新建一個 RenderTexture ，賦值新建的相機，用來記錄相機渲染圖像
注意：
RenderTexture 是可以設置分辨率的，默認只有256*256
所以顯示3D模型的時候，可能會出現模糊不清的情況。那么只需要調高分辨率即可，這里我改為了1024*768
另外，移除新相機上的 Audio Listener 
組件，不然會報警說場景中存在2個
4
Relevance RawImage —— 將渲染紋理關聯圖片
將 RenderTexture 指定相機后，同樣指定給最初創建的 Relevance RawImage
這樣，新建相機下出現任何物體，都會被渲染紋理記錄，並顯示在 RawImage 上
5
Create Cube —— 創建一個立方體，看下3D效果
完成以上操作，我們在場景中創建一個 Cube ，並把位置調整到新建相機的視野中
我們即可在 Game 視窗中看到 3D 立體效果
6
Control The Rotation —— 控制3D模型/物體旋轉
在新建的相機上加一個腳本來控制相機的旋轉，來 360 度的全方位看我們的游戲對象 /Cube
對 UI 進行整理（這里我只是為了 Demo效果更便於新手理解，大家也可以不做整理依舊出效果）
注意：
以下代碼，需要指定目標對象，需要將Cube 指定到 Pivot 屬性中即可
運行后，右鍵即可控制UI上的3D物體進行旋轉！
也可以寫一個腳本，控制 游戲對象 /Cube 的旋轉都行
using UnityEngine;
/// <summary>
/// 腳本掛載新建相機上 —— 新相機Clear Flags清除標記設置為：Solid Color，不然會顯示天空盒
/// </summary>
public class ChinarSmoothUi3DCamera : MonoBehaviour
{
public Transform pivot;
public Vector3 pivotOffset = Vector3.zero;
public Transform target;
public float distance = 10.0f;
public float minDistance = 2f;
public float maxDistance = 15f;
public float zoomSpeed = 1f;
public float xSpeed = 250.0f;
public float ySpeed = 250.0f;
public bool allowYTilt = true;
public float yMinLimit = -90f;
public float yMaxLimit = 90f;
private float x = 0.0f;
private float y = 0.0f;
private float targetX = 0f;
private float targetY = 0f;
public float targetDistance = 0f;
private float xVelocity = 1f;
private float yVelocity = 1f;
private float zoomVelocity = 1f;
private void Start()
{
var angles = transform.eulerAngles;
targetX = x = angles.x;
targetY = y = ClampAngle(angles.y, yMinLimit, yMaxLimit);
targetDistance = distance;
}
private void LateUpdate()
{
if (!pivot) return;
var scroll = Input.GetAxis("Mouse ScrollWheel");
if (scroll > 0.0f) targetDistance -= zoomSpeed;
else if (scroll < 0.0f)
targetDistance += zoomSpeed;
targetDistance = Mathf.Clamp(targetDistance, minDistance, maxDistance);
if (Input.GetMouseButton(1) || (Input.GetMouseButton(0) && (Input.GetKey(KeyCode.LeftControl) || Input.GetKey(KeyCode.RightControl))))
{
targetX += Input.GetAxis("Mouse X") * xSpeed * 0.02f;
if (allowYTilt)
{
targetY -= Input.GetAxis("Mouse Y") * ySpeed * 0.02f;
targetY = ClampAngle(targetY, yMinLimit, yMaxLimit);
}
}
x = Mathf.SmoothDampAngle(x, targetX, ref xVelocity, 0.3f);
y = allowYTilt ? Mathf.SmoothDampAngle(y, targetY, ref yVelocity, 0.3f) : targetY;
Quaternion rotation = Quaternion.Euler(y, x, 0);
distance = Mathf.SmoothDamp(distance, targetDistance, ref zoomVelocity, 0.5f);
Vector3 position = rotation * new Vector3(0.0f, 0.0f, -distance) + pivot.position + pivotOffset;
transform.rotation = rotation;
transform.position = position;
}
private static float ClampAngle(float angle, float min, float max)
{
if (angle < -360) angle += 360;
if (angle > 360) angle -= 360;
return Mathf.Clamp(angle, min, max);
}
}7
Project —— 項目文件
項目文件為 unitypackage 文件包：
下載導入 Unity 即可使用
該 Demo 僅29K
點擊下載 —— 項目資源 (積分支持)
支持
May Be —— 搞開發，總有一天要做的事！
|
Chinar 提供一站式教程，閉眼式創建！ 為新手節省寶貴時間，避免采坑！ |
先點擊領取 —— 阿里全產品優惠券 (享受最低優惠)
1 —— 雲服務器超全購買流程 (新手必備!)
2 —— 阿里ECS雲服務器自定義配置 - 購買教程(新手必備!)
3—— Windows 服務器配置、運行、建站一條龍 !
4 —— Linux 服務器配置、運行、建站一條龍 !
技術交流群：806091680 ！ Chinar 歡迎你的加入
本博客為非營利性個人原創，除部分有明確署名的作品外，所刊登的所有作品的著作權均為本人所擁有，本人保留所有法定權利。違者必究
對於需要復制、轉載、鏈接和傳播博客文章或內容的，請及時和本博主進行聯系，留言，Email: ichinar@icloud.com
對於經本博主明確授權和許可使用文章及內容的，使用時請注明文章或內容出處並注明網址