Wireface for three.js

Faces for your three.js characters.

Give a person, a robot, a ghost or a pumpkin a face that talks with real lip sync, shows what it feels, and looks at whatever you choose. It's Wireface's own face, rebuilt as three.js geometry: lit by your scene, solid from every side, and as many as you like.

Open the live demo Get it on GitHub

Plain ES modules on three.js, Wireface core and Wireface 2D: no build step. Free for personal and non-commercial use; commercial licences for everything else.

Eleven three.js characters on a stage, Count Dracula speaking while the others look at him

What a face can do

Everything Wireface's face does, in your scene

It's the same animator that runs Wireface Desktop and the face at the top of this site: the blinks, breathing, gestures, expressions and lip sync, frame for frame. Here it moves three.js geometry, and your characters move with it.

Lip sync, three ways

Recorded lines aligned phoneme by phoneme (the lips close on every m, b and p); live audio from a microphone or a call; and streamed speech, Gemini Live conversations included.

await face.say(clip, { audioContext })

Expressions and moods

Fifteen moods for a few seconds or worn standing, states like thinking and asleep that change the eyes and posture, and expressions of your own from the rig's channels.

face.express('surprised')

Eyes on the world

Look at anything in the scene: the camera, a point, another character's head. The eyes go first and converge on it; the head turns for the rest, as a person's does.

face.gazeAt(camera)

Four looks

Photo skins (any portrait, made in the browser), sculpted, cel-shaded and Wireface's glowing hologram in seven colours. Skins sweep on, wireframes cross-fade, faces burn away and come back.

face.set({ style: 'toon' })

A whole head

The face brings the back of a head in its skin's colour. It tells you where its eyes, ears and crown are for hair, hats and glasses, and gives ears and hands its own skin.

face.head.add(hat)

Rigged models

Put it on a glTF model's head bone: the face's nods and turns are added on top of your animations, so a character can wave, dance and talk at once.

attachFace(findBone(robot, /head/i), face)

Two ways

A face as geometry, or a face on a screen

The same face four ways: a photo skin, a sculpted head, a cel-shaded one, and a violet hologram — FaceMesh

Wireface core's 468-point face, posed every frame and drawn by three.js: lit and shadowed by your scene, seen from any side, and as many as you like in your one renderer. For people, creatures, aliens, robots, crowds.

A monitor on a desk showing Wireface's glowing cyan hologram face — FaceScreen

A whole Wireface face, drawn by its own engine as a live texture: core's hologram with its bloom on a monitor or a visor, or Wireface 2D making a painting talk. For anything that's a screen.

Both answer to the same methods, so a character doesn't need to know which it has.

The cast

Eleven characters to start from

Each one is a short file showing one way to put a face on a head, and all of them are on one stage in the demo: click anyone to hear them, and the rest turn to look.

The whole cast on the Wireface Theatre's stage

Mei a photo skin, a bob of hair, ears in her skin tone
Walter glasses and a cap placed from the face's own measurements
Count Dracula a skin that brings its fangs, and a lined cape
Grub an ogre whose belly, hands and ears all match his skin
Unit-7 a metal skull, and lights that blink to its voice
Zib no photo: a sculpted alien with a bigger brain
Wisp a hologram face glowing in a floating ghost sheet
Patch a pumpkin scarecrow with a candle-lit face
Captain Amara Wireface core's renderer on a helmet's visor
Eleanor Wireface 2D makes an oil portrait talk
Kit a TV for a head, showing 2D's pixel art: change the channel

Open the Wireface Theatre

For developers

A few lines on any head

import { FaceMesh, attachFace } from '@wireface/three';

const face = new FaceMesh({ skin: 'mei', size: 0.27 });
attachFace(character.head, face);   // it nods and sways the head
face.gazeAt(camera);                // eyes first, then the head
face.express('happy');
await face.say(await face.clip('mei'), { audioContext });

What's in it

FaceMesh and FaceScreen: the face as geometry, or any Wireface face as a texture.
Wireface core's animation: the same expressions, gaze and lip sync, and the same method names.
Eleven characters and the kit they're built from: hair, ears, bodies and toy materials.
Twelve examples: a glTF robot, a snowman, a crowd, a microphone, a Gemini Live chat.
A user guide, tests that run in Node, and no build step.

The RobotExpressive glTF model with a hologram face on a dark plate where its eyes were — On a rigged model: `findBone()` finds the head, `attachFace()` puts the face on it, and the model's own animations play underneath.

Run it yourself

It sits beside Wireface core and Wireface 2D, which it runs on:

git clone https://github.com/compsmart/wireface-core core
git clone https://github.com/compsmart/wireface-2d 2d
git clone https://github.com/compsmart/wireface-threejs threejs
cd threejs && npm install && npm start      # http://127.0.0.1:5175/demo/

Wireface for three.js on GitHub User guide Examples

See it for real

Step into the Wireface Theatre

Eleven characters on one stage, in your browser. Click anyone to hear their line, change their looks and their skins, and watch the others turn to look.