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

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

本文关键字：精灵 清晰 文本 我的 js- 何使 Three      更新时间：2024-01-31

我需要我的文本精灵看起来更清晰/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/

您可以做的一件事是关闭mip映射，这样就不会应用纹理过滤texture1.generateMipmaps = false;

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

相关文章：