src/SceneHelper.js
/**
     * creates a THREE.Sprite object that has a canvas as texture that was filled with text. uses createLetterTexture to create the texture.
     * @param {string} letter examples: "a", "lksdfj", 0.546, 91734917, "78n6"
     * @param {Vector3} position Vector3 object {x, y, z}
     * @param {string} align "center", "left" or "right"
     * @param {number} scale scaling of the letter, default is 1
     */
creates a THREE.Sprite object that has a canvas as texture that was filled with text. uses createLetterTexture to create the texture.
creates a THREE . Sprite object that has a canvas as texture that was filled with text . uses createLetterTexture to create the texture .
placeLetter(letter, position, align="center", scale=1)
    {
        letter = ""+letter
        let canvasToTexture = this.createLetterTexture(letter, align)
        let geometry = new THREE.Geometry()
        geometry.vertices.push(new THREE.Vector3(0, 0, 0)) 
        let textureToSprite = new THREE.Points(geometry, new THREE.PointsMaterial({
            map: canvasToTexture,
            depthTest: true,
            sizeAttenuation: false,
            size: canvasToTexture.image.width * this.textScale * scale,
            transparent: true,
        }))
        textureToSprite.position.set(position.x, position.y, position.z)
        textureToSprite.renderOrder = Number.MAX_SAFE_INTEGER
        textureToSprite.name = "sprite_"+letter
        return textureToSprite
    }
placeLetter ( letter , position , align = "center" , scale = 1 ) { letter = "" + letter let canvasToTexture = this . createLetterTexture ( letter , align ) let geometry = new THREE . Geometry ( ) geometry . vertices . push ( new THREE . Vector3 ( 0 , 0 , 0 ) ) let textureToSprite = new THREE . Points ( geometry , new THREE . PointsMaterial ( { map : canvasToTexture , depthTest : true , sizeAttenuation : false , size : canvasToTexture . image . width * this . textScale * scale , transparent : true , } ) ) textureToSprite . position . set ( position . x , position . y , position . z ) textureToSprite . renderOrder = Number . MAX_SAFE_INTEGER textureToSprite . name = "sprite_" + letter return textureToSprite }
creates a THREE.Sprite object that has a canvas as texture that was filled with text.
creates a THREE . Sprite object that has a canvas as texture that was filled with text .
// I'm using Points and PointsMaterial instead of SpriteMaterial so that sizeAttenuation: false can be used // Sprite and SpriteMaterial zooms the sprites when zooming in // 0, 0, 0 so that I can move it around using the position.set() // depthWrite: false, // make sure it renders on the top // transform scale // textureToSprite.scale.set(size*Math.pow(2, letter.length),2*size) // textureToSprite.scale.set(size,size)