Question

我尝试使用three.js将文本添加到球体表面，我可以看到这样做的唯一方法是将文本写入画布并将其用作球体上的纹理，但是当我这样做时，虽然我看到文本，球体从非常平滑的阴影变为显示线段边框（线框轮廓），它看起来很漂亮。我已经尝试了我能在材料和纹理中考虑的每个参数..有没有人知道如何将文本应用到球体表面而没有这个问题..？任何帮助非常感谢..

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

three.js文本在具有平滑着色的球体上

0 个答案: