我有一段代码可以从一段文本中创建一个精灵。

var getPicture = function(message){
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var fontSize = 10;
  context.font = fontSize + "px Times New Roman";
  var measurements = context.measureText(message);
  canvas.width = measurements.width + 10;
  canvas.height = fontSize + 2;
  context.fillText(message, 0, 10);

  return canvas;
};

var getLabel = function(message){
  var texture = new THREE.Texture(getPicture(message));
  texture.minFilter = THREE.LinearFilter;
  texture.needsUpdate = true;
  var spriteMaterial = new THREE.SpriteMaterial({map: texture});
  var sprite = new THREE.Sprite(spriteMaterial);
  return sprite;
};

但是不幸的是,精灵看起来像这样:

文字模糊

如何在场景中获得清晰的文字?

  ask by Joshua Moore translate from so

本文未有回复,本站智能推荐:

1回复

如何模糊画布元素的一部分?

如何模糊画布元素的一部分? 我正在使用一个名为three.js的JavaScript 3D库。 Three.js是一个使WebGL更简单的库。 它们在那里提供了一些模糊和景深示例,但是我认为这些是我不熟悉的后期处理效果。 有没有一种“简便”的方法可以使例如画布元素顶部的像素模糊60px
1回复

SVG纹理从three.js中的画布模糊

我试图在带有 UV 映射的模型上使用 SVG 作为纹理,问题是变得非常模糊,我从 2D 画布中获取纹理,它看起来不错,但在模型上看起来很糟糕,附上截图,任何想法? 使用 SVG 的目的是因为这样我可以动态地操作颜色属性,所以使用 JPG 或 PNG 不是一种选择 编辑:这里的实时版本 - >
1回复

如何使用js在画布中制作雾化效果或模糊效果?

我正在使用javascript和THREE.js 3d引擎, 我想做雾效果 这是一个示例http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain_fog.html 但它仅支持WebGL , 因此,有什么方法
1回复

Three.js中的画布纹理模糊

我正在尝试在Three.js场景中使用模糊的纹理,但是它看起来不正确。 帆布: 画布纹理: http : //jsfiddle.net/7Lzag9kc/ Three.js资料: Three.js场景: http : //jsfiddle.net/h31wv2xb/5/ 我想
1回复

将“精灵画布材质”颜色更改为另一元素的颜色

我想知道如何更改Sprite Canvas材质的颜色 这样它就可以跟随另一个具有特定ID /类别的元素的颜色。 我不确定如何实现此目标,因为CSS颜色系统为#FFFFFF,而此处为0xffffff。 我删除了第一个问题,因为我对此有了更多了解。 任何帮助将非常感激。 干杯。
1回复

部分可见的被遮挡精灵

我想在屏幕截图上重现应用程序的行为。 即当精灵被网格遮挡时,它保持部分可见,即使它现在位于前景中的网格后面。 任何提示或提示如何在 ThreeJS 中实现这一点? 谢谢
2回复

Three.js-精灵和光

我正在实施一个小3D迷宫游戏,将墙壁渲染为受PointLight影响的网格。 有些对象将作为Sprites实现,但我遇到了一个问题....对象看起来完全被照亮,这种行为就像MeshBasicMaterial一样。 像Lambert或Phong材料一样,这些精灵可能会受到光的影响吗?
2回复

白色的精灵材料?

因此,似乎SpriteMaterial的默认颜色是0xFFFFFF 。 这似乎意味着该精灵没有颜色。 如果我将材质的颜色属性更改为0xFF0000则精灵将显示为红色。 如果我想要白色怎么办? 您将如何实现?