# Best approach for real-time facial morphing (nose, chin, lips) in Three.js

**URL:** <https://discourse.threejs.org/t/best-approach-for-real-time-facial-morphing-nose-chin-lips-in-three-js/87032>\
**Category:** Questions\
**Tags:** skinned-mesh, morph-targets, blending, blendshapes, face, animation, geometry, materials\
**Created:** [September 16, 2025, 3:02pm UTC](https://discourse.threejs.org/t/best-approach-for-real-time-facial-morphing-nose-chin-lips-in-three-js/87032 "2025-09-16T15:02:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Parisa\_Shahbazi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/parisa_shahbazi/32/43776_2.png) [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Post date:** [September 16, 2025, 3:02pm UTC](https://discourse.threejs.org/t/best-approach-for-real-time-facial-morphing-nose-chin-lips-in-three-js/87032/1 "2025-09-16T15:02:02Z")

</div>

Hi everyone,

I’m working on a project where we receive a 3D scan of a patient’s face (from a mobile app).  
We want to build a web-based tool where users can interactively change facial features — for example:

- Increase/decrease nose size (width/length)

- Change chin length/position

- Adjust lips volume

The goal is to give a **real-time preview before surgery**.

Some details:

- The face model will be loaded in Three.js (format can be GLTF/OBJ, we have control over export).

- We need smooth deformations (not just moving vertices manually) and must keep the texture realistic.

- Ideally, we’d like sliders for each parameter.

My questions:

1. What is the **best approach** in Three.js for this kind of morphing?

2. If we use morph targets, how should we prepare the models? (e.g. need multiple morphed versions of the face with different parameters?)

3. Any recommended libraries, tools, or examples for real-time face morphing in the browser?

Thanks for any advice or example code!

---

<div class="post-metadata">

**Author:** ![Krishan\_Kaushik\_Tiruvidula](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/krishan_kaushik_tiruvidula/32/50623_2.png) [@Krishan\_Kaushik\_Tiruvidula](https://discourse.threejs.org/u/Krishan_Kaushik_Tiruvidula)\
**Post date:** [September 16, 2025, 3:23pm UTC](https://discourse.threejs.org/t/best-approach-for-real-time-facial-morphing-nose-chin-lips-in-three-js/87032/2 "2025-09-16T15:23:43Z")

</div>

Check this one might be helpful [hand-tracking-threejs](https://www.8thwall.com/8thwall/hand-tracking-threejs)

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [September 16, 2025, 4:44pm UTC](https://discourse.threejs.org/t/best-approach-for-real-time-facial-morphing-nose-chin-lips-in-three-js/87032/3 "2025-09-16T16:44:05Z")

</div>

Probably mesh skinning. But it’s going to be a tricky prospect.. you’ll have to find a way to automatically rig the scanned mesh onto your face rig.

There is a new opensource autorigger for bodies that may serve as inspiration… but this is a pretty highly technical task:

> **[Mesh2Motion](https://mesh2motion.org/)**

---

<div class="post-metadata">

**Author:** ![Parisa\_Shahbazi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/parisa_shahbazi/32/43776_2.png) [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Post date:** [September 17, 2025, 9:27am UTC](https://discourse.threejs.org/t/best-approach-for-real-time-facial-morphing-nose-chin-lips-in-three-js/87032/4 "2025-09-17T09:27:56Z")

</div>

I think for 8thwall we have to pay

---

<div class="post-metadata">

**Author:** ![Parisa\_Shahbazi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/parisa_shahbazi/32/43776_2.png) [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Post date:** [September 17, 2025, 9:30am UTC](https://discourse.threejs.org/t/best-approach-for-real-time-facial-morphing-nose-chin-lips-in-three-js/87032/5 "2025-09-17T09:30:32Z")

</div>

> [@manthrax](#):
>
> Probably mesh skinning. But it’s going to be a tricky prospect.. you’ll have to find a way to automatically rig the scanned mesh onto your face rig.
> 
> There is a new opensource autorigger for bodies that may serve as inspiration… but this is a pretty highly technical task:

Do we need rig for face morphing?I thought rig related to animation.What do you think about using morph target?

---

<div class="post-metadata">

**Author:** ![vis\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vis_prime/32/39829_2.png) [@vis\_prime](https://discourse.threejs.org/u/vis_prime)\
**Post date:** [September 17, 2025, 1:05pm UTC](https://discourse.threejs.org/t/best-approach-for-real-time-facial-morphing-nose-chin-lips-in-three-js/87032/6 "2025-09-17T13:05:00Z")

</div>

maybe use media pipe face landmarker to get the face mesh [https://ai.google.dev/edge/mediapipe/solutions/vision/face\_landmarker](https://ai.google.dev/edge/mediapipe/solutions/vision/face_landmarker)

and since the vertices will be in the same order , you could try manipulating the nose vertices to make it wider longer etc