Three.js v0.132.2 with three-bmfont-text which use three.js v0.118.3

Questions
,
1

I tried to create text using three-bmfont-text

import * as THREE from "three";
import createGeometry from "three-bmfont-text"
import MSDFShader from "three-bmfont-text/shaders/msdf"
import fontFile from './static/ChrustyRock-ORLA-msdf.json';
import fontTexture from './static/ChrustyRock-ORLA.png';
 
global.THREE = require('three')

let textTexture;
let text;
export default function TextInit( ) {
 
  new THREE.TextureLoader().load(fontTexture,(t)=>{
textTexture= t;
addText();
  })

const addText=()=>{
  const geom = createGeometry({
  text: 'dkjfkdjfkdjf',
  font: fontFile,
  align: 'left',
  flipY: textTexture.flipY
})
const materialText = new THREE.RawShaderMaterial(MSDFShader({
  map: textTexture,
  transparent: true,
  color: 0xff0000
}))
let layout=geom.layout;
 text = new THREE.Mesh(geom,materialText)
text.scale.set(0.01, 0.01, 0.01)
}

return text;

}

but I got this error

image
image1294×854 37.1 KB

image
image1282×303 6.13 KB

I do not want to downgrade the root three.js dependency. Is there any way around that

2

Unfortunately, three-bmfont-text is not compatible to newer versions of three.js. The maximum supported version should be r127.

The real fix for this issue is to ask at the three-bmfont-text repository for upgrading their code so it supports the latest version of three.js.

2 Likes