Map twitch chat text onto obj

[saltykiam]

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);
scene.add(cube);

[mjurczyk]

@saltykiam

was wondering how to do this for an obj of a head

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

[saltykiam]

This is currently my sketch
https://quirky-button-count.glitch.me/

Glitch

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

[mjurczyk]

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) => {
  // ...
};
ComfyJS.Init('channelName');

// 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.dispose();
      }

      child.material = twitchChatMaterial;
    }
  });
});

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