使用three.js TextGeomtery打印一个数组的值。

Question

如何使用three.js textGeometry打印数组的值。尝试下面的代码，但没有输出。

   `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);
    }`

Answer 1

你必须确保提供一个字符串到 TextBufferGeometry，没有号码。你可以很容易地确保这一点，通过拨打 toString() 在你 char 变量。我重构了一下你的代码，给你看一个完整的例子。

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/[email protected]/build/three.js"></script>