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;
//events
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;
normalMatrix.getNormalMatrix(intersects[0].object.matrixWorld);
worldNormal.copy(intersects[0].face.normal).applyMatrix3(normalMatrix).normalize();
cube.position.copy(intersects[0].point);
cube.lookAt(lookAtVector.copy(intersects[0].point).add(worldNormal));
cube.geometry.computeVertexNormals();
}