如何使用 AR Camera 和 Vuforia 在图像目标上放置 UI 按钮

Question

我想根据图像目标放置一个 UI 按钮。我正在使用 Vuforia 引擎，并且我有一张有椅子和桌子的图片。所以我想根据图像在 UI 上放置一个按钮（不是虚拟按钮）。例如，一个按钮应该在椅子上。当我移动时，按钮应重新调整以始终显示在椅子上，单击时应显示 3d 文本，说明它是椅子。我是 AR 新手，想探索一些此类教程。

Answer 1

您可以通过检查器为RenderMode 和Canvas 选择WorldSpace（另请参阅Manual），将UI 元素放置在3D 空间中。

您可以简单地将 Canvas GameObject 设为相应 ImageTarget 的子项。因此，每当 ImageTarget 移动（通过跟踪）时，Canvas 就会自动移动而无需处理它。

您也可以移动和放置带有Canvas 的对象，就像组件中的任何其他对象一样，例如

public class PlaceCanvasOnTarget : MonoBehaviour
{
    public Transform ImageTarget;
    public Canvas CanvasToPlace;

    // set an offset for the canvas e.g. 20cm above
    public Vector3 offset = new Vector3(0, 0.2, 0);

    private void LateUpdate()
    {
        Canvas.transform.position = ImageTarget.transform.position + offset;
    }
}

另外，afaik 默认情况下 ImageTarget 的子代 not 全部禁用 onTrackingLost 并启用 onTrackingFound。只有部分组件被禁用，但您可以通过将DefaultTrackableEventHandler 的内容复制到自定义组件并对其进行调整来更改此设置（对您来说重要的是底部只有OnTrackingFound 和OnTrackingLost）

using UnityEngine;

namespace Vuforia
{
    /// <summary>
    /// A custom handler that implements the ITrackableEventHandler interface.
    /// </summary>
    public class DefaultTrackableEventHandler : MonoBehaviour,
    ITrackableEventHandler
    {
        #region PRIVATE_MEMBER_VARIABLES

        private TrackableBehaviour mTrackableBehaviour;

        #endregion // PRIVATE_MEMBER_VARIABLES


        #region UNTIY_MONOBEHAVIOUR_METHODS

        void Start()
        {
            mTrackableBehaviour = GetComponent<TrackableBehaviour>();
            if (mTrackableBehaviour)
            {
                mTrackableBehaviour.RegisterTrackableEventHandler(this);
            }
        }

        #endregion // UNTIY_MONOBEHAVIOUR_METHODS


        #region PUBLIC_METHODS
        public GameObject show;
        public GameObject hide;
        /// <summary>
        /// Implementation of the ITrackableEventHandler function called when the
        /// tracking state changes.
        /// </summary>
        public void OnTrackableStateChanged(
            TrackableBehaviour.Status previousStatus,
            TrackableBehaviour.Status newStatus)
        {
            if (newStatus == TrackableBehaviour.Status.DETECTED ||
                newStatus == TrackableBehaviour.Status.TRACKED ||
                newStatus == TrackableBehaviour.Status.EXTENDED_TRACKED)
            {
                OnTrackingFound();
            }
            else
            {
                OnTrackingLost();
            }
        }

        #endregion // PUBLIC_METHODS


        #region PRIVATE_METHODS

        private void OnTrackingFound()
        {
            show.SetActive(true);

            // enabled all children
            foreach(Transform child in transform)
            {
                child.gameObject.SetActive(true);
            }

            Debug.Log("Trackable " + mTrackableBehaviour.TrackableName + " found");
        }

        private void OnTrackingLost()
        {
            hide.SetActive(true);

            // disable all children
            foreach(Transform child in transform)
            {
                child.gameObject.SetActive(false);
            }

            Debug.Log("Trackable " + mTrackableBehaviour.TrackableName + " lost");
        }

        #endregion // PRIVATE_METHODS
    }
}

---

对于显示和隐藏一些文本的按钮：

1. 将Button 作为子级添加到Canvas。

2. 将Panel 作为子级添加到Canvas。并将Text 添加到Panel 中。 （您不需要使用面板 - 它基本上只是一个 Image 组件 - 但如果将文本放置在半透明或不透明的表面上而不是仅仅“漂浮”在空中，可能会更容易阅读）

3. 比做一个简单的组件

   public TogglePanel : MonoBehaviour
   {
       public void Toggle()
       {
           gameObject.SetActive(!gameObject.activeSelf);
       }
   }
   

4. 将该组件附加到Panel 对象

5. 现在在Button的onClick事件中引用TogglePanel组件并选择方法TogglePanel->Toggle()

---

结果应该是现在

• OnTracking 丢失：画布（带文本的按钮和面板）消失

• 发现 OnTracking：画布（按钮和带有文本的 evtl 面板）出现并且应始终位于椅子顶部 (imageTarget)；

• OnButtonClick：应启用或禁用带有文本的面板