Question

我正在尝试使用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);
  }

Answer 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。

Answer 2

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

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

2 个答案: