Generate mesh from face landmarks mesh

Questions
,
1

Hello,
I am using tfjs-models/face-landmarks-detection at master · tensorflow/tfjs-models · GitHub Tensorflow face landmarks detection library and I am trying to create mesh from tensorflow keypoints.

        function create_facemesh_mesh(keypoints){
            try {
                const geometry = new THREE.BufferGeometry();
                geometry.addAttribute( 'position', new THREE.BufferAttribute(new Float32Array(keypoints.flat()),3));
                geometry.setIndex( new THREE.BufferAttribute( new Uint16Array(TRIANGULATION), 1 ) );
                const material = new THREE.MeshBasicMaterial( { color:  Math.random() * 0xffffff } );
                const mesh = new THREE.Mesh( geometry, material );
                console.log(mesh);
                return mesh;
            } catch(n) {
            }
        }

image
image742×618 29.7 KB

Please if you have any example how to create, can you share with me? Thank you.

1 Like
2

The code looks correct (apart from the fact that latest three.js versions use setAttribute() instead of addAttribute()).

It’s probably best to demonstrate with a live example what you are doing: https://jsfiddle.net/k1q7swbo/

3

Yea, thanks. I have another question, can I make pivot point of mesh a center of nose? It would be easier to control because I am trying to put obj face mesh on video stream FACE, reason is for this way, because I am doing virtual glasses try on.
If you have any suggestions, please share.

4

Related to this, I made a <Facemesh> component for r3f here Facemesh - CodeSandbox

image
image1920×1111 42.2 KB