Problem in function that makes sprites of emojis

I’m having this error:
aframe-master.js:26248 Uncaught TypeError: Cannot read property 'getUniforms' of undefined

This is the function i wrote, It was working till a few days ago, dont exacly know what is causing the error.

_makeEmojiSprite(message, emojiSize = 2.5) {
let url = window.location.search.substring(1);
let emojiwidth = new URLSearchParams(url).get("emojiWidth")
  ? new URLSearchParams(url).get("emojiWidth")
  : 80;
let fontface = "Arial";
let fontsize = emojiwidth * 0.75;

let canvas = document.createElement("canvas");
canvas.width = emojiwidth;
canvas.height = emojiwidth;
let context = canvas.getContext("2d");
context.font = `Bold ${fontsize}px ${fontface}`;
context.font = `Bold ${fontsize}px ${fontface}`;
context.lineWidth = 1;
context.fillText(message, -2, fontsize - 3);

let texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

let spriteMaterial = new THREE.SpriteMaterial({
  map: texture,
  transparent: false,
  alphaTest: 0.5
});
let sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(
  emojiSize * 0.5 * fontsize,
  emojiSize * 0.45 * fontsize,
  0.25 * fontsize
);
return sprite;
}

Thanks

Probably a version upgrade? Can you please verify this by downgrading your project dependencies?

Consider to use THREE.CanvasTexture here. Both lines can be replaced with:

let texture = new THREE.CanvasTexture(canvas);
1 Like

Thank you for the tip about the ‘CanvasTexture’.

About downgrading my dependecies, I actually tried to update three.js to ‘0.113.2’ and it works again!

Thank you for your help :slight_smile:

1 Like