Question

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

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/

Answer 1

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

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

Three.js - 如何使我的文本精灵更清晰？

1 个答案: