I've been struggling for hours to display text using three.js. My attempt was to use three-bmfont-text following the steps in this guide, but I keep encountering these errors:
THREE.BufferAttribute: .setArray has been removed. Use BufferGeometry .setAttribute to replace/resize attribute buffers
and after a few seconds, the app crashes with this error message:
this.scene.add is not a function
Although when I log this.scene, it does return the correct scene.
What should I do differently here? Do I need to change my approach to loading text?
import * as THREE from 'three';
import fontFile from '../assets/fonts/RLUnno.fnt';
import fontAtlas from '../assets/fonts/RLUnno.png';
const MSDFShader = require('three-bmfont-text/shaders/msdf');
const createGeometry = require('three-bmfont-text');
const loadFont = require('load-bmfont');
export default class Title {
constructor($el, $scene) {
this.scene = $scene;
this.title = $el;
loadFont(fontFile, (err, font) => {
const geometry = createGeometry({
font: font,
text: this.title.innerText
});
const loader = new THREE.TextureLoader();
loader.load(fontAtlas, (texture) => {
this.init(geometry, texture);
})
});
}
init = (geometry, texture) => {
const material = new THREE.RawShaderMaterial(MSDFShader({
map: texture,
color: 0x000000,
side: THREE.DoubleSide,
transparent: true,
negate: false
}));
const mesh = new THREE.Mesh(geometry, material);
this.scene.add(mesh);
};
}