CODEWITHSUNDEEP
javascripthtmlthree.js
Jose Miguel Vega Lopez
Jose Miguel Vega Lopez

Reputation: 119

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);

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

Upvotes: 1

Views: 2099

Answers (1)

gaitat
gaitat

Reputation: 12632

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.

Upvotes: 1

Related Questions