Input text to display on a dynamic texture

Hello Everyone,

I am new to three.js and programming in general. I have an issue trying to display text from an input tag into a dynamic texture on a custom mesh. Basically I want to have the ability to type a name or number into a text field and have it display live on the mesh. I really just don’t know where to start. If anyone could help me with this, I would greatly appreciate it. I am including my code and a screenshot of what I am trying to accomplish to hopefully give you a better idea.

mockup

if (WEBGL.isWebGLAvailable() === false) {
        document.body.appendChild(WEBGL.getWebGLErrorMessage());
    }
    var statsEnabled = true;
    var container, stats;
    var camera, scene, renderer, controls;
    var dynamicTexture = new THREEx.DynamicTexture(2048, 2048)
    dynamicTexture.context.font = "bold " + (70) + "px Arial";



    init();
    animate();
    function init() {
        container = document.createElement('div');
        document.body.appendChild(container);
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);
        renderer.gammaInput = true;
        renderer.gammaOutput = true;
        renderer.toneMapping = THREE.ReinhardToneMapping;
        renderer.toneMappingExposure = 2;
        //
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 1000);
        camera.position.z = 40;
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        //
        scene.add(new THREE.HemisphereLight(0x443333, 0x222233, 4));
        //
        new THREE.CubeTextureLoader()
            .setPath('textures/cube/blur/')
            .load(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'], function (textureCube) {
                scene.background = textureCube;
            });
        //
        var material = new THREE.MeshStandardMaterial({
            map: dynamicTexture.texture
        });
        
        new THREE.OBJLoader()
            .setPath('mesh/')
            .load('jersey.obj', function (group) {
                var loader = new THREE.TextureLoader()
                    .setPath('mesh/');
                material.roughness = 1; // attenuates roughnessMap
                material.metalness = 0.0; // attenuates metalnessMap
                //material.map = loader.load('jersey_base2.png');
                // roughness is in G channel, metalness is in B channel
                material.metalnessMap = material.roughnessMap = loader.load('Base_occlusionRoughnessMetallic.png');
                material.normalMap = loader.load('jersey_Base_Normal.png');
                material.map.wrapS = THREE.RepeatWrapping;
                material.roughnessMap.wrapS = THREE.RepeatWrapping;
                material.metalnessMap.wrapS = THREE.RepeatWrapping;
                material.normalMap.wrapS = THREE.RepeatWrapping;
                var _image = document.createElement('img');
                _image.src = 'mesh/jersey_base2.png';
                _image.addEventListener('load', function () {
                    dynamicTexture.drawImage(_image, 0, 0);
                    dynamicTexture.drawText('Lewis', 450, 400, 'white');
                    dynamicTexture.drawText('99', 515, 600, 'white');
                    dynamicTexture.drawText('TEAM', 1300, 500, 'white');
                });
              

                group.traverse(function (child) {
                    if (child instanceof THREE.Mesh) {
                        child.material = material;
                    }
                });
                group.position.x = - 0.45;
                group.rotation.y = - Math.PI / 2;
                scene.add(group);
            });

        var genCubeUrls = function (prefix, postfix) {
            return [
                prefix + 'px' + postfix, prefix + 'nx' + postfix,
                prefix + 'py' + postfix, prefix + 'ny' + postfix,
                prefix + 'pz' + postfix, prefix + 'nz' + postfix
            ];
        };
        var hdrUrls = genCubeUrls('./textures/cube/pisaHDR/', '.hdr');
        new THREE.HDRCubeTextureLoader().load(THREE.UnsignedByteType, hdrUrls, function (hdrCubeMap) {
            var pmremGenerator = new THREE.PMREMGenerator(hdrCubeMap);
            pmremGenerator.update(renderer);
            var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker(pmremGenerator.cubeLods);
            pmremCubeUVPacker.update(renderer);
            var hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
            material.envMap = hdrCubeRenderTarget.texture;
            material.needsUpdate = true; // is this needed?
            hdrCubeMap.dispose();
            pmremGenerator.dispose();
            pmremCubeUVPacker.dispose();
        });
        //
        if (statsEnabled) {
            stats = new Stats();
            container.appendChild(stats.dom);
        }
        window.addEventListener('resize', onWindowResize, false);
    }
    //
    function onWindowResize() {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
    }
    //
    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
        if (statsEnabled) stats.update();
    }

Hi!
Not the exact answer, just something related:
https://discourse.threejs.org/t/three-js-fabric-js/2111?u=prisoner849