# Generate mesh from face landmarks mesh

**URL:** <https://discourse.threejs.org/t/generate-mesh-from-face-landmarks-mesh/29448>\
**Category:** Questions\
**Tags:** mesh, geometry\
**Created:** [August 31, 2021, 10:44pm UTC](https://discourse.threejs.org/t/generate-mesh-from-face-landmarks-mesh/29448 "2021-08-31T22:44:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Domantas\_Krasuckis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/domantas_krasuckis/32/16460_2.png) [@Domantas\_Krasuckis](https://discourse.threejs.org/u/Domantas_Krasuckis)\
**Post date:** [August 31, 2021, 10:44pm UTC](https://discourse.threejs.org/t/generate-mesh-from-face-landmarks-mesh/29448/1 "2021-08-31T22:44:26Z")

</div>

Hello,  
I am using [tfjs-models/face-landmarks-detection at master · tensorflow/tfjs-models · GitHub](https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection) Tensorflow face landmarks detection library and I am trying to create mesh from tensorflow keypoints.

```javascript
        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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/a/2aeb4bfd52a9a946d994f798d01d35bdf3d12159.png)

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 1, 2021, 9:09am UTC](https://discourse.threejs.org/t/generate-mesh-from-face-landmarks-mesh/29448/2 "2021-09-01T09:09:41Z")

</div>

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/](https://jsfiddle.net/k1q7swbo/)

---

<div class="post-metadata">

**Author:** ![Domantas\_Krasuckis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/domantas_krasuckis/32/16460_2.png) [@Domantas\_Krasuckis](https://discourse.threejs.org/u/Domantas_Krasuckis)\
**Post date:** [September 1, 2021, 10:55pm UTC](https://discourse.threejs.org/t/generate-mesh-from-face-landmarks-mesh/29448/3 "2021-09-01T22:55:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![abernier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/abernier/32/23939_2.png) [@abernier](https://discourse.threejs.org/u/abernier)\
**Post date:** [April 20, 2023, 9:30am UTC](https://discourse.threejs.org/t/generate-mesh-from-face-landmarks-mesh/29448/4 "2023-04-20T09:30:37Z")

</div>

Related to this, I made a `<Facemesh>` component for r3f here [Facemesh - CodeSandbox](https://codesandbox.io/s/4lzxrr)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/5/f51c5c421fdc370a47c25424646d7e2865a522de.jpeg)