如何使用 Three.js 沿弧线打印文本？答案

【问题标题】：How can I print text along an arc using Three.js?如何使用 Three.js 沿弧线打印文本？
【发布时间】：2019-01-29 03:08:28
【问题描述】：

我正在尝试使用 Three.js 沿弧线打印文本。在this post 的帮助下，我能够得到旋转的数学运算。但是，正如您将看到的，所有文本都在其自身之上杂乱无章。我怎样才能让它正确地把自己隔开？ Codepen 是here。

var container, camera, scene, renderer;

function init() {
  container = document.getElementById( 'canvas' );
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 100000);
  camera.position.z = 500;
  scene.add(camera);

  var loader = new THREE.FontLoader();
      loader.load( 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/fonts/helvetiker_bold.typeface.json', function ( font ) {


  var theText = "This is some text."

  var numRadsPerChar = 2*Math.PI/theText.length;

  for (var i = 0; i < theText.length; i++){
    var char = theText[i]
   var geometry = new THREE.TextBufferGeometry( char, {
    font: font,
    size: 60,
    height: 60,
    curveSegments: 20
  });

  var materials = [
    new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: 0.5 } ),
          new THREE.MeshBasicMaterial( { color: 0x000000, overdraw: 0.5 } )
        ];

    var mesh = new THREE.Mesh( geometry, materials );
    mesh.rotation.z = (i * numRadsPerChar);
    //mesh.position.x = i * 20;
    group = new THREE.Group();
    group.add( mesh );
    scene.add( group );
    };
  } );

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

  animate();


} init();

 function animate() {   
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }

【问题讨论】：

标签： javascript math three.js geometry

【解决方案1】：

在解决这个问题时得到了一些帮助，但这是需要编辑才能工作的部分：

  mesh.rotation.z = (i * numRadsPerChar);

需要：

 mesh.position.x = 100 * Math.sin(i * numRadsPerChar);
 mesh.position.y = 100 * Math.cos(i * numRadsPerChar);
 mesh.rotation.z = Math.PI/2 -(i * numRadsPerChar);

基本上，我需要为旋转添加一个常量 (Math.PI/2)。对于 x 和 y 位置，我必须分别取正弦和余弦，以使字母正确放置在圆弧周围。这是一个有效的codepen。

【讨论】：

【解决方案2】：

另一种方法是在画布上绘制文本并在纹理中使用画布，其中 texture.wrapS 和 .wrapT 设置为 THREE.RepeatWrapping.. 然后将该纹理放在材质上.. 然后制作具有拉伸路径几何形状的路径并设置它的材质。您可以通过在渲染循环中设置每帧的 texture.offset.x 或 y 来移动文本。

【讨论】：