环境
ThreeJS 107版本three.min.jsOrbitControls.js说明
添加标注的原理是利用在场景中添加canvas实现，要标注的文字绘制在canvas中。
解决方案
创建球的过程参见"ThreeJS制作地球"
创建点group，考虑后面会做删除功能，所以把所有的实体都以group组为单位添加，后续方便做删除
// 标记点组合var gLabel = new THREE.Group();
获取canvas对应球坐标
var average = getAverage();// 获取average函数function getAverage() {var average = 0;if (dom.clientWidth > dom.clientHeight) {average = dom.clientHeight / 180;} else {average = dom.clientWidth / 360;}return average;}
创建文字标注、设置大小、并赋予材质
var texture = new THREE.CanvasTexture(getCanvasFont(textLength * fontsize * average, fontsize * average, textvalue, color, backgroundColor));var fontMesh = new THREE.Sprite(new THREE.SpriteMaterial({map: texture}))fontMesh.scale.x = fontsize / average * textLength;fontMesh.scale.y = fontsize / average;
定位标注
// 定义提示文字显示位置var lblPos = this.getPosition(_labelData[i].attributes.x + 90, _labelData[i].attributes.y, 35);fontMesh.position.set(lblPos.x, lblPos.y, lblPos.z);gLabel.add(fontMesh);
创建文字
// canvas实现文字函数function getCanvasFont(w, h, textValue, fontColor) {var canvas = document.createElement('canvas');canvas.width = w;canvas.height = h;var ctx = canvas.getContext('2d');ctx.fillStyle = backgroundColor ? backgroundColor : '#ff0000';//textBackground;ctx.fillRect(0, 0, w, h);ctx.font = h + "px '微软雅黑'";ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.fillStyle = fontColor;ctx.fillText(textValue, w / 2, h / 2 + 3);//document.body.appendChild(canvas);return canvas;}
