Replace DrawText3D

This section explains how to replace your old DrawText3D system with Quasar Text UI for a cleaner, more optimized, and customizable text display in FiveM. By adding a simple function to your client script, you can make every 3D text interaction smoother and easier to manage, improving both performance and visual quality.

---

To use Quasar Text UI as a replacement for DrawText3D, add this function to your client-side script:

local texts = {}
function DrawText3D(x, y, z, text, id, key)
    local _id = id
    if not texts[_id] then
        CreateThread(function()
            texts[_id] = 5
            while texts[_id] > 0 do
                texts[_id] = texts[_id] - 1
                Wait(0)
            end
            texts[_id] = nil
            exports['qs-textui']:DeleteDrawText3D(id)
            Debug('Deleted text', id)
        end)
        TriggerEvent('textui:DrawText3D', x, y, z, text, id, key)
    end
    texts[_id] = 5
end

Automated Option for Developers

local texts = {}
if GetResourceState('qs-textui') == 'started' then
    function DrawText3D(x, y, z, text, id, key)
        local _id = id
        if not texts[_id] then
            CreateThread(function()
                texts[_id] = 5
                while texts[_id] > 0 do
                    texts[_id] = texts[_id] - 1
                    Wait(0)
                end
                texts[_id] = nil
                exports['qs-textui']:DeleteDrawText3D(id)
                Debug('Deleted text', id)
            end)
            TriggerEvent('textui:DrawText3D', x, y, z, text, id, key)
        end
        texts[_id] = 5
    end
else
    function DrawText3D(x, y, z, text)
        SetTextScale(0.35, 0.35)
        SetTextFont(4)
        SetTextProportional(1)
        SetTextColour(255, 255, 255, 215)
        SetTextEntry('STRING')
        SetTextCentre(true)
        AddTextComponentString(text)
        SetDrawOrigin(x, y, z, 0)
        DrawText(0.0, 0.0)
        local factor = text:len() / 370
        DrawRect(0.0, 0.0 + 0.0125, 0.017 + factor, 0.03, 0, 0, 0, 75)
        ClearDrawOrigin()
    end
end

---

How to Replace Basic DrawText3D Calls

Modify your existing DrawText3D usage like this:

Before (Basic DrawText3D)

DrawText3D(x, y, z, "Add your text here")

After (Using Quasar Text UI)

DrawText3D(x, y, z, "Add your text here", 'track_sit', 'E')

This will integrate Quasar Text UI for cleaner and optimized text rendering in FiveM.