Как разместить кнопку пользовательского интерфейса на целевом изображении с помощью AR Camera и Vuforia

Question

Я хочу разместить кнопку пользовательского интерфейса в зависимости от цели изображения. Я использую движок Vuforia, и у меня есть изображение, на котором есть стулья и столы. Поэтому я хочу разместить кнопку в пользовательском интерфейсе (не виртуальную кнопку) на основе изображения. Например, одна кнопка должна быть на стуле. Когда я двигаюсь, кнопка должна переустанавливаться, чтобы всегда отображаться над стулом, а при нажатии она должна отображать 3d-текст, говорящий, что это стул. Я новичок в AR и хотел изучить некоторые из таких уроков.

Answer 1

Вы можете разместить элементы пользовательского интерфейса в трехмерном пространстве, выбрав WorldSpace для RenderMode Canvas (см. также руководство) через инспектора.

Чем вы можете просто сделать это CanvasGameObject ребенок в соответствии с 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;
    }
}

Кроме того, после этого дочерние элементы ImageTarget по умолчанию не все отключены 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, (Вам не нужно использовать Panel - это просто Image компонент - но может быть легче читать текст, если он помещен на полупрозрачную или непрозрачную поверхность вместо того, чтобы просто "плавать" в воздухе)

3. Чем сделать простой компонент

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

4. Присоедините этот компонент к Panel объект

5. в Button "s onClick событие теперь ссылается на TogglePanel компонент и выберите метод TogglePanel -> Toggle()

---

Результат должен быть сейчас

• OnTracking потерян: Canvas (кнопка и панель с текстом) исчезают

• При отслеживании обнаружено: Canvas (кнопка и панель evtl с текстом) появляется и всегда должен быть на вершине стула (imageTarget);

• OnButtonClick: панель с текстом должна быть включена или отключена