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

Question

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

Answer 1

您可以通过检查器为 RenderMode 和 Canvas (also see the Manual) 选择 WorldSpace，将 UI 元素放置在 3D space 中。

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

或者，您也可以移动并放置带有 Canvas 的 object，就像组件中的任何其他 object 一样，例如

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;
    }
}

此外，默认情况下 ImageTarget 的 childs 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
    }
}

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

将Button作为child添加到Canvas。
添加一个Panel作为child到Canvas。并在 Panel 中添加一个 Text 作为 child。（您不需要使用面板 - 它基本上只是一个 Image 组件 - 但如果它放在半透明或不透明的表面上而不是仅 "floating" 上，可能更容易阅读文本空气)

不如制作一个简单的组件

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

将该组件附加到 Panel object
在 Button 的 onClick 事件中现在引用 TogglePanel 组件和 select 方法 TogglePanel->Toggle()

现在应该是结果了

OnTracking 丢失：Canvas（带有文本的按钮和面板）消失
OnTracking 发现：Canvas（带有文本的按钮和 evtl 面板）出现并且应始终位于椅子顶部 (imageTarget)；
OnButtonClick：应启用或禁用带有文本的面板

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

How do I place a UI button on image target using AR Camera and Vuforia

unity3d

augmented-reality

vuforia

android-augmented-reality