Print value of an array using three.js TextGeomtery

Question

How can I print the values of an array using three.js textGeometry. Trying the following code but no output.

   `for(let i=0;i<=4;i++)
    {   
        let arr = [1,2,3,4,5,6,7,8];
        let char = arr[i];
        let loader = new THREE.FontLoader();
        let font = loader.parse(fontJSON);
        let geometry = new THREE.TextBufferGeometry(char ,{font : font , size : 1 , height : 0.1 });
        let material = new THREE.MeshBasicMaterial({ color : 0xffffff });
        let text = new THREE.Mesh(geometry , material);
        text.position.set(i,0,0);
        scene.add(text);
    }`

score 0 · Accepted Answer · answered Jun 06 '20 at 14:20

You have to make sure to provide a string to TextBufferGeometry, no number. You can easily ensure this by calling toString() on your char variable. I've refactored your code a bit to show you a complete example.

let camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 8;

  scene = new THREE.Scene();

  const material = new THREE.MeshBasicMaterial({
    color: 0xffffff
  });
 
  const arr = [1, 2, 3, 4, 5, 6, 7, 8];

  const loader = new THREE.FontLoader();
  loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', (font) => {

    for (let i = 0; i <= 4; i++) {

      const char = arr[i];

      const geometry = new THREE.TextBufferGeometry(char.toString(), {
        font: font,
        size: 1,
        height: 0.1
      });

      const text = new THREE.Mesh(geometry, material);
      text.position.set(i, 0, 0);
      scene.add(text);
    }

  });

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

}

function animate() {

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

}

body {
   margin: 0;
}
canvas {
 display: block;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.117.1/build/three.js"></script>

Please accept/upvote the answer if it was useful to you. – Mugen87 Jun 19 '20 at 15:23 — Mugen87, Jun 19 '20 at 15:23

Print value of an array using three.js TextGeomtery

1 Answers1