Three.js - 如何使我的文本精灵更清晰？ [英] Three.js - How to make my text sprite clearer?

问题描述

我需要我的文本精灵看起来更清晰/更强（最容易阅读），这是我创建它的代码：

i need my text sprite to look more clear/strong (easiest to read), here is the code where i create it:

var canvas1 = document.createElement('canvas');
var context1 = canvas1.getContext('2d');
context1.font = "Bold 8px Arial";
context1.fillStyle = "rgba(255,0,0,0.95)";
context1.fillText(text, 170, 60);

var texture1 = new THREE.Texture(canvas1);
texture1.needsUpdate = true;

var spriteMaterial = new THREE.SpriteMaterial( { map: texture1, color: 0xffffff, fog: true } );
var sprite = new THREE.Sprite( spriteMaterial );
sprite.scale.set(window.innerWidth/5, window.innerHeight/5, 1);
var positionsT = positions.split(",");
sprite.position.set(positionsT[0]-20, positionsT[1]-80, positionsT[2]-40);
scene.add(sprite); 

有人可以给我一些建议吗？这就是它在这一刻的表现： http://postimg.org/image/uqke1k35h/

Could anybody give me some advice? this is how it looks at this moment: http://postimg.org/image/uqke1k35h/

推荐答案

您可以做的一件事是关闭mip-mapping，以便不应用纹理过滤 texture1 .generateMipmaps = false;

One thing you can do is to turn off mip-mapping so that no texture filtering is applied texture1.generateMipmaps = false;

您可以做的另一件事是不将纹理缩放到与画布宽高比太大不同的宽高比这当然取决于你的文字大小。

The other thing you can do is not scale the texture to an aspect ratio too much different from your canvas aspect ratio which of course depends on the size of your text.

这篇关于Three.js - 如何使我的文本精灵更清晰？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！