使用 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 提供一个字符串，而不是数字。您可以通过在 char 变量上调用 toString() 轻松确保这一点。我对您的代码进行了一些重构，以向您展示一个完整的示例。

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>

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

Print value of an array using three.js TextGeomtery

variables

graph

three.js

scale

axes