TexFont for Three.js Demo

Demonstrates the use of a bitmapped font texture within Three.js

by Chrisssie

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/[email protected]";
import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";
import { Texfont } from "https://vielzutun.ch/wordpress/public/Texfont/Texfont.js";

// let txf = txfLoadTexfont( 'https://vielzutun.ch/wordpress/public/Texfont/default.txf' );



	let texture_ready = false;
	let srcTexture;

   let scene, camera, controls, renderer, srcMaterial, fileName;

	let txf = new Texfont();
	
	fileName = 'default.txf';
//	fileName = 'oldEnglish.txf';
//	fileName = 'adobe_courier.txf';
//	fileName = 'courier_bold.txf';
//	fileName = 'lucida_typewriter.txf';
//	fileName = 'monoMMM_5.txf';

	txf.LoadTexfont( 'https://vielzutun.ch/wordpress/public/Texfont/' + fileName, txf );

	renderer = new THREE.WebGLRenderer({antialias: true, alpha: true });
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setPixelRatio( window.devicePixelRatio );
  document.body.appendChild( renderer.domElement );

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 2000 );
	camera.position.set( 0, 0, 80  );

  controls = new OrbitControls( camera, renderer.domElement );
	controls.addEventListener( 'change', render );
  
	let texture = new THREE.TextureLoader().load( 'https://vielzutun.ch/wordpress/public/uv_grid_opengl.jpg' );
	texture.mapping = THREE.EquirectangularReflectionMapping;

	scene.background = texture;

   // axes
	scene.add( new THREE.AxesHelper( 80.0 ) );
	
	window.addEventListener( 'resize', onWindowResize );

	render();

	function onWindowResize() {

	  camera.aspect = window.innerWidth / window.innerHeight;
	  camera.updateProjectionMatrix();

	  renderer.setSize( window.innerWidth, window.innerHeight );
	  
	  render();

	}

   function render() {
		// instead of animation loop: update only on OrbitControl() 'change' events

		if(( txf.teximage.length != 0 ) && !texture_ready ) {

			// as soon...