Question

我想基于图像目标放置UI按钮。我正在使用Vuforia引擎，并且有一张带有椅子和桌子的图像。因此，我想基于图像在UI上放置一个按钮（而不是虚拟按钮）。例如，椅子上应该有一个按钮。当我移动时，该按钮应重新调整以始终显示在椅子上，并且在单击时应显示一个3d文字，表示该椅子。我是AR的新手，想探索其中的一些教程。

Answer 1

您可以通过检查器为WorldSpace和Canvas（另请参见Manual）选择RenderMode，将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;
    }
}

默认情况下，默认情况下，的子对象将不全部禁用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作为子项添加到Canvas。
将Panel作为子项添加到Canvas。并将Text作为子项添加到该Panel。（您不需要使用面板-它基本上只是一个Image组件-但如果将文本放在半透明或不透明的表面上而不是仅在空中“漂浮”，则阅读文本可能会更容易）

比制作一个简单的组件

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

将该组件附加到Panel对象
现在在Button的{{1}}事件中引用onClick组件并选择方法TogglePanel-> TogglePanel

结果应该是现在

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

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

1 个答案: