Map twitch chat text onto obj

Heya! I’ve streamed chat from twitch onto a box geometry. I was wondering how to do this for an obj of a head? Would I need to use some sort of projection mapping?

here’s the code I have now for my box geometry with text texture

var geometry = new THREE.BoxGeometry(5,5,5);

var canvas = document.createElement(“canvas”);
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext(“2d”);
var texture = new THREE.CanvasTexture(canvas);
var material = new THREE.MeshBasicMaterial({ map: texture });
controls = new THREE.OrbitControls(camera, renderer.domElement);

  ComfyJS.onChat = (user, message, flags, self, extra) => {
    ctx.fillStyle = "white";
        ctx.fillRect(0, 0, 500, 500);
        ctx.fillStyle = "black";
        ctx.font = "50px sans-serif";
        ctx.fillText(message, 50, 250);
        texture.needsUpdate = true;

ComfyJS.Init( “channelName” );

var cube = new THREE.Mesh(geometry, material);

Do you mean streaming chat texture on a 3D model of a head? Could you explain it a bit more or maybe visualise it :thinking: ?

This is currently my sketch

so I was hoping instead of the cube where the texture is a text, can the text be on the obj/ model of head. So the text wraps around the surface of the head, the way it did with a cube or a sphere
p.s, if on the glitch app you don’t see a text, the livestream mightve ended, but below is an example of the text which is constantly updating

so instead of the text from live twitch chats on

it’ll be on


Sure, it’s possible - and should look pretty as long as the model is properly UV unwrapped.

Instead of adding a cube, just load the 3D model and replace all materials on it with your twitch chat material, ex.:

// Setup your Twitch chat material with ComfyJS
const chatTexture = new THREE.CanvasTexture(canvas);
const twitchChatMaterial = new THREE.MeshBasicMaterial({ map: chatTexture });

ComfyJS.onChat = (user, message, flags, self, extra) => {
  // ...

// Load the model
new GLTFLoader.load('my/model/path.glb', (gltf) => {

  // Traverse all meshes / submeshes in the model
  gltf.scene.traverse(child => {
    if (child.isMesh) {

      // If mesh has any existing material, dispose it
      if (child.material) {

      child.material = twitchChatMaterial;

(This one uses GLTFLoader, but any model type should do.)