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 即可使用

支援

May Be —— 搞開發，總有一天要做的事！

技術交流群：806091680 ！ Chinar 歡迎你的加入

本部落格為非營利性個人原創，除部分有明確署名的作品外，所刊登的所有作品的著作權均為本人所擁有，本人保留所有法定權利。違者必究

對於需要複製、轉載、連結和傳播部落格文章或內容的，請及時和本博主進行聯絡，留言，Email: [email protected]

對於經本博主明確授權和許可使用文章及內容的，使用時請註明文章或內容出處並註明網址