将canvas中的文字绘制成三个js作为精灵

Question

长话短说，我正在制作一个实时折线图，并且由于每秒需要推入大量行，因此我正在使用three.js，因此，现在我需要绘制文本值对于 x 和 y 轴，经过相当长的斗争（因为我是一个完全的菜鸟@threejs），我想出了使用画布作为精灵的绝妙技术（这是该死的 rad ）。这是我使用的代码

/// 2D REALM

var canvas = document.createElement('canvas'),
        context = canvas.getContext('2d'),
        metrics = null,
        textHeight = 100,
        textWidth = 0,
        actualFontSize = 2;

        context.fillStyle = '#FF0000';
        var size = 250;
          canvas.width = size;
          canvas.height = size;

function addText(position, text) {
  context.textAlign = 'center';
  context.font = '24px Arial';
  context.fillText("Game Over", size/2, size/2);

  var texture = new THREE.Texture(canvas);
  texture.needsUpdate = true;
  var material = new THREE.SpriteMaterial( { map: texture, color: 0x333333, fog: false } );
  var sprite = new THREE.Sprite( material );
  sprite.position.set(0,100,0);

  return sprite;
}

. . .

 $(document).ready(function() {
   h = $(window).height() - $('.speed-graph').outerHeight() - $('.speed-toolbar').outerHeight() - $('.channel-toolbar').outerHeight() - $('.status_bar').outerHeight() + 1;
      w = $(window).width() - $('.palette').outerWidth();


      camera = new THREE.PerspectiveCamera( 75, parseFloat(w) / parseFloat(h), 0.1, 5000 );


    //renderer.setSize( window.innerWidth, window.innerHeight );
      console.log("w: " + w + " | h: " + h);
      renderer.setSize(w, h);

      $('body').append( renderer.domElement );

      var material = new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 1 });
      var geometry = new THREE.Geometry();

      geometry.vertices.push( new THREE.Vector3(-10 , 0, 0 ) );
      geometry.vertices.push( new THREE.Vector3(8 , 0, 0 ) );

      lines['line'].push(  new THREE.Line( geometry, material ))
      text = addText(new Array(0, 9), "lorem ipsum");
      //lines['label'].push( addText(new Array(0, 9), "0") );
      scene.add( lines['line'][0] );
      scene.add( text );


      camera.position.z = 5;
      render(); 
});

现在，线条已按应有的方式绘制，但是我对文本一点运气都没有。我不明白为什么我看不到文本，因为我没有收到任何编译器错误。

Answer 1

最后，我自己想通了，问题是画布没有合适的尺寸，再加上一堆其他东西。

为了解决方案，并希望将来能帮助其他人，这里是工作代码和代码笔，可以看到它的实际运行情况。

  /// 2D REALM

  //var canvas = document.createElement('canvas'),
  var     canvas,
          context,
          metrics = null,
          textHeight = 10,
          textWidth = 0,
          actualFontSize = 0.12;

       canvas = document.createElement('canvas'),
       context = canvas.getContext('2d');
       context.fillStyle = '#FF0000';


  function addText(position, text) {
    // 2d duty
    metrics = context.measureText(text);
    var textWidth = metrics.width;

    canvas.width = textWidth;
    canvas.height = textHeight;
    context.font = "normal " + textHeight + "px Arial";
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillStyle = "#ff0000";
    context.fillText(text, textWidth / 2, textHeight / 2);

    var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    var material = new THREE.SpriteMaterial({ map: texture, useScreenCoordinates: false });
    var sprite = new THREE.Sprite( material );

    var textObject = new THREE.Object3D();
   // var sprite = new THREE.Sprite(texture);
    textObject.textHeight = actualFontSize;
    textObject.textWidth = (textWidth / textHeight) * textObject.textHeight;
    sprite.scale.set(textWidth / textHeight * actualFontSize, actualFontSize, 1);

  //  sprite.position.set(10,10,0);

    textObject.add(sprite);
    return textObject;
  }

  var scene = new THREE.Scene();
  var camera;
  var renderer = new THREE.WebGLRenderer({
      alpha: 1,
      antialias: true,
      clearColor: 0xffffff
  });


   $(document).ready(function() {
     h = $(window).height() - $('.speed-graph').outerHeight() - $('.speed-toolbar').outerHeight() - $('.channel-toolbar').outerHeight() - $('.status_bar').outerHeight() + 1;
        w = $(window).width() - $('.palette').outerWidth();


        camera = new THREE.PerspectiveCamera( 75, parseFloat(w) / parseFloat(h), 0.1, 5000 );

        console.log("w: " + w + " | h: " + h);
        renderer.setSize(w, h);

        $('body').append( renderer.domElement );

        text = addText(new Array(0, 9), "it works!!");
        scene.add( text );
        console.log(text.position);
  //      text.position.x = 3.0;

        camera.position.z = 5;
        render(); 
  });

  // render the whole things up
  function render() {

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

  }