How to add buttons over 3D models for an AR app in Unity?

Question

I am creating an AR medical encyclopedia as a starter project on Unity. However, I am unable to find any solutions for how I can add clickable buttons over a 3D model that are anchored to the model.

Here is a link explaining what I mean: https://www.youtube.com/watch?v=XsIXm5MA3NU

I have tried using the following method: https://www.youtube.com/watch?v=tHEG95vrO_Q

When I tried this method, the buttons did not appear when I ran it. I have tried changing the canvas settings to world space and multiple other things, but it does not work.

Here is the script I used:

using UnityEngine;
using UnityEngine.UI;

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

    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)
        {
            enabled = false; // Disable the script if necessary components are missing
            Debug.LogError("Target Transform or Main Camera not assigned!");
        }
    }

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

        // Convert world position to screen space
        var screenPoint = mainCamera.WorldToScreenPoint(targetTransform.position);

        // Update UI button position
        rectTransform.position = screenPoint;

        // Check if target is within a certain distance from the center of the screen
        var viewportPoint = mainCamera.WorldToViewportPoint(targetTransform.position);
        var distanceFromCenter = Vector2.Distance(viewportPoint, Vector2.one * 0.5f);

        // Adjust visibility based on distance
        image.enabled = distanceFromCenter < 0.3f;
    }
}

I welcome any suggestions as soon as possible.

Thank you

Answer 1

You could try setting the canvas to world space and then making that canvas a child of the object that you're using. You could then use the Transform.Lookat() https://docs.unity3d.com/ScriptReference/Transform.LookAt.html to make the canvas look at the camera so it doesn't rotate weirdly but the position of button is correct.