CODEWITHSUNDEEP
javascriptthree.js
Tom
Tom

Reputation: 4043

Trying to load text with three.js returns several errors

I'm trying to display some text using three.js, but somehow I've been failing for the past hours. My approach was to use three-bmfont-text to load text following this tutorial - I get the following errors:

THREE.BufferAttribute: .setArray has been removed. Use BufferGeometry .setAttribute to replace/resize attribute buffers

and a few seconds later the app crashes returning this error:

this.scene.add is not a function

Even though logging this.scene returns the correct scene.

What's the correct approach here? Do I need to change my way of 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);
    };
}

Upvotes: 0

Views: 397

Answers (1)

abhijat_saxena
abhijat_saxena

Reputation: 980

You're using old version of ThreeJS, in the new version of ThreeJS - they have handled this error

See - https://github.com/Jam3/three-buffer-vertex-data/blob/master/index.js#L68
(I assume you're using three-buffer-vertex-data library)

enter image description here

Alternatively you can get your library from this branch - https://github.com/ilidio/three-buffer-vertex-data

Upvotes: 1

Related Questions