3D wireframe face for a website chat assistant (Three.js / WebGL)

via Freelancer ·

Budget / Salary$250–750
TypeFreelance project
LocationRemote
Posted4 hours ago
We’re a US electronics buyback company adding an animated face to the chat assistant on our website. The look is a glowing gold wireframe face that pushes out of a flat grid “wall” when a chat opens, as if through a rubber sheet, and sinks back when the chat ends. While the assistant talks, the mouth moves in time with its voice. A storyboard is attached.

Who we’re looking for

Strong Three.js / WebGL experience. Please show live demos, not just videos.
3D face modeling and rigging: a realistic face mesh with good topology, a jaw and lips that move cleanly, and ideally blendshapes for mouth shapes (visemes).
Lip sync to audio. Our assistant speaks through the browser’s built-in voice, so you’ll get a 0–1 “loudness” value, not the audio file itself.
Performance work for phones: smooth on a mid-range Android phone in Chrome.

The look

A gold wireframe coming out of my white screen. Our colors are
#cd9901 (brand gold) and
#f0c433 (glow).
A structured, defined face: cheekbones, nose, lips and open eyes, like the storyboard. A soft or blobby face won’t work.
The grid behind the face bends around it, like a rubber sheet.
The face must be original. It can’t resemble a real person, a celebrity, or any existing character.

What it must do

Four states: idle, listening (leans in slightly), thinking (subtle pulse), speaking (mouth moves).
Rise out of the wall when the chat opens.
Respect “reduce motion” settings: appear without the animation, with minimal movement.
Fail quietly: if the device can’t run WebGL, show nothing rather than an error.

Deliverables

A TypeScript module using Three.js 0.170 with this interface: createFace(container) → { setMode(mode), setAudioLevel(0–1), destroy() }. We’ll share a working placeholder so you can see exactly how it plugs in.
The face model as .glb, plus the source files: Blender or similar, and any textures.
Total download under 2 MB.
A short note on how to change colors and animation speed.

Rights
Full commercial rights transfer to us. Any third-party assets must allow commercial use, and you must list them with their licenses. Nothing “non-commercial” and no unlicensed scans.

Milestones

A still image or short clip of the face, for us to approve the look.
A working animated demo page.
The final module and source files.

To apply, answer:

A link to a Three.js or WebGL project of yours that runs live in a browser.
Have you rigged a face for lip sync before? How would you drive the mouth from a 0–1 loudness value?
How would you keep this smooth on a mid-range Android phone?
Your price and timeline for each milestone.
3d rendering animation 3d modelling 3d animation blender three.js 3d rigging visual effects 3d graphic design
Apply on Freelancer →

Project sourced from Freelancer.com. Applications happen directly on the original platform — we never collect your data.