I'm trying to add text to the surface of a sphere with three.js, the only way I can see to do this is to write text to a canvas and use that as a texture on the sphere, but when I do this although I see text the sphere goes from very smooth shading to showing the segment borders (wireframes outline) and it looks pretty ppor. I've tried every parameter I can think of in the material and texture.. does anyone know how to apply text to a sphere surface without this problem..? any help greatly appreciated..
var x=800, y=100, z=0, size=10, color="red", backGroundColor="white",backgroundMargin=100;
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
context.font = size + "pt Arial";
var textWidth = context.measureText(text).width;
canvas.width = textWidth + backgroundMargin;
canvas.height = size + backgroundMargin;
context = canvas.getContext("2d");
context.font = size + "pt Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = color;
context.fillText(text, canvas.width / 2, canvas.height / 2);
var renderer = new THREE.CanvasRenderer();
var camera = new THREE.PerspectiveCamera( VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();
camera.position.z = 300;
renderer.setSize(WIDTH, HEIGHT);
$container.append(renderer.domElement);
var texture1 = new THREEx.DynamicTexture(512,512)
texture1.context.font = "bolder 25px Verdana";
texture1.clear('White').drawText("Jerome", undefined, 256, 'black').drawText("Jones", undefined, 280, 'blue')
var texture2 = new THREEx.DynamicTexture(512,512)
texture2.context.font = "bolder 25px Verdana";
texture2.clear('White').drawText("Heather", undefined, 256, 'black').drawText("Claire", undefined, 280, 'blue')
var sphereMaterial1 = new THREE.MeshLambertMaterial(
{
color: 0xFFFFFF,
map :texture1.texture
});
var sphereMaterial2 = new THREE.MeshLambertMaterial(
{
color: 0xFFFFFF,
map :texture2.texture
});
// set up the sphere vars
var radius = 60, segments = 80, rings = 80;
var sphere1 = new THREE.Mesh( new THREE.SphereGeometry(radius, segments, rings), sphereMaterial1);
var sphere2 = new THREE.Mesh( new THREE.SphereGeometry(radius, segments, rings), sphereMaterial2);
scene.add(sphere1);
scene.add(sphere2);
scene.add(camera);
var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene.add(pointLight);
renderer.render(scene, camera);