Threejs - 3d Text

by black strings

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

<!-- note: TextGeometry works for SVG renderer but troika text won't due to faceless geometry at runtime -->

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

JavaScript

var scene, renderer, camera, ocam, pcam;
var controls, loadedFont, text3d;

init();
lightSetup();

// any mouse event for updating the font size on mouse event
function bindEventsToSameHandler(element, events, handler) {
    for(var i = 0; i < events.length; i++) {
        element.addEventListener(events[i], handler);
    }
}

// update font scale on any mouse event
const events = ['click', 'mouseup', 'mousedown'];    // add mouse events you want to handle
bindEventsToSameHandler(document, events, function() {
	if(text3d && camera) {
  	const zoom = camera.zoom;
    const maxScale = 3;
    const tempScale = 1 / zoom;
    const scale = tempScale > maxScale ? maxScale : tempScale;
  	text3d.scale.set(scale, scale, scale);
    //text3d.updateMatrix();
    console.log('camera', camera.zoom);
  }
});

animate();

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
   scene.rotation.x = -Math.PI / 2;
  
  // size must be multiple of gridUnit to sync up the unit and spacing
  const gridSize = 128;
  const gridUnit = 12;
  var gridXZ = new THREE.GridHelper(gridSize * gridUnit, gridSize);
  scene.add(gridXZ);
  //gridXZ.rotation.x = -Math.PI / 2;
 

  var axes = new THREE.AxesHelper(1000);
  scene.add(axes);

  camera = getOrthoCamera();

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  if(camera instanceof THREE.OrthographicCamera) {
  	controls.enableRotate = false;
  }
  
  init3dFont();
  
  // 1 foot box test
  const g = new THREE.BoxGeometry(12, 12, 12);
  g.applyMatrix(new THREE.Matrix4().makeTranslation(6,6,-6))
  const mat = new THREE.MeshBasicMaterial({color: 0x00ff00});
  const m = new THREE.Mesh(g, mat);
  scene.add(m);
  
}

function getOrthoCamera() {
	if(!ocam) {
  		const width = window.innerWidth;
    	const height =...