How to change a circular mesh on top of a gltf

Does anyone know how to make this yellow circular mesh to have the same geometry as the shirt, in a way that the shirt is covered by it.

My current code does this:

Im using raycaster to move the mesh to always stay on top of the shirt but i dont know how i can make it “bend”.

I want it to look like this:

this is my code:

//shirt = gltf model
        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();
        var intersects;
        var normalMatrix = new THREE.Matrix3();
        var worldNormal = new THREE.Vector3();
        var lookAtVector = new THREE.Vector3();
        var dragging = false;
        window.addEventListener("mousemove", onMouseMove, false);
        window.addEventListener("mousedown", onMouseDown, false);
        window.addEventListener("mouseup", onMouseUp, false);

        function onMouseDown(event) {
            let intersects = raycaster.intersectObjects([cube]);
            if (intersects.length > 0) {
                controls.enableRotate = false;
                dragging = true;

        function onMouseUp(event) {
            controls.enableRotate = true;
            dragging = false;

        function onMouseMove(event) {
            mouse.set((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1);
            raycaster.setFromCamera(mouse, camera);
            intersects = raycaster.intersectObjects([shirt.scene.children[0]]);

            if (intersects.length == 0 || !dragging) return;


you would do this with decals. you don’t need a raycaster for this.

t-shirt config:

movable decal:

the vanilla implementation of it is a bit more complex but doable, you’ll find it here three.js examples


thanks a lot for the help