Load font into global variable - efficiency

Questions
2

I took a closer look at the loaders. With DefaultLoadingManager.onLoad things become clearer and possibly a bit more performant.

The animate function is simpler.
At DynamicChangeableText now the new version.

The modified part of the code:


THREE.DefaultLoadingManager.onLoad = function ( ) {

	console.log( 'Loading Complete!');
    change = true;
    initText( );
    
};
            // https://threejs.org/examples/fonts/helvetiker_regular.typeface.json
fontLoader.load( 'helvetiker_regular.typeface.json', font => ft = font );

 
console.log( 'global 0', ft );


animate( );

function animate( ) {

    requestAnimationFrame( animate );   
    if( change ) changeText( );
    renderer.render( scene, camera );
    
}

===================================

UPDATE:

The simplest things are often only found at the end.
One thinks much too complicated and crosswise.

The solution now under the original link DynamicChangeableText

The full code:

<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/load-font-into-global-variable-efficiency/31608 -->
<head>
    <title> DynamicChangeableText </title>
    <meta charset="utf-8" />
    <style>
    body {
        margin: 0;
    }
    </style>
</head>
<body> </body>

<script src="../js/three.min.134.js"></script>
<script src="../js/OrbitControls.134.js"></script>
<script src="../js/FontLoader.134.js"></script>
<script>

// @author hofk

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 0, 3 );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xfdfde2, 1 );

document.body.appendChild( renderer.domElement );

const controls = new THREE.OrbitControls( camera, renderer.domElement );
 
const fontLoader = new THREE.FontLoader( );	
let textsGeometry = [];
let text = [];
 
THREE.DefaultLoadingManager.onLoad = function ( ) {
 
    initText( );
    animate( );
    
};
            // https://threejs.org/examples/fonts/helvetiker_regular.typeface.json
fontLoader.load( 'helvetiker_regular.typeface.json', font => ft = font );

function animate( ) {

    requestAnimationFrame( animate );   
    changeText( );
    renderer.render( scene, camera );
    
}

function initText( ) { // 1000 text lines

  for ( let i = 0; i < 1000  ; i ++ ) {
    
    const textsShapes = ft.generateShapes( 'initial text    >>> ' + i , 0.04 );
    textsGeometry[ i ] = new THREE.ShapeGeometry( textsShapes );    
    const textsMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide } ); 
    text[ i ] = new THREE.Mesh( textsGeometry[ i ], textsMaterial );
    text[ i ].position.set( 0, -20 + i / 20 , 0 );
    scene.add( text[ i ]); 
  
  }
  
}

function changeText( ) { // change some text lines dynamically

    for ( let i = 390; i < 410; i ++ ) {

        const textShp = ft.generateShapes( 'new text     >>> ' + i + ' random ' + Math.random( ), 0.035 );
        textsGeometry[ i ].dispose( );     
        text[ i ].geometry = new THREE.ShapeGeometry( textShp );
        text[ i ].geometry.needsUpdate = true;
    
    }
    
}

</script>
</html>
1 Like