0

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);
user1118321
  • 25,567
  • 4
  • 55
  • 86

0 Answers0