# Three.js face mask

Published articles for Three.js face mask.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Building a Real-Time 3D Face Mask with MediaPipe, Threlte and Three.js

DevFeed: [Building a Real-Time 3D Face Mask with MediaPipe, Threlte and Three.js](<https://devfeed.tech/articles/building-a-real-time-3d-face-mask-with-mediapipe-threlte-and-three-js-4342.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/06/building-a-real-time-3d-face-mask-with-mediapipe-threlte-and-three-js/>)

Author: Marek Jóźwiak

Published: 2026-09-06T13:09:52Z

Content type: tutorial

Language: en

Sources: [Codrops](<https://devfeed.tech/sources/codrops.md>)

Topics: [Three.js webcam](<https://devfeed.tech/topics/three-js-webcam.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [3d-face-mask](<https://devfeed.tech/tags/3d-face-mask.md>), [canonical-face-model](<https://devfeed.tech/tags/canonical-face-model.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [face-landmarks](<https://devfeed.tech/tags/face-landmarks.md>), [face-mesh](<https://devfeed.tech/tags/face-mesh.md>), [face-tracking](<https://devfeed.tech/tags/face-tracking.md>), [facial-landmarks](<https://devfeed.tech/tags/facial-landmarks.md>), [generative-graphics](<https://devfeed.tech/tags/generative-graphics.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [inference](<https://devfeed.tech/tags/inference.md>), [interactive-3d](<https://devfeed.tech/tags/interactive-3d.md>), [javascript-3d](<https://devfeed.tech/tags/javascript-3d.md>), [mediapipe](<https://devfeed.tech/tags/mediapipe.md>), [mediapipe-face-landmarker](<https://devfeed.tech/tags/mediapipe-face-landmarker.md>), [mesh](<https://devfeed.tech/tags/mesh.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [real-time-3d](<https://devfeed.tech/tags/real-time-3d.md>), [real-time-face-tracking](<https://devfeed.tech/tags/real-time-face-tracking.md>), [svelte](<https://devfeed.tech/tags/svelte.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-face-mask](<https://devfeed.tech/tags/three-js-face-mask.md>), [three-js-webcam](<https://devfeed.tech/tags/three-js-webcam.md>), [threlte](<https://devfeed.tech/tags/threlte.md>), [threlte-three-js](<https://devfeed.tech/tags/threlte-three-js.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>), [tutorials](<https://devfeed.tech/tags/tutorials.md>), [video](<https://devfeed.tech/tags/video.md>), [vision](<https://devfeed.tech/tags/vision.md>), [wasm](<https://devfeed.tech/tags/wasm.md>), [webcam](<https://devfeed.tech/tags/webcam.md>), [webcam-effects](<https://devfeed.tech/tags/webcam-effects.md>), [webcam-face-tracking](<https://devfeed.tech/tags/webcam-face-tracking.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [webgl-face-tracking](<https://devfeed.tech/tags/webgl-face-tracking.md>)

### AI overview

Tutorial on building a real-time textured 3D face mask by mapping MediaPipe face landmarks onto a Three.js mesh with Threlte.

### Source excerpt

Learn how MediaPipe's face landmarks, Google's canonical face model, and Three.js come together to create a real-time textured 3D face mask.