Unity AR应用中如何给3D模型添加锚定的可点击按钮？

问题核心 #

在AR医学百科项目中，需为3D模型添加锚定到模型、可交互的UI按钮，当前使用的绑定脚本运行时按钮不显示，已尝试设置Canvas为World Space等操作无效。

方案1：World Space Canvas实现（AR场景推荐） #

AR场景下，UI与3D模型处于同一世界空间，World Space Canvas是最适配的方案，无需屏幕坐标转换：

1. Canvas基础设置 #

• 将Canvas的Render Mode改为World Space
• 调整Canvas的RectTransform参数：设置合适的Width/Height（如1024x1024，根据场景缩放比例调整）
• 确保Canvas的Event Camera指定为AR项目的主相机（如AR Foundation的AR Camera）

2. 按钮绑定脚本 #

直接将按钮世界位置绑定到模型位置+偏移，同时让按钮始终面向相机：

using UnityEngine;
using UnityEngine.UI;

public class ModelAnchoredButton : MonoBehaviour
{
    [SerializeField] private Transform targetModel;
    [SerializeField] private Vector3 offset = new Vector3(0, 0.5f, 0); // 模型上方0.5米偏移
    [SerializeField] private Camera arCamera;

    private void Awake()
    {
        if (targetModel == null)
        {
            Debug.LogError("未指定目标模型Transform");
            enabled = false;
        }
        arCamera = arCamera ?? Camera.main;
    }

    private void Update()
    {
        // 绑定按钮位置到模型+偏移
        transform.position = targetModel.position + offset;
        
        // 让按钮始终面向相机（避免AR视角下按钮反向）
        transform.LookAt(arCamera.transform);
        transform.Rotate(0, 180, 0);
    }
}

3. 按钮配置 #

• 将按钮作为Canvas的子物体，调整RectTransform设置合适的按钮大小
• 确保按钮带有Button组件，Canvas带有默认的Graphic Raycaster组件

方案2：修复原有Screen Space脚本 #

若坚持使用Screen Space模式（Overlay/Camera），需修正坐标转换逻辑：

1. Canvas设置 #

• 若用Screen Space - Camera：指定Render Camera为AR相机，设置合理的Plane Distance（如10）
• 若用Screen Space - Overlay：无需额外相机配置

2. 修正后的脚本 #

using UnityEngine;
using UnityEngine.UI;

public class WorldPositionButton : MonoBehaviour
{
    [SerializeField] private Transform targetTransform;
    [SerializeField] private Canvas parentCanvas;

    private RectTransform rectTransform;
    private Image image;
    private Camera mainCamera;

    private void Awake()
    {
        rectTransform = GetComponent<RectTransform>();
        image = GetComponent<Image>();
        mainCamera = Camera.main;

        if (targetTransform == null || mainCamera == null || parentCanvas == null)
        {
            enabled = false;
            Debug.LogError("缺少必要组件：目标Transform、主相机或父Canvas");
        }
    }

    private void Update()
    {
        if (targetTransform == null || mainCamera == null || parentCanvas == null)
            return;

        Vector3 screenPoint = mainCamera.WorldToScreenPoint(targetTransform.position);
        
        // 过滤相机后方的模型（避免坐标异常）
        if (screenPoint.z <= 0)
        {
            image.enabled = false;
            return;
        }

        // 将屏幕坐标转换为Canvas空间坐标
        if (RectTransformUtility.ScreenPointToWorldPointInRectangle(
            parentCanvas.GetComponent<RectTransform>(), 
            screenPoint, 
            mainCamera, 
            out Vector3 worldPoint))
        {
            rectTransform.position = worldPoint;
        }

        // 先强制显示按钮，测试通过后再调整可见性逻辑
        image.enabled = true;
    }
}

通用排查步骤 #

1. 组件完整性检查：确认按钮有Image、Button组件，Canvas有Graphic Raycaster、Canvas Scaler组件
2. 层级与遮挡：按钮需为Canvas的子物体，且层级高于其他可能遮挡的UI元素
3. 调试日志：添加Debug.Log(screenPoint)、Debug.Log(image.enabled)，查看坐标值与可见性状态
4. AR相机验证：确保AR相机的Clear Flags设置为Skybox或Solid Color，且能正确追踪目标模型

内容的提问来源于stack exchange，提问作者MANSHA RAJKUMAR