Three.js

Question

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

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;

您可以做的另一件事是不要将纹理缩放到与 canvas 纵横比相差太大的纵横比，这当然取决于您的文本大小。

Three.js - 如何让我的文字精灵更清晰？

Three.js - How to make my text sprite clearer?

html

javascript